Deploying a React App to AWS S3 with CloudFront

1️⃣ Log in to AWS Console

Log in to your AWS console using your credentials.

2️⃣ Check if npm and Node.js are installed

Run the following commands to check if npm and Node.js are installed:

npm -v
node -v

3️⃣ Create a React App

Run the following commands to set up a React project using Vite:

npm create vite@latest
cd Dharshinisrig
npm install
npm run dev

4️⃣ View Your React App

Follow the link displayed in the terminal to open the React app in the browser.

The React app should display like this:

5️⃣ Modify App.tsx

Open the App.tsx file and make necessary edits.

6️⃣ Build the React App

Run the following command to build the project:

npm run build

7️⃣ Create an S3 Bucket in AWS

Go to AWS S3 and create a new bucket.

7.1 Remove Blocked Public Access

Disable "Block all public access."

7.2 Enable Bucket Versioning and Add Tags

8️⃣ Enable Static Website Hosting

Enable Static Website Hosting from the bucket properties.

9️⃣ Configure Bucket Permissions

Edit the bucket policy to allow public access.

Copy the Bucket ARN:

Generate the Bucket Policy and save the changes:

🔟 Upload React Build Files

Upload all files from the dist folder to the S3 bucket.

1️⃣1️⃣ Access Your Website

Copy the index.html URL:

Or copy the Bucket Endpoint:

http://714022205024-dharshinisrig.s3-website-us-east-1.amazonaws.com

1️⃣2️⃣ Set Up CloudFront for Faster Access

Create a CloudFront distribution for the S3 bucket.

12.1 Disable WAF

12.2 Deploy CloudFront

After deploying, copy the CloudFront URL:

https://d2yop5uofve2kk.cloudfront.net

Visit the CloudFront URL to see your React app.

1️⃣3️⃣ Clean Up AWS Resources

13.1 Delete CloudFront Distribution

13.2 Delete S3 Objects

13.3 Delete the S3 Bucket

🎉 Conclusion

You have successfully deployed a React app on AWS S3 and served it via CloudFront! 🚀