0Pricing
React Academy · Lesson

Hosting a React SPA on AWS S3 & CloudFront

Build a React app, upload to S3, configure CloudFront distribution and cache invalidation.

Hosting a React SPA on AWS S3 & CloudFront is a free React Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

S3 Static Hosting Overview

AWS S3 can serve static files (HTML, JS, CSS, images) as a website. Combined with CloudFront (CDN), you get global distribution, HTTPS, and low latency for React SPAs.

Building the SPA

Build your React app to a static output directory.

# Vite:
npm run build  # outputs to dist/

# Create React App:
npm run build  # outputs to build/

# Next.js static export:
next build && next export  # outputs to out/

Creating and Configuring the S3 Bucket

Create an S3 bucket, enable static website hosting, and set the index and error documents.

# Create bucket (replace with your domain name):
aws s3 mb s3://my-react-app.com

# Enable static hosting:
aws s3 website s3://my-react-app.com --index-document index.html --error-document index.html
# Error doc = index.html handles client-side routing (React Router)

Uploading Build Files

Sync the build output to S3. Set aggressive cache headers for hashed assets and no-cache for index.html.

# Upload hashed assets with long cache:
aws s3 sync dist/ s3://my-react-app.com/ \
  --exclude index.html \
  --cache-control "max-age=31536000,immutable"

# Upload index.html with no cache (always fresh):
aws s3 cp dist/index.html s3://my-react-app.com/index.html \
  --cache-control "no-cache,no-store"

Creating a CloudFront Distribution

Create a CloudFront distribution pointing to the S3 bucket. Use the S3 website endpoint (not the REST endpoint) to support SPA routing.

# In AWS console or CDK:
# Origin: my-react-app.com.s3-website-us-east-1.amazonaws.com
# Default root object: index.html
# Viewer protocol: Redirect HTTP to HTTPS
# Error pages: 403 → /index.html (200) for SPA routing

SPA Routing Fix

CloudFront returns 403 for unknown paths (S3 doesn't know about React routes). Configure a custom error response: 403 → /index.html with status 200.

Custom Domain & SSL

Request an ACM certificate for your domain in us-east-1 (required for CloudFront). Attach it to the distribution and add a CNAME DNS record pointing to the CloudFront domain.

Cache Invalidation on Deploy

After deploying new files, invalidate the CloudFront cache for index.html (since it's no-cache on S3 but may be cached by CloudFront).

aws cloudfront create-invalidation \
  --distribution-id EXXXXXXXXXXXXX \
  --paths "/*"

GitHub Actions Deployment

Automate the deploy workflow in CI: build → sync to S3 → invalidate CloudFront.

- name: Deploy to S3
  run: aws s3 sync dist/ s3://my-react-app.com/ --delete
  env:
    AWS_ACCESS_KEY_ID: ${{ secrets.AWS_KEY_ID }}
    AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET }}

- name: Invalidate CloudFront
  run: aws cloudfront create-invalidation --distribution-id ${{ secrets.CF_ID }} --paths "/*"

S3 Bucket Policy

Block public access on the bucket and use an Origin Access Control (OAC) policy so only CloudFront can read the bucket — more secure than public bucket hosting.

Cost Estimate

S3 static hosting is very cheap: ~$0.023/GB storage, ~$0.0004/1000 requests. CloudFront costs vary by region and data transfer but is free for the first 1TB/month on the free tier.

Quick Check

Why should you set the S3 error document to index.html when hosting a React SPA?

Recap

Build the SPA, sync to S3 with split caching (long cache for hashed assets, no-cache for index.html), and serve via CloudFront. Fix SPA routing by mapping 403 errors to /index.html. Automate deploy with GitHub Actions and invalidate CloudFront on each deploy.

Frequently asked questions

Is the “Hosting a React SPA on AWS S3 & CloudFront” lesson free?

Yes — the full text of “Hosting a React SPA on AWS S3 & CloudFront” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Hosting a React SPA on AWS S3 & CloudFront”?

Build a React app, upload to S3, configure CloudFront distribution and cache invalidation. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Hosting a React SPA on AWS S3 & CloudFront” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Deploying to Vercel: Zero-Config & Preview URLs
  2. Hosting a React SPA on AWS S3 & CloudFront
  3. Dockerizing a React/Next.js App
  4. GitHub Actions CI/CD for React
← Back to React Academy