Host React App on AWS Amplify Studio

Description of the image

In this article, we will see how to host react app on AWS Amplify. it is a development platform that allows developers to easily create, deploy, and scale web apps. With the power of AWS services, we can quickly deploy React apps and provide a seamless experience to our users.

Setup the GitHub Repository

We have to create an account on GitHub or if we have then simply create a repo for the project and clone it in our system. To make the process fast you can download GitHub Desktop and clone your repo.

host react app on aws amplify

Note: When you take a pull, it will create a new folder name as your Repo you can simply copy and paste your code or set it in your existing folder.
Now we have pasted the code in a folder and we have to push it.

host react app on aws amplify

Now we pushed the code let's open our console.

Set up the Deployment - Host React App

Choose your app in the console and click on Hosting Environment and choose Git Hub and click on Connect Branch button.

host react app on aws amplify

Now we have to authorize the permission of Git Hub. Your repository and its branch will reflect after permission is granted.

host react app on aws amplify

Here we pushed our code in the Main branch so we will choose main and click on the Next button.

After this new interface will code in which you have to enable Enable full-stack continuous deployments (CI/CD), and app environment and create a new role in AWS.

host react app on aws amplify


host react app on aws amplify


Click on Next.

host react app on aws amplify

Now click on Save and Deploy this is the Review section check it correctly.

After this Build Section will open and show the status of Build Deployment it may take some time.

host react app on aws amplify


There are 3 Steps Provision, Build and Deploy. It will mark as green once any step is completed.

host react app on aws amplify

or to see full status you can simply click on it and watch it.

Now the build is a success you can simply go to the URL and see your app.

host react app on aws amplify

It's Working Now,

host react app on aws amplify

Now it is deployed,
We have connected our GitHub account to the main branch, and modifications will automatically initiate a build and deployment in the main branch.

Conclusion - host react app on aws amplify

Hosting your React app on Amplify is a kind of process that allows you to utilize the power of AWS services for deployment. By following the steps outlined in this article, you can now host your React app successfully on hosted AWS Amplify.

Read More

Follow us on

Table of Contents

    Leave a reply

    Subscribe to Us

    Always Get Notified