Voiced by Amazon Polly |
Overview
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.
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).
Pioneers in Cloud Consulting & Migration Services
- Reduced infrastructural costs
- Accelerated application deployment
Prerequisites
Running React JS app (Getting Started)
AWS Account with Administrator access (Getting Started)
Setup AWS S3
Step 1: Open Amazon S3 Console (Console)
Step 2: Click on Create Bucket
Step 3: Enter Bucket name (Eg: deploy-react-app), uncheck all public access, check I acknowledge, and click on Create Bucket
Step 4: Select created bucket and click on the permissions tab
Step 5: Click on Edit Bucket Policy
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ "Version": "2012-10-17", "Statement": [ { "Sid": "Stmt1380877761162", "Effect": "Allow", "Principal": { "AWS": "*" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::<<Enter Your Bucket Name>>/*" } ] } |
Step 7: Click on the Properties tab
Step 8: Click on the edit button of Static Website hosting
Step 9: Enable static website hosting, enter index.html in Index document and Error document and click on Save changes.
Step 10: Find the website endpoint and copy it in 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: 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.
Step 2: Click on the Upload button
Step 3: Drag and drop all files and folder build folder to the S3 console
Step 4: Click on the Upload button on the S3 console
Step 6: Open website endpoint (Which we save in Step 10 of Setup AWS S3) in the browser
Voila! Your website is now deployed on S3.
Conclusion
Before launching a website, the first crucial step is choosing the right web hosting provider. Think of it as finding the perfect home for your site—a secure, reliable space where all your web files live, making your products and services visible to the world online. Still confused or want to scale in volume? CloudThat provides end-to-end support with all the AWS services.
Web hosting isn’t just storage; it’s the foundation of your site’s performance and security. A good host offers:
- Fast loading times (goodbye, slow pages!)
- High uptime (your site, always available)
- Strong security (keeping hackers at bay)
- Easy scalability (room to grow)
Drive Business Growth with AWS's Machine Learning Solutions
- Scalable
- Cost-effective
- User-friendly
About CloudThat
Established in 2011, CloudThat is a leading Cloud Training and Cloud Consulting services provider in India, USA, Asia, Europe, and Africa. Being a pioneer in the Cloud domain, CloudThat has special expertise in catering to mid-market and enterprise clients in all the major Cloud service providers like AWS, Microsoft, GCP, VMware, Databricks, HP, and more. Uniquely positioned to be a single source for both training and consulting for cloud technologies like Cloud Migration, Data Platforms, DevOps, IoT, and the latest technologies like AI/ML, it is a top-tier partner with AWS and Microsoft, winning more than 8 awards combined in 11 years. Recently, it was recognized as the ‘Think Big’ partner from AWS and won the Microsoft Superstars FY 2023 award in Asia & India. Leveraging their position as a leader in the market, CloudThat has trained 650k+ professionals in 500+ cloud certifications and delivered 300+ consulting projects for 100+ corporates in 28+ countries.
WRITTEN BY Mayur Patel
Anon
Jan 10, 2023
Please make it possible to actually copy/paste the code. Thanks
Anusha R
Jan 11, 2023
Hi Anon, we have updated the blog. Kindly have a check. Thank you
Click to Comment