Deploy a React.js Application with AWS Amplify (Part 1)

Part 1, Part 2, Part 3

Introduction

React.js is a very popular Javascript library nowadays. In this lab, we will talk about how to deploy a web application with React.js using AWS Amplify. I assume that you all had AWS account already. If you don’t have, please visit here to register a 1 year free-tier account. Our final system will look like below:

AWS Amplify

AWS Amplify is an end-to-end solution that enables mobile and front-end web developers to build and deploy secure, scalable full stack applications, powered by AWS. With Amplify, you can configure app backends in minutes, connect them to your app in just a few lines of code, and deploy static web apps in three steps. Get to market faster with AWS Amplify.

Solution Diagram

Start Cloud 9

Cloud 9 is a cloud IDE and we could use it for development. For your reference, my region is N. Virginia(us-east-1). You could choose any region you want, if no preference please just follow me. Search “Cloud 9” and then click “Create environment”.

There there are 3 steps for creation. The name is up to you. In the second step, if you do not want your application close suddenly, please choose “Never” on Cost-saving setting. Then click “Create environment”.

When you are the first time to use Cloud 9, it will have Welcome page and please simply close it. In the console, please git clone my repo and update the OS by using:

git clone https://github.com/manbobo2002/react-todos-demo.git
sudo yum -y update

Create IAM

Open the IAM console at https://console.aws.amazon.com/iam

Click Users => Add user.

Enter some information then click Next.

For convenience, we grant the Administrator Access policy to it and click Next and Next.

Download the csv and close it.

Configure Cloud9

Back to Cloud9, we click AWS Cloud9 => Preferences. Scroll down to the AWS Settings and turn of AWS managed temporary credentials.

Then we type:

aws configure

And input the value shown in the csv file which we downloaded before.

We remove the aws session by typing:

sed -i 's/aws_session_token =//g' ~/.aws/credentials

Then we move to our application folder and install the dependencies and run the project:

cd react-todos-demo/
npm install
npm start

We may see some warning, but we could ignore it.

Then click preview running application.

The preview application will show on right hand side.

Create an AWS CodeCommit repository

First of all, we open the CodeCommit console at https://console.aws.amazon.com/codesuite/codecommit/home.

Then try to create a repository by entering some information.

When we finished, we will see this page.

Then move back to Cloud9, and click here to open a new terminal. Type below command to setup git credential.

git config --global credential.helper '!aws codecommit credential-helper $@'
git config --global credential.UseHttpPath true

And then remove the remote from git project.

cd ~/environment/react-todos-demo/
git remote remove origin

Add new git origin to our project.

export MY_REGION=`aws configure get region`
git remote add origin https://git-codecommit.$MY_REGION.amazonaws.com/v1/repos/react-todos-demo

Configure our git setting.

git config --global user.name "Your Name"
git config --global user.email you@example.com

Add, commit and push to CodeCommit repository.

git add .
git commit -m "Preparing your development environment"
git push origin main

Then we back to CodeCommit, and we see all the codes are here now.

Install Amplify

Back to Cloud9, then we type:

npm install -g @aws-amplify/cli
npm install --save aws-amplify aws-amplify-react
amplify init

Be friendly reminded that it will have auto input in most cases, for me I just have to change the environment to “prod”.

It will help us initialize the project.

Then we need to add amplify authentication.

amplify add auth

We then push all the changes:

amplify push

Update the contents of src/App.js with the following.

import { Auth } from 'aws-amplify';
import awsconfig from './aws-exports';
import { withAuthenticator } from 'aws-amplify-react';
Auth.configure(awsconfig);
...
export default withAuthenticator(App, {includeGreetings: true});

We Addcommit, and push files to the CodeCommit repository.

git add .
git commit -m "Authentication added"
git push origin main

Now we run again our application by type “Ctrl+C” and

npm run start

We should see the login screen here.

Actually we have done 3 important things:

  • Imported and configured the AWS Amplify JS library
  • Imported the withAuthenticator higher order component from aws-amplify-react
  • Wrapped the App component using withAuthenticator

We can normally register an account and receive a confirm email.

After the completion of registration, we are able to login now.

Leave a Reply