Book Image

Rapid Application Development with AWS Amplify

By : Adrian Leung
Book Image

Rapid Application Development with AWS Amplify

By: Adrian Leung

Overview of this book

AWS Amplify is a modern toolkit that includes a command line interface (CLI); libraries for JS, iOS, and Android programming; UI component libraries for frameworks like React, Angular, and Vue.js for web development, and React Native and Flutter for mobile development. You'll begin by learning how to build AWS Amplify solutions with React and React Native with TypeScript from scratch, along with integrating it with existing solutions. This book will show you the fastest way to build a production-ready minimum viable product (MVP) within days instead of years. You'll also discover how to increase development speed without compromising on quality by adopting behavior-driven development (BDD) and Cypress for end-to-end test automation, as well as the Amplify build pipeline (DevOps or CI/CD pipeline) to ensure optimal quality throughout continuous test automation and continuous delivery. As you advance, you'll work with React to determine how to build progressive web apps (PWAs) with Amplify and React Native for cross-platform mobile apps. In addition to this, you'll find out how to set up a custom domain name for your new website and set up the AWS Amplify Admin UI for managing the content of your app effectively. By the end of this AWS book, you'll be able to build a full-stack AWS Amplify solution all by yourself.
Table of Contents (14 chapters)
1
Section 1: Getting Ready
4
Section 2: Building a Photo Sharing App
9
Section 3: Production Readiness

Exploring Amplify Console

In this section, we will go through Amplify Console in order to learn how to set up an Amplify project properly. Let's enter the amplify configure command in the terminal, as illustrated in the following code snippet, and this will open up the default browser of your machine and take you to the AWS Management Console:

amplify configure
  1. Once you have entered the preceding command, it will open up the browser and ask you to log in to your AWS account, as shown in the following snippet. After you have logged in to your AWS account, return back to the terminal and hit Enter to continue:
    Follow these steps to set up access to your AWS account:
    Sign in to your AWS administrator account:
    https://console.aws.amazon.com/
    Press Enter to continue
  2. It will then ask you to select your AWS region by using the up- and down-arrow keys and then hitting Enter to select a region, as follows:
    Specify the AWS Region? region: (Use arrow keys)
     us-east-1 
      us-east-2 
      us-west-2 
      eu-west-1 
      eu-west-2 
      eu-central-1 
      ap-northeast-1 
    (Move up and down to reveal more choices)
  3. Type your desired AWS Identity and Access Management (IAM) username or hit Enter with the suggested username, as shown in the following snippet. The prefix with the amplify username will help you identify and remember the specific IAM user on the IAM Management Console, so call it something that's relevant to your project name, such as amplify-project-name:
    Specify the AWS Region
    ? region:  us-east-1
    Specify the username of the new IAM user:
    ? user name: (amplify-XXXXX) 
  4. It will open up the browser and take you to the IAM Management Console. The username is pre-filled for you, and it also selects the correct access type for you, which is programmatic access. Programmatic access options allow the CLI to save an encrypted access key ID and an access secret key locally on your development machine. This allows the CLI to have access rights to configure the project for you without entering a password every time. So, leave it as is and hit Next: Permissions to continue, as illustrated in the following screenshot:

    Figure 1.1 – Amplify Console: Add user

  5. In order to allow the Amplify CLI and your project to have access to all features of AWS, you should set the policies by attaching the AdministratorAccess policy. You could customize your own policy for a specific project as well. By default, it has selected the right policy for you, so click Next: Tags to continue, as illustrated in the following screenshot:

    Figure 1.2 – Amplify Console: Set permissions

  6. On the Add tags screen, please add some useful custom key-value pair tags for you to identify and remember who has access to this IAM user. You could add a specific developer's name as the key and an email address as the value, or a name of a project as the key and amplify as the value, in order to remember that this IAM user is created for your specific Amplify project. You can always come back to the IAM console through the AWS console to add or remove IAM users or edit its access policies if you make any mistakes throughout this process. After you have created several tags, you can click Next: Review to continue, as illustrated in the following screenshot:

    Figure 1.3 – Amplify Console: Add tags

  7. On the Review screen, you can double-check every detail before creating an IAM user. If you made any mistakes during the previous steps, you can click Previous to go back to the previous steps to make changes. You can simply click Create User and it will create a new IAM user for you, as well as generating an access key and a secret key, as illustrated in the following screenshot:

    Figure 1.4 – Amplify Console: Review and Create user

  8. As you can see, the IAM Management Console has created an IAM user for you and has generated an access key and a secret key. You can download a .csv file that contains the access key ID and the secret key as a backup first by clicking the Download .csv button, as illustrated in the following screenshot. Then, you can copy and paste both the access key ID and secret key from here and return back to the terminal for the next step. Leave the browser open and return back to the terminal:

    Figure 1.5 – Amplify Console: Downloading user credentials

  9. Once you have completed the user creation process and returned back to the terminal, you will see the following message. Hit Enter to continue:
    Complete the user creation using the AWS console
    https://console.aws.amazon.com/iam/home?region=undefined#/users$new?step=final&accessKey&userNames=amplify-XXXXX&permissionType=policies&policies=arn:aws:iam::
    aws:policy%2FAdministratorAccess
    Press Enter to continue
  10. The CLI will ask you to enter the access key ID and the secret access key. You could go back to the browser or open the .csv file to copy and paste them in the terminal, as follows:
    Enter the access key of the newly created user:
    ? accessKeyId:  (<YOUR_ACCESS_KEY_ID>) 
    ? secretAccessKey:  (<YOUR_SECRET_ACCESS_KEY>)
  11. The Amplify CLI will ask you to either update or create an AWS profile on your local machine. If you have set the IAM user with the default admin access rights, it makes sense to use it across all projects. You can simply hit Enter to continue with the suggested name, default, as illustrated in the following snippet; otherwise, type your desired memorable profile name that is related to the IAM user and hit Enter to continue:
    This would update/create the AWS Profile in your local machine
    ? Profile Name:  (default) 
  12. Amplify Console will let you know once the new user has been set up successfully by showing a message like this:
    This would update/create the AWS Profile in your local machine
    ? Profile Name:  default
    Successfully set up the new user.

    Important note

    If you want to learn more about how AWS Amplify CLI and Amplify Console work, you can visit the Amplify Console website at the following link:

    https://console.aws.amazon.com/amplify/home

Now that you have become familiar with the AWS Amplify CLI and Amplify Console in this section, we will discover AWS Amplify hosting in the next section.