How to Deploy a React application using AWS Amplify
Published: 2020-11-19 18:03:35

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](https://create-react-app.dev/) (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:

![Permissions](https://dev-to-uploads.s3.amazonaws.com/i/la6l0mmvvfbf68qo39th.png)

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.

|:warning: 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](https://docs.amplify.aws/cli/usage/iam) 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.

| :information_source: 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`. |

| :information_source: 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 &mdash; 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.

| :information_source: 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.

![Screen Shot 2020-10-16 at 12.23.22 PM](https://dev-to-uploads.s3.amazonaws.com/i/mxh0nzo4y4wthmc1hbis.png) 

---------

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](https://www.pexels.com/photo/abstract-aluminum-architectural-architecture-210158/) by [Pixabay](https://www.pexels.com/@pixabay) on [Pexels](https://www.pexels.com/)