How to Deploy a React application using AWS Amplify

One of the very first challenges I took on in my new position at TimePlay was figuring out how to deploy a React application to AWS Amplify.

Amplify is one of the many services under the AWS umbrella that provides frontend developers with the ability to quickly spin up web hosting, GraphQL APIs, and more for their web applications. With all the backend components integrated and managed by AWS, frontend developers no longer need to worry about hassle of managing servers, and can instead focus on the frontend work at hand.

---

In this article, I will go over the steps needed to deploy a single-page application (SPA) written in React to AWS Amplify. I will be using the Amplify CLI, which you can install using the following command: (assuming you have Node.js and npm already installed)

npm install -g @aws-amplify/cli

Additionally, for simplicity and to keep the focus of this tutorial on Amplify itself, I will literally be deploying the output of the base create-react-app (CRA) creation command with TypeScript template:

npx create-react-app my-app --template typescript

Now let's begin!

---

Step 1 - Configuration

Run amplify configure. This will open up a AWS IAM account page, and you'll have the option to either create a new IAM user for Amplify, or use an existing IAM user. The CLI will prompt you for preferred region and name of the new user, but you can provide an existing user's credentials in the following steps if you already have a user.

Whether you create a new user or use an existing user, ensure that you have the following permissions set:

Also, add this IAM policy to your AWS organization and attach it to the user. (either using Visual Editor or this JSON below)

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": "amplify:*",
            "Resource": "*"
        }
    ]
}

Once you have configured your AWS user, the CLI will prompt you for the user's access key ID and secret access key. Enter those in, and leave AWS profile as default unless you would like it to be something else. Now Amplify has been configured.

⚠️ Important
For the purposes of this tutorial, these should be sufficient. However, I highly suggest setting only the minimum number of permissions necessary for the Amplify user. Take a look at this page on the Amplify CLI documentation for more information on the necessary permissions required for Amplify actions.

Step 2 - Initialization

Now that the user has been configured, on the root directory of the project, run amplify init. Follow the prompts as you setup your Amplify project on the cloud. For this tutorial, you will select React application and Amplify CLI will configure itself to run the appropriate build commands when it’s time to deploy the app.

ℹ️ Note
You should also be able to follow through these steps with little modification if you're deploying an app built with another framework such as Vue or Angular. Amplify CLI also has options for these frameworks. Additionally, you can also deploy static HTML/CSS/JS using Amplify, as long as you have src and dist directories and the final build "output" ends up in dist.

ℹ️ Note
When Amplify is initialized, it will have also generated an amplify/ directory and updated your .gitignore to add ignore rules for Amplify-specific files. Push these to source control.

Step 3 - Add Hosting

Now that Amplify is initialized for your project, run amplify add hosting to add site hosting to your project. You can select "Hosting with Amplify Console" to let Amplify manage the full deployment pipeline for you. (ie. S3 buckets and CloudFront distributions will be created, but the CloudFront distributions will not be on your AWS account) You can also select "Amazon CloudFront and S3" to manage the S3 buckets and CloudFront distributions yourself.

At the time of this writing, the CLI will present the following options for your hosting based on your selection:

"Hosting with Amplify Console" Options

• Amplify Console will allow you to use your Git repo hosted on a provider such as GitHub, GitLab, Bitbucket, or CodeCommit, and any push you make will trigger a CD pipeline that's managed by Amplify.
• You can also select the manual option if you plan on deploying manually or as part of another CI/CD pipeline such as CircleCI or Jenkins. You can also drag'n'drop files using the browser if you use this method — useful for designers and non-technical people to publish their updates. For this tutorial, we will choose this option.

"Amazon CloudFront and S3" Options

• Insecure HTTP (S3) option will allow you to only deploy the built site to an S3 bucket. This is useful if you plan on adding CDN using CloudFront or another CDN provider separately. We use this at TimePlay as our CloudFront distributions are handled using Terraform.
• There's also a Secure HTTPS (S3+CloudFront) method if you would like to deploy to S3 and front it with CloudFront CDN in one step.

ℹ️ Note
You should invalidate CDN cache after every deploy so that your changes are propagated. If you use Amplify Console to manage your deployment, it will do this for you. If you deploy using S3+CloudFront option, you can pass --invalidateCloudFront to amplify publish to have the Amplify CLI perform an invalidation request.

Step 4 - Deploy

Now that we've added hosting, run amplify publish to build and deploy your application to Amplify.

Once it finishes deploying successfully, it will provide you with a link that you can access to view your deployment.

---

Now you have a React application successfully deployed to the Cloud in a few easy steps using Amplify! Hope you found this tutorial useful, and do not hesitate to leave a comment if there's anything I may have missed.

---

Cover Photo by Pixabay on Pexels