Deploy and host a ReactJS app

with AWS Amplify Console

AWS Amplify Console provides a Git-based CI/CD workflow for developing, deploying, and hosting single page web applications or static sites with serverless backends. Upon connecting to a Git repository, Amplify determines the build settings for both the frontend framework and any serverless backend resources configured with the Amplify CLI, and automatically deploys updates with every code commit.

In this tutorial, we’ll begin by creating a new React application and pushing it to a GitHub repository.  Then, we will connect the repo to the Amplify Console and deploy it to a globally available content delivery network (CDN) hosted on an amplifyapp.com domain. Next, we’ll demonstrate continuous deployment capabilities by making changes to the React application and pushing a new version to the master branch which will automatically kick off a new deployment.

Everything done in this tutorial is free tier eligible.

About this Tutorial
Time 10 minutes                                           
Cost Free Tier Eligible
Use Case Websites & Web Apps
Products AWS Amplify Console
Audience Developer
Level Beginner
Last Updated 03/04/2018

1. Sign up for AWS

You need an AWS account to following this tutorial on the AWS Amplify Console. There is no additional charge for using AWS Amplify with this tutorial. The resources you create in this tutorial are Free Tier eligible. 

2. Confirm environmental setup

Open your command line interface and enter the following command:

node -v;

If this command returns less than v8.0, upgrade node to a version greater than version 8. if the command not found, install the node from nodejs.org/download.

3. Create a new React application

The easiest way to create a React application is by using the command create-react-app. Install this package using the following command:

npx create-react-app amplifyapp
cd amplifyapp
npm start

4. Initialize GitHub repository

In this step, you will create a GitHub repository and commit your code to the repository. You will need a GitHub account to complete this step – if you do not have an account, sign up here

a. Create a new GitHub repo for your app (link).

b. Initialize git and push the application to the new GitHub repo executing the following commands in your command line interface:

git init
git remote add origin git@github.com:username/reponame.git
git add .
git commit -m ‘initial commit’
git push origin master

5. Log in to the AWS Amplify Console

Open the AWS Management Console in a new browser window, so you can keep this step-by-step guide open. When the screen loads, enter your user name and password to get started. Then type Amplify in the search bar and select AWS Amplify to open the service console.

6. Deploy your app to AWS Amplify

In this step, you will connect the GitHub repository you just created to the AWS Amplify service. This will enable you to build, deploy, and host your app on AWS.

a. Select Get Started under Deploy.

b. Select GitHub as the repository service and select Next.

c. Authenticate with GitHub and return to the Amplify Console. Choose the repository you created earlier and the master branch, then select Next.

d. Accept the default build settings and select Next.

e. Review the final details and select Save and Deploy.

f. AWS Amplify Console will now build your source code and deploy your app at https://<branchname>.<appid>.amplifyapp.com

g. Once the build completes, select the thumbnail to see your web app up and running live.

tmt-react-ClickThumnail

7. Automatically deploy code changes

In this step, you will make some changes to the code and push the changes to the master branch of your app.

a. Edit the src/App.js file.

b. Once the build is complete, select the thumbnail on the AWS Amplify console to view your updated app.

tmt-react-7b-2

8. Clean up your resources

You can easily terminate the resources you created on AWS Amplify Console. In fact, it is a best practice to terminate resources you are no longer using so you avoid getting charged.

Select Action and then Delete app. In the modal that opens, type delete to confirm that you want to delete your app. Your app is now deleted.

Congratulations

You have deployed a React application in the cloud by integrating with GitHub and using the Amplify Console.

With AWS Amplify Console, you can continuously deploy your application in the cloud and host it on a globally available CDN.

Was this tutorial helpful?

Thank you
Please let us know what you liked.
Sorry to disappoint you
Is something out-of-date, confusing or inaccurate? Please help us improve this tutorial by providing feedback.