How to Deploy React App to AWS: Step-by-Step Guide

To deploy a React app to AWS, you can use AWS Amplify for an easy setup or host the app on Amazon S3 with CloudFront for CDN delivery. Build your React app with npm run build, then upload the build files to S3 or connect your repo to Amplify for automatic deployment.

Syntax

Deploying a React app to AWS typically involves these steps:

• Build the app: Run npm run build to create optimized static files.
• Upload to AWS: Use AWS Amplify or upload build files to an S3 bucket.
• Configure hosting: For S3, enable static website hosting and optionally use CloudFront for CDN.
• Access the app: Use the provided URL from Amplify or S3/CloudFront.

bash

npm run build
aws s3 cp build/ s3://your-bucket-name/ --recursive
aws cloudfront create-invalidation --distribution-id YOUR_DISTRIBUTION_ID --paths "/*"

Example

This example shows how to deploy a React app using AWS Amplify CLI:

• Install Amplify CLI: npm install -g @aws-amplify/cli
• Initialize Amplify in your project: amplify init
• Add hosting: amplify add hosting (choose Amazon CloudFront and S3)
• Publish your app: amplify publish

Amplify will build and deploy your app, then provide a URL to access it.

bash

npm install -g @aws-amplify/cli
amplify init
amplify add hosting
amplify publish

Output

✔ Successfully published your app: https://yourappid.amplifyapp.com

Common Pitfalls

Common mistakes when deploying React apps to AWS include:

• Not running npm run build before deployment, causing missing files.
• Incorrect S3 bucket permissions blocking public access.
• Forgetting to configure S3 bucket for static website hosting.
• Not invalidating CloudFront cache after updates, so old content shows.
• Using Amplify without configuring environment properly, leading to deployment errors.

bash

Wrong (no build):
npm start
aws s3 cp ./ s3://your-bucket/ --recursive

Right (build first):
npm run build
aws s3 cp build/ s3://your-bucket/ --recursive

Quick Reference

Summary tips for deploying React apps to AWS:

• Always build your app with npm run build before deployment.
• Use AWS Amplify for easy CI/CD and hosting.
• For manual hosting, upload build files to an S3 bucket with public read access.
• Enable static website hosting on S3 and use CloudFront for faster global delivery.
• Invalidate CloudFront cache after each update to see changes immediately.

Key Takeaways

Build your React app with npm run build before deploying to AWS.

Use AWS Amplify CLI for simple and automated React app deployment.

For manual hosting, upload build files to an S3 bucket with static website hosting enabled.

Use CloudFront CDN with S3 to speed up content delivery and invalidate cache after updates.

Check S3 bucket permissions to ensure your app is publicly accessible.