Objective

In this guide, we will take you through deploying a web application with AWS Amplify. Amplify is a framework with a set of tools and services that help you build scalable full stack applications, powered by AWS services.

What is AWS Amplify

AWS Amplify is a set of tools and services that can be used together or on their own, to help front-end web and mobile developers build scalable full stack applications, powered by AWS. With Amplify, you can configure app backends and connect your app in minutes, deploy static web apps in a few clicks, and easily manage app content outside the AWS console.

What you will learn

In this guide, you will learn how to:

1. Create your first Amplify project
2. Use the Amplify CLI to add authentication, a database, and a custom domain to your application
3. Deploy a web app with AWS Amplify

Prerequisites

Before Starting this guide, you will need:

An AWS account: if you don’t already have one follow the Setup Your Environment getting started guide for a quick overview.
Familiarity with git and a Github account

Implementation
Check Environment

Verify that you are running at least Node.js version 12.x and npm version 6.x or greater by running node -v and npm -v in a terminal/console window. If not, please visit the nodejs and npm website for more information.

node -v

# Your output may differ based on the version installed.

12.1.1

npm -v

# Your output may differ based on the version installed.

6.14.6

Amplify command line interface

The Amplify Command Line Interface (CLI) is a unified toolchain to create AWS cloud services for your app. Let’s go ahead and install the Amplify CLI.

npm install -g @aws-amplify/cli

Note: Because we’re installing the Amplify CLI globally, you might need to run the command above with sudo depending on your system policies.

Once installation completes, configure Amplify by running the following command:

amplify configure

amplify configure will open a browser and ask you to sign into the AWS Console.

Once you’re signed in, Amplify CLI will ask you to create an IAM user.

Creating IAM user

Create a user with AdministratorAccess to your account to provision AWS resources for you like AppSync, Cognito etc.

Once the user is created, Amplify CLI will ask you to provide the accessKeyId and the secretAccessKey to connect Amplify CLI with your newly created IAM user.

Enter the access key of the newly created user:
1. accessKeyId: # YOUR_ACCESS_KEY_ID

2. secretAccessKey: # YOUR_SECRET_ACCESS_KEY

This would update/create the AWS Profile in your local machine

Hence we have successfully set up the new user.

Create a React app

To create a new React application, you will use create-react-app, a toolchain that helps you get started with no configuration required.

Create an application called amplify-app, and then initialize it with amplify init -y:

amplify init -y

# note npx is installed with npm

npx create-react-app amplify-app
cd amplify-app
amplify init -y

When you run amplify init -y, it’ll detect your app’s configuration and initialize a new Amplify app with default settings for React.

Project information

| Name: newapp
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: none
| Source Directory Path: src
| Distribution Directory Path: dist
| Build Command: npm run-script build
| Start Command: npm run-script start

Creating the required infrastructure

Now, it will create the required infrastructure that you need, and the output will look something like this:

CREATE_IN_PROGRESS amplify-amplifyapp-dev-163654 AWS::CloudFormation::Stack Tue Jun 14 2022 16:36:56 GMT-0700 (Pacific Daylight Time) User Initiated
CREATE_IN_PROGRESS UnauthRole AWS::IAM::Role Tue Jun 14 2022 16:37:00 GMT-0700 (Pacific Daylight Time)
CREATE_IN_PROGRESS DeploymentBucketBlockHTTP AWS::S3::BucketPolicy Tue Jun 14 2022 16:37:00 GMT-0700 (Pacific Daylight Time)
CREATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket Tue Jun 14 2022 16:37:01 GMT-0700 (Pacific Daylight Time)
CREATE_IN_PROGRESS AuthRole AWS::IAM::Role Tue Jun 14 2022 16:37:01 GMT-0700 (Pacific Daylight Time)
CREATE_COMPLETE UnauthRole AWS::IAM::Role Tue Jun 14 2022 16:37:17 GMT-0700 (Pacific Daylight Time)
CREATE_COMPLETE AuthRole AWS::IAM::Role Tue Jun 14 2022 16:37:17 GMT-0700 (Pacific Daylight Time)
CREATE_COMPLETE DeploymentBucket AWS::S3::Bucket Tue Jun 14 2022 16:37:24 GMT-0700 (Pacific Daylight Time)
CREATE_COMPLETE amplify-amplifyapp-dev-163654 AWS::CloudFormation::Stack Tue Jun 14 2022 16:37:26 GMT-0700 (Pacific Daylight Time)
✔ Successfully created initial AWS cloud resources for deployments.
✔ Initialized provider successfully.
✅ Initialized your environment successfully.

Your project has been successfully initialized and connected to the cloud!

Some next steps:

“amplify status” will show you what you’ve added already and if it’s locally configured or deployed
“amplify add <category>” will allow you to add features like user login or a backend API
“amplify push” will build all your local backend resources and provision it in the cloud
“amplify console” to open the Amplify Console and view your project status
“amplify publish” will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

What did you just create?

When you run amplify init to initialize a new project, Amplify will:

1. Analyze your project and confirm the project settings above, including which AWS profile will be used to provision the cloud resources required for your application.
2. Create a folder called amplify inside your project’s directory. This folder contains the back-end configuration of your application.
3. Create a file called src/aws-exports.js inside your project’s directory. This file contains the configuration for the services that Amplify provisions as you add more functionality to your application.
4. Create a cloud project for your application in the AWS Amplify Console, where you can view and manage your Amplify projects.

Conclusion

In this module, you learned how to create a React frontend application, and initialize it with Amplify in preparation to deploy it to your AWS account. In the next module, you will learn how to add an API to your front-end application using GraphQL.