Deploy React App in 10 minutes with AWS Amplify and Route 53
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 we need to have an app to deploy 😄.
After logging in to your AWS console search and click on AWS Amplify
On the Amplify home screen click on get started.
You would now need to choose between amplify build or amplify hosting, choose the latter.
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.
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
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.
On the review page, click save and deploy
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.
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 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.
Wait for a few minutes for SSL to install on that domain. Congratulation, we have just deployed a react App with Amplify.