Deploying a React application to the cloud has never been easier. In this tutorial, I’ll walk you through deploying a React project to AWS S3 for static hosting, setting up a custom domain via Route 53, managing SSL certificates with AWS Certificate Manager (ACM), and optimizing delivery using CloudFront.

By the end, you’ll have a production-ready, globally distributed, secure React application.

📌 Prerequisites

Before we start, ensure you have:

AWS account (Sign up here)
React application ready (you can create one with npx create-react-app myapp)
Registered domain (can be purchased through Route 53 or another registrar)
AWS CLI installed and configured
Basic knowledge of AWS services

Step 1 — Build Your React App

Navigate to your React project folder:

 cd Desktop
 npx create-react-app demoreactapp

 cd demoreactapp
 npm start

Build the production version of your React app:
```
 npm run build
```
This will create a build folder containing optimized static files.

Step 2 — Create an S3 Bucket for Hosting

Step 3 — Enable Static Website Hosting in S3

Step 4 — Upload Your React Build Files to S3

Step 2,3 and 4 can be done using bellow shell script:

Create a IAM user attatch Administrator access and generate access key and secretkey and configure aws cli.

aws configure

vi s3.sh

#!/bin/bash
# Variables
BUCKET_NAME="mydomain.com"
REGION="us-east-1"   # Change this to your region (if not sure, leave us-east-1)
BUILD_DIR="./build"

# 1️⃣ Create S3 Bucket
if [ "$REGION" = "us-east-1" ]; then
    aws s3api create-bucket \
        --bucket $BUCKET_NAME \
        --region $REGION
else
    aws s3api create-bucket \
        --bucket $BUCKET_NAME \
        --region $REGION \
        --create-bucket-configuration LocationConstraint=$REGION
fi

# 2️⃣ Enable static website hosting
aws s3 website s3://$BUCKET_NAME/ \
    --index-document index.html \
    --error-document index.html

# 3️⃣ Disable Block Public Access
aws s3api put-public-access-block \
    --bucket $BUCKET_NAME \
    --public-access-block-configuration \
        BlockPublicAcls=false,IgnorePublicAcls=false,BlockPublicPolicy=false,RestrictPublicBuckets=false

# 4️⃣ Create & attach bucket policy for public-read
cat > bucket-policy.json <<EOF
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::$BUCKET_NAME/*"
    }
  ]
}
EOF

aws s3api put-bucket-policy \
    --bucket $BUCKET_NAME \
    --policy file://bucket-policy.json

# 5️⃣ Upload React build files
aws s3 sync $BUILD_DIR s3://$BUCKET_NAME --delete

# 6️⃣ Output Website URL
echo "Website URL: http://$BUCKET_NAME.s3-website-$REGION.amazonaws.com"

bash s3.sh

What this script does

✅ Creates S3 bucket (handles us-east-1 special case)
✅ Enables static website hosting
✅ Removes Block Public Access
✅ Attaches public-read bucket policy
✅ Uploads your React build folder
✅ Outputs your live S3 website URL

Step 5: Purchase domain from aws or godaddy

I already have one domain, so I am using it

Step 6 - Create public hostedzone in route53

Copy 4 NS records from route53 as showned above image and add to name servers list

Stpe6 - Create host record(A Record) pointing to s3 website endpoint.

Step 7 — Request an SSL Certificate with AWS Certificate Manager (ACM)

Go to AWS Certificate Manager → Request a certificate.
Choose Request a public certificate.
Enter your domain name (e.g., mydomain.com and www.mydomain.com).
Choose DNS validation.
Add the generated CNAME records to Route 53 Hosted Zone (if AWS manages your DNS).
Wait until the certificate status changes to Issued.

Step 7 — Set Up CloudFront for Better Performance and HTTPS

Go to AWS CloudFront → Create Distribution.
Under Origin Domain Name, select your S3 bucket.
Origin Access Control: Enable and attach to S3 for private access.
Viewer Protocol Policy: Redirect HTTP to HTTPS.
Under Alternate domain names (CNAMEs), enter your domain (mydomain.com, www.mydomain.com).
Select your SSL certificate from ACM.
Click Create Distribution.

Once created, CloudFront will provide a Distribution Domain Name (e.g., d1234.cloudfront.net).

Step 7 — Connect Your Domain via Route 53

Go to Route 53 Hosted Zone for your domain.
Create two A records:
- Root domain (mydomain.com) → Alias to CloudFront distribution
- www subdomain (www.mydomain.com) → Alias to CloudFront distribution
Save the records.

Step 8 — Test Your Deployment

Open your domain in a browser.
You should see your React app served securely over HTTPS.
Test performance — CloudFront should cache content for faster delivery.

Step 9 — Automating Deployments (Optional)

You can automate S3 uploads using AWS CLI:

aws s3 sync build/ s3://mydomain.com --delete

Run this command after each build to deploy updates instantly.

🎯 Conclusion

You’ve successfully deployed your React application to AWS S3, secured it with ACM, optimized delivery using CloudFront, and connected it to a custom domain via Route 53.

This setup ensures:
✅ Global performance via CloudFront CDN
✅ Free SSL via ACM
✅ Scalable, cost-effective hosting via S3

🔗 Resources:

AWS S3 Documentation
CloudFront Documentation
Route 53 Documentation

🚀 Deploying a React App to AWS S3 with Route 53, ACM, and CloudFront — Step-by-Step Guide