Using S3 Bucket to host React Application

It becomes confusing when it comes to deploying a React application in production. Because there are several ways we can deploy a React application in production. But considering a static single-page website hosting, there is one popular way: AWS S3.

Hosting the React application in S3 not only provides a simple yet highly available deployment option but also brings other features to the table.S3 provides versioning, logging, and security features to make the experience more seamless. Integrating it with CloudFront makes it highly available, cacheable, and faster. S3 also allows CORS configuration, which can help to control access to the resources. Along with this bucket, it can be attached to a custom domain name configured with Route 53 or DNS, making a complete, full-fledged web application.

Considering these features, S3 becomes the best option for deploying React in production. It only takes a few steps to deploy a React application to S3.

---

Create a S3 bucket in AWS

Create an S3 bucket as per the required configuration and storage class. Make sure to allow public access to all objects and remove any other blocking access options.

Generate a Production Build of React application

Run the below command in the project root to generate a production build.

npm run build

this will create a build folder in the project directory with all static files.

Upload the build folder to S3 Bucket

Upload the contents of the build folder to the bucket along with the static folder.

Add a policy to a bucket for getObject

Edit the bucket policy to provide public access to get objects in the bucket. The policy will look like below.

{
  "Id": "Policy1729235341904",
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Stmt1729235340511",
      "Action": [
        "s3:GetObject"
      ],
      "Effect": "Allow",
      "Resource": "YOUR-S3-BUCKET-ARN/*",
      "Principal": "*"
    }
  ]
}

Enable Static hosting for S3 Bucket

In the properties of the bucket enable static website hosting. Specify index and error document as index.html (Other names if differ). Save the changes.

Test the running website using the link

Copy the generated link and paste it into the browser to view your website running. Add a custom domain if required.

Thats it! In just a few clicks the React site is live using S3.

---