Deploying a React App with Vite on AWS S3 and CloudFront: A Step-by-Step Guide

Introduction

In this blog, we’ll walk you through deploying a React app, built with Vite, to AWS S3 with CloudFront for fast and secure delivery. By the end, you’ll have your static React site live and ready to scale globally.

Step 1: Create a React Application

• Download and install Node.js (LTS version recommended) from Node.js




• Create a Vite Project:
  
  




• Execute npm run dev :
  
  

  
  
  
  
  
  • Disable Block all public access.
  
  
  
  
  
  
  
  
  
  • Being a professional add Tags
  
  
  
  
  
  
  

  Upload React Build Files:

  
  
  
  
  
  • Navigate to your S3 bucket.
  
  
  
  
  
  
  
  
  
  • Upload all files from the dist/ folder.
  
  
  
  
  

  
  
  

{

  "Version": "2012-10-17",

  "Statement": [

    {

      "Effect": "Allow",

      "Principal": "*",

      "Action": "s3:GetObject",

      "Resource": "arn:aws:s3:::my-static-react-site/*"

    }

  ]

}

Enable Static Website Hosting:

• In the Properties tab, enable Static website hosting.

• Set the Index document to index.html.

• Click Create Distribution.


• In the Origin Domain Name, select your S3 bucket (or paste the static website URL).

• Select "Do not enable security protections"
  
  


• Click Create Distribution

Deploy the CloudFront Distribution:

• Note the CloudFront domain name after deployment.

Step 5: Verify Deployment

• Open your CloudFront distribution URL in a browser.


• Ensure the React site loads correctly.

Conclusion

With these steps, you’ve successfully deployed your Vite-based React app on AWS S3 with CloudFront. This setup ensures your app is highly available, fast, and scalable.