Meanwhile in an enterprise where most of the workloads are running on Cloud platforms like AWS. AWS provides various option to run your code. You can either use AWS Amplify to build and host your code. Or you can create a EC2 server, configure NGINX inside that server and then host your code inside it. Although these AWS services lack some features like Caching and the pricing might be a bit on a higher side.
So, the industry standard practice is hosting the code using Cloudfront and S3

What is Cloudfront?

AWS CloudFront is a Content Delivery Network (CDN) that distributes your application across multiple edge locations worldwide. Here's why it's perfect for frontend applications:

• Global Performance: Your app loads quickly regardless of user location

• Cost-Effective: Pay only for what you use, with a generous free tier

• SSL/HTTPS: Free SSL certificates for secure connections

• Scalability: Handles traffic spikes effortlessly

• Low Latency: Edge caching reduces server response times dramatically

What is S3?

S3 stands for Simple Storage Service. It is a Storage service offered by AWS where you can store anything. Consider it like a Google Drive but in AWS.

Here’s what our setup looks like:

1. S3 Bucket: Stores your static React build files

2. CloudFront Distribution: Serves content from edge locations worldwide

3. Route 53 (Optional): Manages your custom domain

Step-by-Step Deployment

1. Build Your React Application

First, create your production-ready build:

npm run build

This generates an optimized build/ folder with all your static assets.

2. Create an S3 Bucket

Log into AWS Console and create an S3 bucket:

• 

• Enter a unique name under Bucket Name and keep other settings as it is.

• Click on Create Bucket

3. Upload Your Build Files

Once your S3 Bucket is created . Upload everything from your build/ folder to the S3 bucket.

4. Create CloudFront Distribution

This is where the magic happens:

• Create a Cloudfront Distribution

  

• Give a distribution name and click Next

• 

  Make sure the origin type is selected as Amazon S3 and then click on Browse S3 button to select your S3 bucket

  

• Leave other options as it is and then click on Next

  

  As of now click on “Do not enable security protections” to save WAF costs and click Next.
  Note - In production use cases, you should always enable WAF to avoid security attacks like SQL injection, DDoS etc.

• 

  Click on Create distribution to create the cloudfront distribution

7. Wait and Test

CloudFront distributions take 15-20 minutes to deploy. Once complete, you'll get a CloudFront URL like d1234abcd.cloudfront.net.

Click on Edit button

• Enter the default root object as index.html so that the user will be directly redirected to index.html page once he hits our cloudfront URL

• Click on Save Changes and wait for few minutes until the new changes get deployed

• After few minutes, hit the cloudfront URL and you can see your frontend react application

• 

Conclusion

Hosting your React application on CloudFront provides enterprise-grade performance and reliability without the complexity. The combination of S3 for storage and CloudFront for distribution creates a robust, scalable solution that can handle traffic from a handful of users to millions.

The setup process might seem involved initially, but once configured, deployments are straightforward. Your users get blazing-fast load times, you get peace of mind knowing your app scales automatically, and your wallet stays happy with AWS's competitive pricing.

Please delete all the AWS resources when not in use to save costs.