Skip to content
react

How to deploy React application to AWS Amplify (Amazon Web Services)?

Jan 9, 2023Abhishek EH3 Min Read
How to deploy React application to AWS Amplify (Amazon Web Services)?

In the previous article, I have described how to deploy react application to Google App Engine. In this article, we will see how to deploy react application to AWS Amplify.

Creating the React application

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

1npx 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.

1git init
2git add .
3git commit -m "first commit"
4git branch -M main
5git remote add origin https://github.com/collegewap/test1.git
6git 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 and search for AWS Amplify:

aws amplify search

Select the first option from the search suggestions.

Scroll down and select Get Started under Amplify Hosting.

aws amplify get started

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

select git

Now you will be redirected to GitHub for authentication.

aws-github-auth

Click on Authorize.

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

aws select branch

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

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

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

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

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.

If you have liked article, stay in touch with me by following me on twitter.

Leave a Comment

© 2024 CodingDeft.Com