How to Deploy a React Application on AWS using AWS Amplify?

Use AWS Amplify to Deploy Apps Fast!

Nishanthan

Published in

Enlear Academy

5 min readJan 22, 2024

In this article, I will guide you in deploying your React application in the AWS Amplify.

What is Amplify?

According to AWS documentation:

Amplify is everything you need to build full-stack web and mobile apps on AWS. Build and host your frontend, add features like auth and storage, connect to real-time data sources, deploy, and scale to millions of users.

Why Amplify?

Simplified Development Workflow: With Amplify, developers can concentrate more on creating features and less on managing infrastructure by streamlining the development process.
Frontend Hosting: Developers may easily launch frontend applications with Amplify. Through the AWS Content Delivery Network (CDN), it offers a scalable hosting solution with global content delivery capability for continuous deployment.
Authentication and Authorization: Amplify makes integrating user authorization and authentication into your apps simple.
Works with popular languages: supports a large number of well-known frontend frameworks, such as JavaScript/TypeScript, React, Angular, and Vue.js.
CI/CD support: Create automated deployment and continuous integration processes with well-known version control systems like Git.

Deploying the Application

Now let's see how to deploy a react application using Amplify service.

Pre-requests

Basic React knowledge
GitHub Account
AWS Account

Step 01: Create your React application

Use the command “npx create-react-app amplify-demo” to start a new React application if you haven’t already.

Navigate inside your application folder(amplify-app) using “cd amplify-demo” and run your application using the “npm start” command.

In my instance, the output looks like this since I made a few minor adjustments to my App.js file.

This is the app that we intend to deploy in AWS Amplify.

Step 02: GitHub Repository Configuration

Before diving into the deployment process, it’s essential to have your React application hosted on a version control system. For this demonstration, I will be using GitHub, a widely adopted platform for collaborative software development. However, it’s worth noting that AWS Amplify seamlessly integrates with other version control systems, including GitLab.

in your project folder terminal execute the given commands to create a branch called main and push the code to the remote repository.

git init: initialize a new repo
git add *: stage all(*) the files
git commit -m ‘your-commit-message’: commits the staged changes
git branch -M main: rename the default branch from master to main (optional)
git remote add origin https://github.com/<git-hub-user-name>/<repo-name>.git: add a remote name ‘origin’
git push -u origin main: push the changes to remote repo’s main branch.

All of the project files will be added to your remote repository once all of the instructions have been successfully run.

Step 03: Deploy to Amplify

Scroll down and click on the Get Started button.

Since we have our application in GitHub; select the GitHub and click on the continue button.

Authorize your GitHub account(if not done before)

Once your account is authorized successfully, you can be able to see a success message at the top.

then; select your repo from the selection dropdown and the branch.

AWS Amplify automatically identified this as a react project and added the build command.

By default the the prebuild command is mentioned with ‘npm ci’ which should be ‘npm i’. You can correct that by clicking the edit button.

then click the save & deploy button in the preview section.

During the build, you will be getting a nice UI like this. which will indicate to the user that the build is in progress.

Once your application is deployed successfully you can be able to access your application by navigating to the given link.

Congratulations🎉. Your application deployed on AWS amplify successfully.

Step 04: CI/CD

Are you exiting to see what will happen if the main branch is modified?

let's create a new branch called ‘user-1’ from the main and make some changes to the application.

Use the command ‘git fetch origin user-1’ command to fetch the branch to the local repository and checkout to the user-1 branch using the command ‘git checkout user-1’.

Make some difference to the application and push the changes to the remote repository. in my case, I have appended the ‘Modified’ with the pith the ‘Demo Amplify Application’.

Now go to your GitHub repository open a PR and merge the PR.

Once the PR is merged with the main branch immediately you can see the amplify app will automatically trigger the build and deployment process.

Now reload the deployed app. You can be able to see the modification that you have done.

CI/CD systems are characterized by an automated build and deployment process that offers a smooth way of continuously delivering updates to the application. It guarantees that the most recent changes are automatically reflected in the deployed application and helps to optimize development workflows.

Make sure to give it a clap 👏 if you found this information useful. If you have any suggestions for how to make it better, I’d love to hear them.