Setup AWS S3 for Website Hosting

This is the part 3 of the series. It's optional. In step 2 of the guide you have all you need to host your prerender website anywhere you prefer.

In the previous steps we have set up Angular Universal and by using npm run prerender we got the files that are ready to be hosted.

And we have set up a micro backend that knows how to transform markdown files into HTML, and in combination with Angular's prerender create static HTML pages.

Let's setup an AWS S3 bucket to host it.

The full official guide from AWS on WebsiteHosting.

Create the S3 bucket

I'm assuming here you already have an AWS account. If you don't, you can create one here: https://aws.amazon.com.

Once you are logged in your AWS dashboard:

  1. Go to the S3 service
  2. Click on the 'Create bucket' button
  3. Give the bucket a name, for this guide we will call it 'angular-prerender-markdown'
  4. Under 'Block Public Access settings for this bucket' un-check all of the boxes - we want this bucket to be accessible to the public (otherwise nobody would be able to open the website)
  5. Leave other options on default
  6. Click the 'Create bucket' button to confirm

Upload a demo index.html file

Open 'angular-prerender-markdown' bucket and upload a index.html file from your machine. Go with something simple so you're sure it works.

Configure the bucket for static website hosting

  1. Click on your bucket in the buckets list
  2. Click on the 'Properties' tab
  3. Scroll down to the 'Static website hosting' and click 'Edit'
  4. Set 'Static website hosting' to Enable
  5. Under 'Index document' leave 'index.html'
  6. Click 'Save changes'
  7. On the 'Properties' tab you will see a 'Bucket website endpoint' -> that is the URL of the website
  8. Now if you try and open that URL you should get an error in your browser saying that you don't have permissions to access it. Let's fix that.

Configure permissions for the bucket

  1. Click on the 'Permissions' tab
  2. Under 'Bucket policy' click 'Edit' and enter the following:
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "MakeItPublic",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::angular-prerender-markdown/*"
        }
    ]
}
  1. Click 'Save changes'

🎉 Now your website is hosted on S3 and it's publicly accessible.

👉 Continue with part 4: Automate deployment with Github Actions