Deploying a ReactJS on AWS Amplify

For this tutorial you will need to have:

• An AWS account.
• A GitHub account for hosting Git repositories.
• A basic understanding of using Git CLI to push commits to a remote repository.
• Custom domain (optional).

AWS Cloud9 is a powerful cloud-based IDE that lets developers code, run, and debug in a browser. Ideal for serverless and ReactJS apps, it supports various languages without local installations.

In this step we will create an environment in AWS Cloud 9 and use it to create a local ReactJS application.

Open the AWS Cloud9 console at https://console.aws.amazon.com/cloud9/.

We will start by creating a Cloud9 environment. It will run on a T3.small Amazon Linux 2 instance. We will configure access to the underlying instance with AWS Systems Manager. This will allow us to SSH to the instance without the need to open any inbound ports in the instance security group. During setup Cloud 9 creates IAM roles for accessing AWS services on your behalf.

From the environment page select your Cloud9 instance and click the Open link. You are now connected to your Cloud9 IDE.

Before building the ReactJS app check your instance is running Node.js version 12.x and npm version 6.x or greater.

React uses these versions for optimal performance and compatibility for building user interfaces.

Let’s set up a React application in AWS Cloud9 for local testing. From the ‘~/environment’ directory we will create a new React project named “cloud-wanderer-blog” . Run the commands

$ npx create-react-app cloud-wanderer-blog
$ cd cloud-wanderer-blog
$ npm start

To start the React app, move to the project directory ‘cloud-wander-blog’ and run the command ‘npm start’.

AWS Cloud9 doesn’t use a localhost to access your running applications. Instead, it provides a preview feature through the Cloud9 IDE.

From AWS Cloud9 IDE top menu select Preview > Preview Running Application. This will open a new tab in your environment, displaying the React app running.

Log into your GitHub account and select ‘New repository’ from the ‘+’ button at the top right corner. This repository will store the React application files and configurations. I named my new repository cloud-wanderer.

Do not check ‘Add a README file’ because installing React on Cloud9 has already created the README file.

Upload your React application on Cloud9 to the new remote repository on GitHub. You can add the files from GitHub or use the Git CLI on your Cloud9 instance.

Check out the GitHub link for guidance on how to upload files: https://docs.github.com/en/repositories/working-with-files/managing-files/adding-a-file-to-a-repository

Note when I initialized my local Git repository in Cloud9 it created a ‘master’ branch. To keep things consistent and future proof with my remote GitHub repository. I renamed my local branch from ‘master’ to ‘main’. This shift from ‘master’ to ‘main’ is a wider initiative to promote more inclusive language.

