Step By Step Guide To Deploy ReactJS App On AWS S3

December 28, 2021 | Comments(3) |

Amazon Web Services has many innovative ways of hosting static websites and one of those is AWS S3. Today, we will learn how to deploy ReactJS app on AWS S3. Before jumping into the deployment process, let us understand the basic terminologies for our beginners who are in the initial levels of learning Amazon Web Services.

TABLE OF CONTENT
What is AWS S3?
What is React JS?
Prerequisites
Setup AWS S3
Create React APP
Upload objects on S3
Conclusion
About CloudThat

 

What is AWS S3?

Amazon Simple Storage Service (AWS S3) is highly available, scalable, secure, durable cloud storage where we can store millions of data with very minimal rates.

What is React JS?

React JS is an open-source JavaScript library for developing interactive UI for website user interface for SPA (Single Page Application).

Prerequisites

Running React JS app (Getting Started)

AWS Account with Administrator access (Getting Started)

Setup AWS S3

Step 1: Open Amazon Cognito Console (Console)

Step 2: Click on Create Bucket

ReactJS

Step 3: Enter Bucket name (Eg: deploy-react-app), uncheck all public access, check I acknowledge, and click on Create Bucket

ReactJS

Step 4: Select created bucket and click on the permissions tab

ReactJS

Step 5: Click on Edit Bucket Policy

ReactJS

Step 6: Click on Edit Bucket Policy and paste the following policy in policy editor and replace your bucket name and click on save changes.

Step 7: Click on the Properties tab

ReactJS

Step 8: Click on the edit button of Static Website hosting

ReactJS

Step 9: Enable static website hosting, enter index.html in Index document and Error document and click on Save changes.

ReactJS

Step 10: Find the website endpoint and copy it in notepad

ReactJS

Create React APP

Step 1: Initialize react app using “create-react-app” (Getting Started)

Step 2: Run the react app using  “npm start” and open http://localhost:3000/ on the browser.

ReactJS

Step 3: Generate build using “npm run build” and find build folder in the root directory 

Upload objects on S3

Step 1: Click on the Objects tab of the S3 bucket.

ReactJS

Step 2: Click on the Upload button

ReactJS

Step 3: Drag and drop all files and folder build folder to the S3 console

ReactJS

Step 5: Click on the Upload button on the S3 console

ReactJS

Step 6: Open website endpoint (Which we save in Step 10 of Setup AWS S3) in the browser

ReactJS

Voila! Your website is now deployed on S3.

Conclusion

Before launching a website, the first thing to consider is choosing the right web hosting provider. It provides the webspace to store the necessary website files, needed for the site to be viewed on the internet.

If you are keen to know more about hosting and deployment processes, comment below and I will quickly answer your queries.

About CloudThat

CloudThat provides end-to-end support with all the AWS services. As a pioneer in the Cloud Computing consulting realm, we are  AWS (Amazon Web Services) Advanced Consulting Partner, and Training partner. We are on a mission to build a robust cloud computing ecosystem by disseminating knowledge on technological intricacies within the cloud space. Read more about CloudThat’s Consulting and Expert Advisory.

 


3 Responses to “Step By Step Guide To Deploy ReactJS App On AWS S3”

Leave a Reply