Deploy React App in 10 minutes with AWS Amplify and Route 53

Hi there,

Let’s learn how to deploy a react app with AWS Amplify. In this guide we would need the following:

A React App.
Git Provider (Github, Bitbucket, Gitlab, AWS CodeCommit, etc).
Custom Domain (This is optional).

Obviously to deploy an app …


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Samuel Olubayo

Hi there,

Let's learn how to deploy a react app with AWS Amplify. In this guide we would need the following:

  1. A React App.
  2. Git Provider (Github, Bitbucket, Gitlab, AWS CodeCommit, etc).
  3. Custom Domain (This is optional).

Obviously to deploy an app we need to have an app to deploy 😄.

After logging in to your AWS console search and click on AWS Amplify

search for AWS amplify

On the Amplify home screen click on get started.

Getting started with AWS AWS amplify

You would now need to choose between amplify build or amplify hosting, choose the latter.

Get started amplify hosting

You have the option of selecting one of the git providers listed, There is also an option to use to upload code without a Git provider, but for the sake of this tutorial, we would be using GitHub.

AWS ampify git provider image

Clicking on GitHub will redirect you to GitHub for you to authorize AWS Amplify on your GitHub account, if that process is successful, you would see a screen like this

Image description

select the repository and then a default branch from the list and click next.
You would see a configuration screen, with a preview of the recommended changes, you don't need to do anything you can go ahead and click next to continue.

AWS ampify configure page

On the review page, click save and deploy

AWS ampify review page

In the next few minutes, we would have our app completely deployed on the app homepage, the page would be similar to the screen below and we would also have a random URL generated on amplifyapp domain.

amplify complete deployment page

To add a custom domain, click on the domain management on the left side of the AWS Amplify dashboard, and then click on add domain as seen in the screenshot below.

add custom domain

Add your domain using route 53, if that process was completed successfully, you should be able to find your domain in the search bar, do the simple configuration and save.

Image description

Wait for a few minutes for SSL to install on that domain. Congratulation, we have just deployed a react App with Amplify.


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Samuel Olubayo


Print Share Comment Cite Upload Translate Updates
APA

Samuel Olubayo | Sciencx (2022-11-03T16:01:25+00:00) Deploy React App in 10 minutes with AWS Amplify and Route 53. Retrieved from https://www.scien.cx/2022/11/03/deploy-react-app-in-10-minutes-with-aws-amplify-and-route-53/

MLA
" » Deploy React App in 10 minutes with AWS Amplify and Route 53." Samuel Olubayo | Sciencx - Thursday November 3, 2022, https://www.scien.cx/2022/11/03/deploy-react-app-in-10-minutes-with-aws-amplify-and-route-53/
HARVARD
Samuel Olubayo | Sciencx Thursday November 3, 2022 » Deploy React App in 10 minutes with AWS Amplify and Route 53., viewed ,<https://www.scien.cx/2022/11/03/deploy-react-app-in-10-minutes-with-aws-amplify-and-route-53/>
VANCOUVER
Samuel Olubayo | Sciencx - » Deploy React App in 10 minutes with AWS Amplify and Route 53. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/11/03/deploy-react-app-in-10-minutes-with-aws-amplify-and-route-53/
CHICAGO
" » Deploy React App in 10 minutes with AWS Amplify and Route 53." Samuel Olubayo | Sciencx - Accessed . https://www.scien.cx/2022/11/03/deploy-react-app-in-10-minutes-with-aws-amplify-and-route-53/
IEEE
" » Deploy React App in 10 minutes with AWS Amplify and Route 53." Samuel Olubayo | Sciencx [Online]. Available: https://www.scien.cx/2022/11/03/deploy-react-app-in-10-minutes-with-aws-amplify-and-route-53/. [Accessed: ]
rf:citation
» Deploy React App in 10 minutes with AWS Amplify and Route 53 | Samuel Olubayo | Sciencx | https://www.scien.cx/2022/11/03/deploy-react-app-in-10-minutes-with-aws-amplify-and-route-53/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.