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.
Enable, static site hosting and set the Error page and Default page both to be index.html
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.
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
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.