Effortlessly Deploy Your React Build with S3 Bucket and CloudFront: A Step-by-Step Guide

Introduction

It can be difficult to deploy a React application, especially if you’re unfamiliar with cloud infrastructure. Fortunately, AWS provides a straightforward yet effective method for hosting and distributing your React app to end users using S3 bucket and CloudFront.

In this article, we’ll go over how to deploy a React build to an S3 bucket and set up CloudFront to make the app available worldwide. We’ll talk about the following subjects:

**1. Creating a React build

1. Creating an S3 bucket and uploading the build
2. Enabling static website hosting for the S3 bucket
3. Creating a CloudFront distribution
4. Updating DNS records to point to CloudFront
5. Testing the deployment**

Prerequisites

Before we begin, you’ll need the following tools installed:

Node.js
AWS CLI

You’ll also need an AWS account. If you don’t have one, you can create a free account here.

Step 1: Create a React Build

First, let’s create a build of our React app. Open your terminal and navigate to the root directory of your project. Then, run the following command:

npm run build

This will create a build folder in your project directory, containing all the static assets required to run your application.

Step 2: Create an S3 Bucket

To host our app, we must next establish an S3 bucket. Go to the S3 service in the AWS Management Console after opening it. To create a new bucket, click the “Create bucket” button and then proceed as instructed.

For the best results, make sure to select the area that is nearest to your users. Make that the bucket policy permits open read access to the stored items as well. You can incorporate the subsequent rule into your bucket:

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

Make sure to replace your-bucket-name with the name of your bucket.

Step 3: Upload the Build to S3

Navigate to the bucket in the S3 console after it has been created. The build folder you generated in Step 1 should be selected when you click the Upload button. To begin the upload, click Upload.

Step 4: Enable Static Website Hosting

We can allow hosting for static websites in the S3 bucket once the build has been uploaded. Select Use this bucket to host a website by clicking the “Static website hosting” card in the bucket’s attributes.

For both the Index document and Error document fields, type index.html. To save the changes, click Save.

Step 5: Create a CloudFront Distribution

Create an S3 bucket to host your React app, if you haven’t already. You can use the following command to create a new bucket:

aws s3 mb s3://my-bucket

Replace my-bucket with a unique name for your bucket.

Build your React app using the npm run build command. This will create a production-ready build of your app in the build directory.

Upload the contents of the build directory to your S3 bucket using the aws s3 sync command:

aws s3 sync build/ s3://my-bucket

Set up a CloudFront distribution for your app using the aws cloudfront create-distribution command. You'll need to specify the S3 bucket as the origin, and configure the distribution to use HTTPS and your custom domain name. Here's an example command:

aws cloudfront create-distribution \
  --distribution-config file://cloudfront-config.json

The path to a JSON file holding your CloudFront distribution setup should be substituted for cloudfront-config.json. Use the previous answer’s sample configuration, but be careful to change the S3 bucket domain name, custom domain name, and SSL certificate ARN values with your own.

Wait for your CloudFront distribution to be deployed. You can check the status using the aws cloudfront get-distribution command:

aws cloudfront get-distribution --id DISTRIBUTION_ID

Replace DISTRIBUTION_ID with the ID of your CloudFront distribution, which is returned by the create-distribution command.

Once your CloudFront distribution is deployed, you should be able to access your React app using your custom domain name. The URL will be something like https://myapp.example.com. You can test it by opening the URL in your web browser.

Step 6: Update DNS Records

We must modify our DNS records to point to the newly formed CloudFront distribution. The essential stages are as follows, albeit your domain registrar may change them:

Create a new CNAME record for your domain/subdomain pointing to the CloudFront domain name (e.g., myapp.example.com CNAME d1234.cloudfront.net)
Wait for the DNS changes to propagate (this can take up to 24 hours).
Test the deployment by visiting your domain/subdomain in a web browser.

Conclusion

In this article, we went over how to deploy a React project to an S3 bucket and set up CloudFront to make it available worldwide. You should be able to host your React app quickly, securely, and dependably by using the techniques listed above.

To prevent unforeseen fees, don’t forget to periodically update your app with new builds and to keep an eye on your AWS usage.

Happy deployment, and thanks for reading!