How to Deploy a React Application Using AWS S3 and CloudFront

Deploying a React application using AWS S3 and CloudFront is a cost-effective and scalable way to host and distribute your application. This guide will walk you through the step-by-step process of deploying your React app with images for better understanding.

---

Prerequisites

1. AWS Account: Ensure you have an active AWS account.
2. React Application: A ready-to-deploy React app (use create-react-app if you need one).
3. AWS CLI: Installed and configured with your credentials.
4. Node.js and npm: Installed locally for building your React app.

---

Step 1: Build Your React Application

1. Open your terminal and navigate to your React app directory.
2. Run the following command to build your app:

   npm run build

This will create a build folder in your project directory containing the production-ready files.

---

Step 2: Create an S3 Bucket

1. Log in to your AWS Management Console and navigate to the S3 service.
2. Click Create Bucket and configure the following:
   • Bucket Name: Use a unique name (e.g., my-react-app).
   • Region: Select a region close to your users.
3. Uncheck Block All Public Access:
   • Allow public access to host the static website.
   • Confirm the settings by acknowledging the warning.
4. Click Create Bucket.

---

Step 3: Upload React Build Files to S3

1. Open your bucket and click Upload.
2. Drag and drop the contents of the build folder (not the folder itself) into the upload area.
3. Click Upload to add the files to your bucket.

Alternatively, use the AWS CLI:

aws s3 sync ./build s3://my-react-app --acl public-read

---

Step 4: Configure S3 for Static Website Hosting

1. In your S3 bucket, navigate to the Properties tab.
2. Scroll down to Static Website Hosting and enable it.
3. Set the following:
   • Index Document: index.html
   • Error Document: index.html
4. Save the changes.

You can now access your app using the S3 endpoint URL, but we will enhance it using CloudFront for faster delivery and custom domain support.

---

Step 5: Set Up CloudFront

1. Navigate to the CloudFront service in the AWS Console.
2. Click Create Distribution and select Web.

3. Configure the following:

   • Origin Domain Name: Select your S3 bucket from the dropdown.
   • Viewer Protocol Policy: Redirect HTTP to HTTPS for secure connections.
   • Default Root Object: index.html.

4. Click Create Distribution. It may take a few minutes for the distribution to deploy.

---

Step 6: Update S3 Bucket Policy

To allow CloudFront to fetch files from S3, attach a bucket policy to your S3 bucket.

1. Go to the Permissions tab of your S3 bucket.
2. Click Bucket Policy and paste the following policy (replace your-bucket-name with your bucket name):

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

1. Save the changes.

---

Step 7: Access Your Application

1. Once the CloudFront distribution is deployed, copy the CloudFront Domain Name (e.g., https://d1234abcdef.cloudfront.net).
2. Open the URL in your browser to access your React app.

---

Step 8: (Optional) Add a Custom Domain

1. In Route 53, create a hosted zone for your custom domain.
2. Add a CNAME record pointing your domain to the CloudFront domain name.
3. Use AWS Certificate Manager (ACM) to issue an SSL/TLS certificate for HTTPS support.

---

Step 9: (Optional) Automate Deployments

For frequent updates, automate the deployment using a CI/CD tool like GitHub Actions or AWS CodePipeline to sync the build folder to the S3 bucket automatically after each code push.

---

Key Benefits of Using S3 and CloudFront

1. Global Distribution: CloudFront's edge locations ensure fast delivery worldwide.
2. Scalability: S3 automatically handles large-scale traffic.
3. Cost-Effective: Pay only for what you use.
4. Secure: Leverage HTTPS and AWS security features.

---

Conclusion

AWS S3 and CloudFront make an excellent combination for hosting React applications with high performance and low latency. By following this guide, you can set up a robust and scalable hosting environment for your React application.