With our staging environment set up on Cloud9, we will now set up a production environment on AWS Amplify. To set up the Amplify app I installed the Amplify CLI from `~/home/ec2-user’ onto my Cloud9 instance. To allow the Amplify CLI open files and URL links to the AWS management console I installed xdg-utils.

$ cd
$ sudo yum install xdg-utils -y
$ npm install -g @aws-amplify/cli

To set up the Amplify CLI on your local machine, you have to configure it to connect to your AWS account. To do this we use ‘ amplify configure’. Click the provided link to sign into the AWS Console.

Move back to Cloud9 terminal and specify the AWS Region. I chose the eu-west-1 region.

Amplify CLI will ask you to create an IAM user. Click the user creation link that will open the IAM User creation page. Enter a User name and select Next. You can name the user anything but I’ll call it “amplify-cli-admin”. Click the Next button.

Select Attach policies directly and select AdministratorAccess-Amplify as the Permissions policy.

On the Review page, check that everything looks good and select Create user.

This will redirect to the users list page. Select the user you just created. From the user details page open the Security credentials tab. Scroll down to Access keys and select Create access keys.

For use case select Command Line Interface (CLI) option. Acknowledge the warning, and select Next.

Download a copy of the CSV file containing the IAM users access keys. Store the file in a secure location.

Move back to the Cloud9 console and press enter. Enter the values for the Access key and Secret access key. Select the default for profile name. This has configured the Amplify CLI in the selected region with security credentials.

Run ‘amplify init’ command to create a new Amplify project. This prepares the React application for Amplify. Amplify is smart enough to suggest default settings based on the cloud-wanderer-blog directory. You can accept these defaults by pressing ‘Y’ or reject them and set your own preferences by pressing ‘N’.

$ cd ~/environment/cloud-wanderer-blog/
$ amplify init

To authenticate choose AWS Profile. Select the default profile configured in the previous step. Otherwise choose Access Keys and manually enter the Access Key & Secret Access Key IDs.

Move to the Amplify Console and view the Amplify App deployed from the Amplify CLI.

Now we will connect our Amplify app with the GitHub repository. This makes the CI/CD process much easier.

From the Amplify console open the hosting environment tab for the Amplify app.

Authorize Amplify to connect to your GitHub repository. Add your GitHub repository & branch.

Under Build settings select ‘dev’ for the environment. Create an IAM role for Amplify to access your resources. Amplify detects default build settings. If you have different configurations, you can edit the Yaml script.

Once completed, review the settings and then click on Save and deploy to deploy the application finally

The process of provisioning, building, and deployment will take a few minutes.

The Amplify application is now available from the endpoint link.

Next test the continuous deployment. For this step I modified the , the React home page App js. I modified by linking it with a second page. I previewed the page to verify the change locally.

Using Git CLI on Cloud9 I pushed the change to GitHub repository. AWS Amplify automatically detected these changes and initiated a new build and deployment process.

Once complete, refresh the Amplify app in the browser and see the changes.

The VISIT Cloud Wanderer BLOG linked to the new page.

Using Amazon CloudFront is crucial for the speed of your website. CloudFront caches your content at AWS Edge locations to serve them to your users faster.

CloudFront can be added from the Amplify with S3 as the origin server. A caveat to this method is that it is not possible to modify the CloudFront distribution. As using Amplify console will deploy the resources in an AWS managed account.

An alternate option is to deploy CloudFront from the Amplify CLI.

The ‘amplify add hosting’ command configures a S3 bucket & CloudFront distribution to cache your static content. You will be able to access & manage both S3 bucket & CloudFront distribution from your AWS account.

Run the ‘amplify add hosting’ command. Select Amazon CloudFront and S3. Enter a name for the S3 bucket.

Push your changes by running ‘amplify publish’. This uploads the build artifacts & static content to the new S3 bucket. CloudFront will serve the static content from edge locations for improved load times.

Using the AWS CLI we can list the objects in the newly created S3 bucket

$ aws s3 ls s3://cloud-wanderer-bucket-dev - region eu-west-1

The deployment of CloudFront and S3 introduces new configurations to the Amplify directory. These changes need to be committed and pushed to your remote GitHub repository.

Use Curl to verify CloudFront is caching the static content.

From Curl output look at the x-cache header. ‘Hit from cloudfront’, indicates CloudFront is caching content. Whereas ‘Miss from cloudfront’, your content isn’t being cached.

Don’t be alarmed if you encounter a ‘Miss from cloudfront’ on the first attempt. The content needs to be accessed at least once before it can be cached.

Your default Amplify endpoint is similar to https://main.d335ddgrzlw9s5.amplifyapp.com/

To make it easier to access your Amplify app we will configure it with a custom domain.

For this step I will add the domain ‘cloudwanderer.life’ to my Amplify app. I purchased the domain ‘cloudwanderer.life’ from GoDaddy.

Open the Route 53 console at https://console.aws.amazon.com/route53/

Click on Hosted Zones. Choose Create Hosted Zone. Enter your domain name & click Create. When you create a hosted zone, Route 53 automatically assigns four name servers to the zone.

In your hosting account (GoDaddy, Google Domains), update the DNS with the Route 53 name servers. This gives Route 53 control DNS of the domain.

Please note that it can take up to 48 hours for DNS propagation to fully take effect across the internet due to TTL (Time to Live) values set on DNS servers worldwide.

From the Amplify console we can now serve our Amplify application using the custom domain cloudwanderer.life

In the Amplify Console, click Domain Management in the left menu. Next, click the Add Domain button.

Here, the dropdown menu shows you the Route53 hosted domain. Choose this domain & click Configure domain.

Amplify will create CNAME records within the Route53 to verify domain ownership.

This will configure the Amplify app with your domain (this will take between 5–20 minutes).

Once completed you will be able to access your Amplify app using your custom domain.