DEV Community

Cover image for Deploy React-App with AWS Amplify
Ismail
Ismail

Posted on

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.
Alt Text

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

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

npm run build
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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

Before:-
Alt Text

After:-
Alt Text

4.Now upload code to your GitHub repository:-
Alt Text

Commit changes

Alt Text

Now push the changes
Alt Text

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

Now let's get into AWS amplify

1.open AWS amplify console
Alt Text

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

Alt Text

Now click on deliver and get started

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

Alt Text

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

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

Now you will be redirected to following page:-

Click on checkbox and click on next button

Alt Text

Now you will be redirected to following page:-
Alt Text

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

Now click on the link your website should be visible.

Alt Text

Top comments (0)