Let’s keep things cheap & simple with AWS S3

Angad Singh

May 5, 2020·4 min read

Firstly to deploy a React project, we must have a React project. The quickest way to create one would be:

npx create-react-app awesome-project

To create a build version for our application we can simply run npm run build inside our project. This will create a build folder in our project with an index.html file that we can use to host our project. Now let’s get AWS’ S3 sorted. If you don’t have an AWS account, you would have to create one here. Once you have an account ready, search for S3 in the AWS console services and click on it.

Creating a new bucket

Now on this page, we can create on the orange action button with the text “Create Button” to start creating a new bucket. We must pick a unique name for our bucket and also ensure that we uncheck all privacy settings, so the bucket is available publicly. Here’s how that looks:

Once done, the website will send you to an overview of all your buckets. Click on the one we just created it. Here we can simply drag and drop all the contents of our react project’s build folder. AWS will ask for a confirmation after dropping the contents into the bucket.

Configuring the bucket

Now let’s head over to the “Properties” section of our bucket:

Here we click on “Static website hosting” and “Use this bucket to host a website”. Since we dropped the output of our react’s build script in here, the index.html should now be in the bucket so we can use that for both the index and error documents. In a real-life project you might have a different page for a 404 case etc.

Now let’s head over to the “Permissions” section of our bucket. If you had successfully followed along and disabled public access block when creating the bucket, your screen should look like this:

If not, you can just switch all these settings off now. Here, once we click on Bucket Policy, we will reach a page where we can input a new bucket policy in JSON format. Let’s enter the following JSON:

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

Obviously you would have to replace the your-bucket-name section with your bucket’s name for this to work. Once that’s done your screen should look like this:

Testing

Great! We’re all done. That was so quick, bye now.

If you’ve stuck around you want to actually see your website. For this we would have to know the region where our S3 bucket is. If you are web-savvy you might have noticed that it is present in the url. If not, you can go to the AWS console home by clicking on the logo in the top left or by clicking here. To take you to this screen:

Here, you can check what region you are in as well as change it if you wish. I am in Europe(Frankfurt), but the value that we need is its region code, which for my case is eu-central-1.

once we have the region we can figure out the URL for our website it follows this format:

http://your_bucket_name.s3-website.your_region.amazonaws.com

For me that looks like:

http://unique-bucket-name-xysz1.s3-website.eu-central-1.amazonaws.com/

When you go to this URL you should see your website working. Any time you need to update it, you can simply run npm run build in your React project again after making the necessary changes and replace the S3 bucket’s contents with the new output in the build/ folder 😄.

That was easy! If you want to learn more about AWS, perhaps about AWS’ Serverless Architecture and using it with Node.js, check it out here!