DEV Community 👩‍💻👨‍💻

Samuel Olubayo for AWS Community Builders

Posted on

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:

  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.

Top comments (0)

Let's Get Hacking

Join the DEV x Linode Hackathon 2022 and use your ingenuity and creativity to build using Linode.

Join the Hackathon <-