Deploying Static React GatsbyJs to AWS S3

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps. It achieves high performance by generating static files for your React application.

This post will illustrates how to host a simple React application on AWS S3 using Gatsby framework. Node.js is required.

Setup Gatsby

First install the gatsby cli globally through npm:

npm install -g gatsby-cli

Now we will initiate a Gatsby application using Hello World sample project

gatsby new gatsby-on-s3 https://github.com/gatsbyjs/gatsby-starter-hello-world

This sample includes a simple React component that renders a simple Hello world! text at src/pages/index.js

import React from "react"

export default function Home() {
  return <div>Hello world!</div>
}

Quick application test

To perform a quick test on the application, start the development server using npm run start command:

cd gatsby-on-s3
npm run start

The development server, by default, will listen on port 8000. Now we can navigate to the application page at http://localhost:8000

Awesome. Next, we will setup a AWS S3 bucket to serve the gatsby application as a static website.

Setup AWS S3 static website

This section will demonstrate how to setup a S3 bucket to serve as a static website. You can skip to the next section if you already know how to do it. I assume you already have an AWS account with management console access.

Create a S3 Bucket

• go to Services > S3
• click on Create bucket
• enter a unique name for the bucket (e.g. gatsby-on-s3)
• uncheck Block all public access
• check the acknowledgement
• click Create bucket

Enable static website hosting

• click on newly created bucket
• go to Properties > Static website hosting
• select Use this bucket to host a website
• enter index.html for Index document
• click Save

Note the Endpoint at the top. That will be the URL to navigate the website. Next we will enable public access to the bucket using bucket policy.

• go to Permissions > Bucket Policy
• enter the following policy and click Save

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

note: replace with your bucket name at Resource.

Now you should be greeted by the following message that the bucket has public access.

Publish Gatsby Application to S3 bucket

Note: This assumes your development environment already has aws cli installed and also has a profile configured with access key ID and secret access key that has read/write access to the S3 bucket.

Run the following commands to publish to S3 bucket:

npm run build
aws s3 sync public s3://<bucket-name>/

note: The folder public contains all the static files needed for the website to function. Replace with your bucket name in the aws command.

The files should be uploaded successfully. Now navigate to the Endpoint URL noted before:

Awesome. Now we have a working React application running on S3 static website with blazing fast speed.

To use a custom domain name, simply create a CNAME record at your DNS server to point to the endpoint URL.