Step By Step Guide To Deploy ReactJS App On AWS S3

Amazon Web Services offers many innovative ways to host static websites. One of these is AWS S3. Today we will show you how to deploy ReactJS apps on AWS S3. Before we get into the deployment process, let’s first understand the terminology for beginners who are just beginning to learn Amazon Web Services.
TABLE OF CONTENTWhat is AWS S3?What is React JS?PrerequisitesSetup AWS S3Create React APPUpload objects on S3ConclusionAbout CloudThat
What is AWS S3 and how does it work?
Amazon Simple Storage Service (AWS S3) provides cloud storage that is highly available, scalable and secure. We can store millions of files at very low rates.
What is React JS?
React JS is an open source JavaScript library that allows you to create interactive UI for your website’s user interface.
Running React JS app (Getting Started)
AWS Account with Administrator Access (Getting Started).
Install AWS S3
Step 1: Open Amazon Cognito Console (Console)
Step 2: Click Create Bucket

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

Step 4: Select the bucket you want to create and click on “Permissions” tab.

Step 5: Click Edit Bucket Policy

Step 6: Click Edit Bucket Policy, paste the following policy into policy editor, and then replace your bucket name with the new policy. Click on Save Changes
“Version”: “2012-10-17”, “Statement”: [ “Sid”: “Stmt1380877761162”, “Effect”: “Allow”, “Principal”: “AWS”: “*” , “Action”: “s3:GetObject”, “Resource”: “arn:aws:s3:::<>/*” ]123456789101112131415161718192021222324252627 “Version”: “2012-10-17”, “Statement”: [ “Sid”: “Stmt1380877761162”, “Effect”: “Allow”, “Principal”: “AWS”: “*” , “Action”: “s3:GetObject”, “Resource”: “arn:aws:s3:::<>/*” ]Step 7: Click on the Properties tab

Step 8: Click the Edit button for Static Website Hosting

Step 9: To enable static website hosting, enter index.html into the Index document and Error documents and click on Save changes.

Step 10: Locate the website endpoint, and copy it into a notepad

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.

Step 3: Create a build using “npm-run build” and locate the build folder in your root directory
Upload objects to S3
Step 1: Click the Objects tab in the S3 bucket.

Step 2: Click the Upload button

Step 3: Drag and Drop all files and folders to the S3 console

Step 5: Click the Upload button on your S3 console

Step 6: Open the website endpoint (which we saved in Step 10 of Setup AWS S3)

Voila! Voila! Your website is now live on S3.
Before you launch a website, it is important to choose the right web hosting provider. It allows you to store all the files necessary to view your website on the internet.
Comment below if you’re interested in learning more about hosting or deployment processes. I’ll be glad to answer any questions.
CloudThat offers end-to-end support for all AWS services. CloudThat is a pioneer in cloud computing consulting. We are AWS (Amazon Web Services), Advanced Consulting Partner, as well as a Training Partner. We are dedicated to building a strong cloud computing ecosystem by sharing knowledge about technological intricacies within this space. Learn more about CloudThat’s Expert Advisory and Consulting.

Author: Kody