Deploy React-App with AWS Amplify

We all know that cloud services are the future and aws is one of the leading cloud service provider out there. Today we are going to deploy our react-app(or any SPA application) on AWS amplify.

Let's Get started.

we will follow a step-wise procedure for the deployment of our react-app.

1.Go to terminal and create-react-app:-

2.After creating the react-app get inside the project folder and run the below command.

npm run build

The above command creates a new folder with "build" name inside your project folder as shown in below pic.

3.Now open .gitignore file in you project folder and remove /build

Before:-

After:-

4.Now upload code to your GitHub repository:-

Commit changes

Now push the changes

Check out the repository and make sure everythings is uploaded(build folder is important):-

Now let's get into AWS amplify

1.open AWS amplify console

Now click on get started and you will be redirected to:-

Now click on deliver and get started

2.Now you will be redirected to the following page:-

Now click on Github and continue by giving access to aws amplify with your github account.

You will be redirected to the following page:-

Select your git repository which you have uploaded before and click on next.

Now you will have to click on checkbox and type build in the project root folder and click next.

Now you will be redirected to following page:-

Click on checkbox and click on next button

Now you will be redirected to following page:-

Click on save & deploy.

That's it!!

Now you will be redirected to the following page:-
Wait for few minutes utill the process turns into green tick icons. As shown below:-

Now click on the link your website should be visible.