How to host a Single-Page-Application on Amazon S3 for Free

You can host a Single Page Application (SPA) with Amazon S3 for free and in this Blog-Post I will show you how.

Create a Bucket

Sign up or Login to the Amazon S3 Management Console.

1. Click on Create Bucket
2. Set a Bucket Name and select your prefered Region, click Next
3. Click Next
4. Untick the Block all public access checkbox, click Next
5. Click Create Bucket

Configure the Bucket

The Bucket needs to be configured to host a static website. Additionally to that, the Bucket needs to be configured in a way that it always returns the index.html page, which is a common concept for SPAs:

1. Click on the Bucket name
2. Go to the Properties tab and select Static website hosting
3. Tick the Use this bucket to host a website radio button
4. Set the Index document Input to index.html
5. Set the Error documnet Input to index.html aswell
6. Write down the Endpoint and click Save

Bucket’s contents are not public by default. We need to explicitly make the Bucket public for this. Make sure you only upload your dist-Files to this Bucket, otherwise you might release sensible data to the public: 1. Go to the Permissions tab and click Bucket Policy 2. Enter the following and make sure to replace test.com with the Name of your Bucket

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::test.com/*"
        }
    ]
}

1. Click Save

Upload your site

There are two ways to upload your site to your AWS S3 Bucket:

1. Go to the Overview tab and click Upload
2. Via the AWS CLI

I will show you how to use the AWS CLI to upload your static files to the AWS Bucket. This approach has the advantage that it is quicker and it is possible to deploy a new site within a CI/CD Pipeline.

1. Install the CLI if you have not done so already
2. Configure teh CLI if you have not done so already
3. Assuming you want to deploy the relative dist/ directory, issue the following command (make sure to replace test.com with your Bucket name)

aws s3 sync dist/ s3://test.com

Visit the Endpoint

Visit the Endpoint you wrote down earlier when configuring static website hosting in S3. You should see your SPA now.