AWS

3 Mins Read

Step By Step Guide To Deploy ReactJS App On AWS S3

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.

Pioneers in Cloud Consulting & Migration Services

  • Reduced infrastructural costs
  • Accelerated application deployment
Get Started

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

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
Connect Today

About CloudThat

CloudThat is a leading provider of Cloud Training and Consulting services with a global presence in India, the USA, Asia, Europe, and Africa. Specializing in AWS, Microsoft Azure, GCP, VMware, Databricks, and more, the company serves mid-market and enterprise clients, offering comprehensive expertise in Cloud Migration, Data Platforms, DevOps, IoT, AI/ML, and more.

CloudThat is the first Indian Company to win the prestigious Microsoft Partner 2024 Award and is recognized as a top-tier partner with AWS and Microsoft, including the prestigious ‘Think Big’ partner award from AWS and the Microsoft Superstars FY 2023 award in Asia & India. Having trained 850k+ professionals in 600+ cloud certifications and completed 500+ consulting projects globally, CloudThat is an official AWS Advanced Consulting Partner, Microsoft Gold Partner, AWS Training PartnerAWS Migration PartnerAWS Data and Analytics PartnerAWS DevOps Competency PartnerAWS GenAI Competency PartnerAmazon QuickSight Service Delivery PartnerAmazon EKS Service Delivery Partner AWS Microsoft Workload PartnersAmazon EC2 Service Delivery PartnerAmazon ECS Service Delivery PartnerAWS Glue Service Delivery PartnerAmazon Redshift Service Delivery PartnerAWS Control Tower Service Delivery PartnerAWS WAF Service Delivery PartnerAmazon CloudFront Service Delivery PartnerAmazon OpenSearch Service Delivery PartnerAWS DMS Service Delivery PartnerAWS Systems Manager Service Delivery PartnerAmazon RDS Service Delivery PartnerAWS CloudFormation Service Delivery PartnerAWS ConfigAmazon EMR and many more.

WRITTEN BY Mayur Patel

Share

Comments

  1. Anon

    Jan 10, 2023

    Reply

    Please make it possible to actually copy/paste the code. Thanks

    • Anusha R

      Jan 11, 2023

      Reply

      Hi Anon, we have updated the blog. Kindly have a check. Thank you

    Click to Comment

Get The Most Out Of Us

Our support doesn't end here. We have monthly newsletters, study guides, practice questions, and more to assist you in upgrading your cloud career. Subscribe to get them all!