Hosting a React App on AWS Amplify with Github Integration

Hosting a React App on AWS Amplify with Github Integration

Hosting a website on AWS Amplify is an easy process that requires minimal setup. In this tutorial, I will take you through the steps to host a React application that is available on a GitHub repository to AWS Amplify.


Before we get started, there are a few prerequisites that you need to meet:

  • A GitHub account

  • A React application available on a GitHub repository

  • An AWS account

If you don't already have these set up, take a moment to create them.

Step 1: Create an AWS Amplify App

The first step to hosting your React application on AWS Amplify is to create an Amplify app. To do this, go to the AWS Amplify console and log in to your account.

Once you're logged in, Search for Amplify in the services tab.

Click on the "Get Started" button in the Amplify Hosting section.

Here you have to select the repository where you have kept your application code. For this tutorial, we will use Github as our source code repository.

Select GitHub and click Continue

Step 2: Connect your GitHub Repository

You will now be redirected to the GitHub login page.
Log in to your GitHub account where you have the Source code.

Now Click on the "Authorize AWS Amplify" Button

Now select "all repositories" and click "Install and Authorize"

You will be redirected back to AWS
Now Select the Repository having the source code and select the Master branch

Step 3: Configure Build Settings

Next, you need to configure the build settings for your React application.

Give the app name you want

The framework will be automatically detected by Amplify, and a build file will be created for it.
In the advanced settings, you can include any environment variables you have for your project and then click Next

Step 4: Deploy your Application

After you've configured the build settings, you can deploy your application to AWS Amplify. To do this, click on the "Save and deploy" button in the Amplify console.

AWS Amplify will pull your code from your GitHub repository, build your application, and deploy it to the specified region. You can monitor the progress of your deployment in the Amplify console.

Once your application has been deployed, you can view it by clicking on the URL provided in the Amplify console.