Deploy React App to AWS S3 bucket in under 5 mins

AWS is the leading Cloud service provider in the world. They offer a variety of services for deploying web applications at scale. These services offload a lot of work that was once required to take any application to production. Traditionally, companies used to have their own servers in their premises to serve their applications to their users. However, with the introduction of cloud-based services, this model has rapidly changed, and more and more companies have moved their infrastructure to the cloud.

Today, we will look into one such service from AWS called S3 buckets. S3 is shorthand for Simple storage service. It is a service that lets you store files and objects on the cloud.

From AWS website,

Amazon Simple Storage Service (Amazon S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance. Customers of all sizes and industries can use Amazon S3 to store and protect any amount of data for a range of use cases, such as data lakes, websites, mobile applications, backup and restore, archive, enterprise applications, IoT devices, and big data analytics. Amazon S3 provides management features so that you can optimize, organize, and configure access to your data to meet your specific business, organizational, and compliance requirements.

Why should we use S3 bucket for static site hosting?

S3 is quite a popular service which is widely used all over the world. It is cheap, reliable, and straightforward to set up. It also has the option to enable static hosting on the bucket items.

Hence, S3 is quite popular when it comes to deploying SPAs.

Prerequisites

Before diving into the actual process let’s make sure we have the following things ready:

An AWS accoun
Static files or the build version or your app. (In most of the react apps it is the build directory)

Steps to deploy your app

Step 1: Search for the S3 bucket in the AWS console. Click on the Create Bucket button.

Step 2: Configure your bucket. Give a name to your bucket.

💡 It is important to note that the bucket name should match the sub domain/ domain name on which you would like this app to be served on. In my case, I’ve got a domain nrj.agency but I want to serve it on the app subdomain. So, I have named my bucket app.nrj.agency .

We have to make our bucket public so that users across the globe can access the files inside it. Acknowledge the warning. Now, the rest of the settings can be left to default.

Save the changes.

Now, you should be able to see the newly created bucket in the Buckets list.

Step 3: Upload Files. We can upload files manually by drag and drop or we can use AWS CLI to sync files to our bucket. We will manually put our build folder or the static files in the bucket.

Step 4: Set up a bucket policy. This step is crucial and required because it tells AWS that this service will be used only to read the objects from it.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::app.nrj.agency/*"
        }
    ]
}

Step 5: Enable static site hosting. In the permissions tab scroll to the bottom of the page. Click on the edit button to enable the static site hosting. Put index.html in both boxes as our SPA or react app will handle the errors.

That’s it you can see a URL generated by the AWS which you can use to access your app.

Demo:

💡 Notice it has HTTP, not HTTPS protocol. This is because S3 doesn’t support it. We need to set up other services to get an SSL certificate and serve it through CDN via HTTPS protocol.

Check out my other blog which tells you how to do this with CloudFlare CDN.