Deploy React-App with AWS Amplify
Tags: react, aws, github, vue
Published: 2021-08-11 19:27:23

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.
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/484appmxpiiu4nzpa769.jpeg)

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:-
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x7dmma9tq34fpx8bbd8q.png)

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4hg94uknub7fcdqm6vj.png)

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

Before:-
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m7vpnev9q1eo67eec09d.png)

After:-
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wfv3r70yrclmbo7acb30.png)

4.Now upload code to your GitHub repository:-
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/deiccmiucphspfqwkk4u.png)

Commit changes

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7hk1ha76ymiivqsp1ook.png)

Now push the changes
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gr0645jk7nn75dce086q.png)

Check out the repository and make sure everythings is uploaded(build folder is important):-
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nnhy4kcphl66q69h0t3m.png)

Now let's get into AWS amplify

1.open AWS amplify console
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otnh3tbjc8vt31gtxi1h.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzruzjgke3hmzpkmsccv.png)

Now click on deliver and get started

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ozgf5i5v9luhvi0t9t22.png)

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

You will be redirected to the following page:-

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o9z0v8qgj7m2c6ywnh6x.png)

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6gbneq1823k9ucbqom7.png)

Now you will be redirected to following page:-

Click on checkbox and click on next button

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dnkgr1tww32ob8j5tkuy.png)

Now you will be redirected to following page:-
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yg1ckh8yx4fa07fcizvx.png)

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:- 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9sy6acpmf0co5svvng0i.png)

Now click on the link your website should be visible.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/msq16s7e9oqmvicgglmo.png)