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.
Prerequisites
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:::<
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.
Conclusion
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
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.
