AWS

Deploying to S3 in 7 steps

Step 1: Run yarn install to install dependencies, then yarn build to create the ./build folder.

Step 2: Navigate to AWS S3 and login (or sign up if you don't have an account). Click on Services followed by S3 in the dropdown.

Step 3: Click on Create Bucket and fill out both your Bucket Name and Region (for the USA, we recommend US Standard). Click Next until the Set Permissions section appears, and remove the tick from Block all public access (to make objects public). Click Create to create your bucket.

Step 4: To make the bucket objects publicly viewable, go into the bucket, then Permissions (on the top bar) -> Bucket Policy. Copy-paste this, replacing[BUCKET_NAME] with your bucket name).

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

Step 5: Go to Properties. Click on the Static Website Hosting accordion where you should see the URL (or endpoint) of your website (i.e., example.s3-website-us-east-1.amazonaws.com). Click Enable website hosting and fill in both the Index document and Error document input fields with index.html. Click Save.

Step 6: Click on your new S3 bucket on the left to open the bucket. Click Upload and select all the files within your ./build folder. Click Start Upload. You can easily automate the deployment with a single helper script that uses aws-cli. Running the shell script with necessary permissions on AWS will take care of all the issues mentioned in the warning below.

Step 7: Click on the Properties tab, open Static Website Hosting, and click on the Endpoint link. The app should be running on that URL.

IMPORTANT: S3 objects' Cache-Control metadata can cause problems on deployments. For example, not serving the new index.html file but returning the cached one, possibly resulting in users not getting the recently deployed web app. Since the index.html and sw.js files are the files loaded initially, and all the js bundles and chunks come later depending on these two files, we suggest adjusting the Cache-Control metadata for them after deployments. To do so, go to the file, then Properties -> Metadata. Add max-age=0,no-cache,no-store,must-revalidate to the key Cache-Control.

Cloudfront for HTTPS and GZIP

HTTPS: S3 serves only HTTP, so for HTTPS, you can use Cloudfront. Setting up Cloudfront is a bit longer than S3 Static Website Hosting. Therefore follow AWS Instructions - follow the second configuration steps (Using a website endpoint as the origin with anonymous (public) access allowed) - to set a Cloudfront distribution using your S3 Website.

Note: SPA applications handle routing inside the client, so pages like /about are unknown to the Cloudfront; it's configured to return the index.html file in the S3 Bucket). To prevent 404 Not Found responses, after setting up your Cloudfront Distribution, go to the Error Pages then Create Custom Error Response to map 404 code to 200.

GZIP Compression: Enabling gzip can reduce chunk sizes and improve loading performance dramatically. To enable gzip with Cloudfront, navigate to your distribution, then Behaviors -> Edit -> Compress Objects Automatically. Mark Yes. This alone isn't enough. You must update your S3 Bucket CORS Configuration to send Content-Length header by adding <AllowedHeader>Content-Length</AllowedHeader> in a CORSRule.