# Deploying Frontend Apps on AWS CloudFront: A Step-by-Step Guide for Developers

Many developers out there are using popular frontend hosting platforms like Vercel or Netlify to host their frontend applications. These platforms are quite developer friendly so it becomes easy for a new developer to host their code on these platforms to showcase their projects or portfolio.

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:

```bash
npm run build
```

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1760205630918/31309b10-1d97-49c7-b168-b061faeee5e2.png align="center")

### 2\. Create an S3 Bucket

Log into AWS Console and create an S3 bucket:

* ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1760205677261/4239547c-8f13-41c0-9646-ef5902b987ea.png align="center")
    
* 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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1760205997920/c32942dd-86fc-4c88-9290-626a5f8e6862.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1760206012417/848de917-e02f-4ae5-828c-8410189b2a44.png align="center")

### 4\. Create CloudFront Distribution

This is where the magic happens:

* Create a Cloudfront Distribution
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1760207048777/27d06380-8d7e-4560-ae63-16a949ede97d.png align="center")
    
      
    
* Give a distribution name and click Next
    
* ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1760207100522/f4d1660c-aa74-4e49-a8a2-57db3bf1a5a4.png align="center")
    
    Make sure the origin type is selected as Amazon S3 and then click on Browse S3 button to select your S3 bucket
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1760207204818/414cc6db-6bf4-43df-87ba-dc3f2aa9462b.png align="center")
    
* Leave other options as it is and then click on Next
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1760207263441/729d6374-82ed-4c33-95f0-a62f1181706e.png align="center")
    
    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.**
    
* ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1760207406491/60a44b43-a266-4c01-ba7c-f20f8bd09bd8.png align="center")
    
    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`](http://d1234abcd.cloudfront.net).

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1760208164126/73b2fffe-03c7-4532-ba6a-84632b6682e4.png align="center")

Click on Edit button

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1760208312844/865d0fcc-b4e9-4384-abba-463c3d491068.png align="center")

* 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
    
* ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1760208399139/4b26ba10-ce06-4f2e-8187-e90f8f9197cb.png align="center")
    

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