Host Angular 5 Application on Amazon S3 Bucket



In this post I will show you how to deploy your Angular 5 application on Amazon S3 bucket and link it to your subdomain which in my case happened to be managed by GoDaddy.

Create a new Angular application. I will start by copying a previous Angular5 application created for Angular5 and Bootstrap4 integration. If you want you can look at that blog post here.

Angular Application Setup

First I have logged into my Github accouont and created a new Empty repository named "angular-s3-demo"

Next, I will create bare clone of my original repository

git clone --bare https://github.com/Kraval/ng5-bs4-template.git

Navigate to the repository

cd ng5-bs4-template.git

Push the content to new Repository using mirror option

git push --mirror https://github.com/Kraval/angular-s3-demo.git

Next, clone the new repository, run npm install and add a new component that will handle all the 404 errors.

git clone https://github.com/Kraval/angular-s3-demo.git

Create a new Component not-found

ng g component components/not-found --module app

Updated content of the not-found.component.html with something that you want to display to your users when they hit unwanted routes.

Next, import the component in the public.routes.ts file and create following route.

import { NotFoundComponent } from '../../components/not-found/not-found.component'

{ path: 'notfound', component:NotFoundComponent}

Update the app.routing.modiles.ts as below.

{ path: '**', redirectTo: 'notfound' }

Amazon S3 Setup

Now, let's shift focus towards Amazon S3. First things first, creat a new S3 Bucket and enable static site hosting.

Create S3 Bucket

Enable, static site hosting and set the Error page and Default page both to be index.html

Enable Static Site Hosting

Compile the Angular application in production mode and upload all the content of dist directory to this newly created bucket. While doing that also change the Bucket ACL policy to allow "Public Read Access" to all objects.

Upload Angular App to S3

GoDaddy CName setup

Next, let's create a new CNAME that points one of the subdomain to angular application hosted on Amazon S3 Bucket.

I am usingg GoDaddy for my domain. If you are using the same you can go ahead and click "DNS" button next to your target domain where you can see exiting C and A Records and also have an option to create a nenw One.

Nagivate to the page and create a new CNAME record, which should look something like below.

HOST : angulardemo

POINTS TO : angulardemo.keyurraval.com.s3-website-us-east-1.amazonaws.com

TTL : 1 HR

Enable CNAME Record

And that's all we need to do in order to point our subdomain to deliver Angular application hosted on Amazon S3 Bucket.

HERE is the link to my sample application.

That's it for this post. In the next post I will show you how to write a simple script to automate the deployment of the changes to your Angular application without going through the AWS Web Interface.