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

• Check the version of node and npm:
  

• Create a Vite Project:
  

• Install dependencies:
  

• Execute npm run dev :
  

• Change the UI for your needs

• Build the React App:
  (Generate the static files for deployment)
  

npm run build

The output will be in the dist/ folder.

---

Step 2: Set Up an S3 Bucket

Create an S3 Bucket:

• Go to the AWS Management Console > S3.
• Click Create bucket.
• Provide a unique bucket name (e.g., my-static-react-site).

• Disable Block all public access.

• Bucket versioning

• Being a professional add Tags

• Create the bucket.

Upload React Build Files:

• Navigate to your S3 bucket.

• Click Upload > Add files.

• Upload all files from the dist/ folder.

Set Public Read Access:

• Go to Permissions.

• Edit Bucket Policy:
  
  

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

• Note the Bucket website endpoint.

---

Step 3: Configure CloudFront for CDN

Create a CloudFront Distribution:

• Go to CloudFront in the AWS Console.

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