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|
|Cost||Free Tier Eligible|
|Use Case||Websites & Web Apps|
|Products||AWS Amplify Console|
Open your command line interface and enter the following command:
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.
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
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.
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 firstname.lastname@example.org:username/reponame.git git add . git commit -m ‘initial commit’ git push origin master
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.
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.
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.
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.
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.