Prerequisites | Setup | Development | Deployment
This is an example project of the Angular Tour of Heroes demo application digitally remastered with serverless architecture. The Serverless ToH demo is powered by Node.js and is a monorepo containing two applications.
Live Demo | MeetUp Presentation
The Serverless ToH demo is structured as a monorepo to allow for a single git clone and startup solution.
Within this repository you will find the working codebase for the API as well as for the Angular powered website.
The API is a serverless API that is backed by API Gateway utilizing Node.js and the Serverless Framework. This application resides in /api and makes use of DynamoDB as a data store.
The website is the Angular Tour of Heroes demo which is an almost completely untouched replica of the tutorial. The website resides in /website and is deployed out to S3 which is exposed by CloudFront
In order for our serverless application to run we will need to create a user with appropriate privileges. For the puposes of this demo we will assume that you are operating in an account that allowing admin rights to a user will not jeporadize the account. This user will be used by Travis CI to deploy out our application.
Make sure to give the user admin rights
Next we need to create an S3 bucket to house our angular application. I named mine serverless-tour-of-heroes but you can name yours whatever you like. One created go to the properties tab of the bucket and enable Static website hosting with the following values. Since our angular UI is a single page application we need to ensure that any errors incurred are handled by our index.html
Next we need to create a CloudFront Distribution. CloudFront is needed as the servicing side to our application. CloudFront allows for custom error page responses as well as direct CNAME integration to bring a fullfledged webhosting experience.
When creating the distribution select the S3 bucket you configured in the previous step as the Origin Domain Name. You can then scroll down to the Distirbution Settings section and add a CNAME if you intend to attach this distribution to a domain, otherwise leave blank. Lastly, make sure to add a Default Root Object of index.html. This will tell CloudFront that we intend to make the index.html of our selected S3 Origin Domain Name the entry point that CloudFront should hand back to browsers.
Create the distribution then navigate to the Error Pages tab to add the following configurations.
The 403 and 404 error code redirects we are adding are needed to route errors back to our angular application so that our angular code can handle them appropriately.
This section is not needed but is advisable for anything you intend to ship. The S3 configurations we made in an earlier step allow S3 to be publicly accessible which is not always desirable. We can add a S3 Bucket Policy that will lock the bucket down to only our deployment user and our CloudFront distribution.
To start, we will need to update our CloudFront origin. Go back to your CloudFront distribution, tab over to the Origins tab and edit the origin. Elect to Restrict Bucket Access and allow Origin Access Identity to create a new identity. Save your edit and you should see a screen similar to this
Copy the Origin Access Identiy, this will be needed in our S3 Bucket Policy to grant CloudFront access to our secure bucket
To bring security full circle we will need to update the Bucket Policy to allow our CloudFront distribution and our deployment user to access resources only.
The Serverless ToH demo has been setup to install both application dependencies off of a install command in the root solution directory
npm install
Running install in the root will kick off a postinstall script that will recurse through each directory installing necessary packages.
Copy the example environment file.
cp api/example.env.yml api/env.yml
The Serverless API leverages env.yml to set environment variables. By default the API is setup to gather variables from local.
For ease of development a few scripts have been added to this demo application
npm start
Running npm start from the root will cause both the api as well as the website projects to start instantly.
A few startup scripts have been configured for VSCode.
Launch API: This debug setting will start the Serverless API in offline mode and will attach VSCode's debugger to the process.
Launch CHrome against localhost angular: This debug setting will open a browser window to localhost:4200 and hook up a debug session. It will NOT start the website project. npm start must be ran first in the website directory first before attaching
The Serverless ToH demo application is backed by travis-ci for a full CD/CI pipeline experience. What this means, any merge into master will automatically kickoff the build process.