How to Deploy React Apps to AWS S3 and CloudFront: The Ultimate 2026 Guide

Deploying modern JavaScript applications, such as those built with React, has evolved significantly. It is no longer necessary to maintain complex servers or virtual machines to serve static files. In 2026, the reference architecture for any professional Single Page Application (SPA) is using Amazon S3 as origin storage and Amazon CloudFront as a Content Delivery Network (CDN).

In this technical guide, we will break down every step required to bring your React project to a world-class infrastructure, optimizing costs and maximizing loading speed for your end users.

Why Choose S3 + CloudFront for React?

Before diving into the technical configuration, it is crucial to understand the benefits of this architecture compared to traditional solutions like Heroku, Vercel, or VPS servers:

Infinite Scalability: You don't have to worry about the number of users. AWS handles massive traffic spikes automatically.
Cost-Effectiveness: You only pay for storage (minimal for JS/HTML files) and transferred bandwidth. For small projects, this often falls within the AWS Free Tier.
Global Performance: CloudFront replicates your files in over 400 Edge Locations worldwide, reducing latency to a minimum.
Robust Security: By not having servers executing code, you eliminate common attack vectors.

Step 1: Preparing your React Application

To deploy to S3, we first need to generate the static production files. If you are using Vite or Create React App, the process is standard:

# For projects with Vite (Recommended in 2026)
npm run build

# Or if you use the classic CRA
npm run build

This command will generate a dist/ or build/ folder containing the index.html file, minified JavaScript bundles, and assets (CSS, images). These are the only files we will upload to the cloud.

Step 2: Configuring Amazon S3 (The Storage)

Amazon Simple Storage Service (S3) will act as our "file database". Follow these steps to configure it correctly:

1. Bucket Creation

Access the AWS console and create a new bucket. The name must be globally unique. For example: my-react-project-prod.

2. Disable Public Access Block (Temporarily)

For CloudFront to read the files, or if you want to use S3's direct static hosting, you must uncheck the "Block all public access" option.

3. Configure Bucket Policy

Add the following policy in the "Permissions" tab to allow the world to read your files:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
  ]
}

Step 3: Configuring Amazon CloudFront (The CDN)

Serving directly from S3 is functional but not professional. CloudFront allows us to use HTTPS, custom domains, and global caching.

1. Create a Distribution

In the CloudFront console, create a new distribution and select your S3 bucket as the "Origin Domain".

2. Handling Routes (The SPA Problem)

React applications use client-side routing (React Router). If a user refreshes the page at /dashboard, S3 will look for a physical file named dashboard and return a 404 error because only index.html exists.

The Solution: In CloudFront, go to the "Error Responses" tab and create a custom rule:

HTTP Error Code: 404 (Not Found)
Customize Error Response: Yes
Response Page Path: /index.html
HTTP Response Code: 200 (OK)

This will redirect all requests to React, allowing the internal router to handle navigation.

Step 4: Automation with Infrastructure as Code (IaC)

Performing these steps manually in the AWS console is error-prone and difficult to replicate. This is where tools like Terraform or the AWS CLI become indispensable.

If you are a developer who prefers to focus on code and not manually configure dozens of screens in AWS, we recommend using our tool React2AWS.

What does React2AWS do for you? It instantly generates the necessary configuration files (Terraform or Bash Scripts) to:

Create buckets with the correct security policies.
Configure the CloudFront distribution with 404 error handlers for React.
Set optimal cache headers for static files.

Simply enter your project name and get a professional blueprint ready to run.

Optimization and Best Practices

To take your deployment to the next level, consider these points:

1. Gzip and Brotli Compression

Ensure CloudFront has "Compress objects automatically" enabled. This will reduce your JS bundle size by up to 70%, drastically improving load times.

2. Cache Invalidation

Every time you upload a new version of your app to S3, CloudFront will continue serving the old version from its Edge nodes until the cache expires. You must create an "Invalidation" with the path /* to force a global update.

3. Security with OAC (Origin Access Control)

Instead of leaving the S3 bucket open to the public, the ideal setup is to close it and allow only CloudFront permission to read the files. This prevents users from bypassing the CDN and accessing the storage directly.

Conclusion

Deploying a React application on AWS S3 and CloudFront is the smartest decision for projects seeking scalability and low cost. Although the initial configuration might seem overwhelming, the benefits in terms of security and global performance are well worth the effort.

If you want to save hours of manual configuration and avoid common AWS permission errors, use our infrastructure generator to automate the entire process in seconds.

Generate AWS configuration for React now →