How to deploy React application to AWS Amplify (Amazon Web Services)?
Tags: react, aws
Published: 2022-08-10 15:13:57

In the previous article, I have described [how to deploy react application to Google App Engine](https://www.codingdeft.com/posts/react-deploy-google-cloud-app-engine/). In this article, we will see how to deploy react application to [AWS Amplify](https://aws.amazon.com/amplify/).

## Creating the React application

If you do not have an existing application, create one using the following command:

```bash
npx create-react-app react-aws-amplify
```

## Pushing the code to GitHub

Before deploying the code to AWS Amplify, you need to host the code in a git repository like GitHub, GitLab, etc.

Create a git repository named `react-aws-amplify` at https://github.com/new, and run the following commands inside the project to push the code to GitHub.

```bash
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/collegewap/test1.git
git push -u origin main
```

## Creating AWS account

If you do not have an AWS account, create one using the following link:

https://portal.aws.amazon.com/billing/signup#/start

## Deploying the code to AWS Amplify

Log in to the [AWS Console](https://console.aws.amazon.com/console/home) and search for **AWS Amplify**:

![aws amplify search](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggxj1z442dridtceohnj.png) 

Select the first option from the search suggestions.

Scroll down and select **Get Started** under **Amplify Hosting**.

![aws amplify get started](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggclcr39c6z7t7h6br1k.png) 

Select GitHub or any other Git provider and click on **Continue**.

![select git](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i0k0ztl15nc5orogxswh.png) 

Now you will be redirected to GitHub for authentication.

![aws github auth](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0by6s9lkjj6077twpq8.png) 

Click on **Authorize**.

Select the repository and the branch you want to deploy and click **Next**.

![aws select branch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhl1gdne6dihmtmlg4tw.png) 

In the next step, you may change the app name if needed. You will see that the build script is automatically populated by AWS:

![aws build config](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7kt3b3rebe50xy206my.png) 

On the next page, review the settings and click on **Save and Deploy**.

Now it will show different steps of build and deployment:

![aws deploy steps](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8582x9gk36d8qzelkuja.png) 

Once all the steps are completed, click on the link highlighted in the below image and you will see the deployed application.

![aws deploy completed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aue76bzgss0i3dlf65nq.png) 

> AWS will automatically trigger a build and deploy your changes when you push new changes to the **main** branch from next time.

## Adding custom domain

You can select **Domain Management** under **App Settings** in the left navigation to add a custom domain.

![select domain management](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zg2x6uowe3zjtin2k12n.png) 

Click on **Add Domain** in the top right corner. After adding the domain, you will have to update your DNS records in your domain registrar.