Cumberland Cloud Web

This is a Single Page Application written in Angular and Angular Material for my personal website and portfolio. The application is hosted on an AWS Cloudfront Distribution.

This repository includes everything you will need to build, deploy and host its contents.

The backend for this application can be found here.

Quickstart

Development Server

cd app
npm install
ng serve

Prerendered Development Server

cd app
npm install
npm run dev:ssr

Production Build

cd app
ng build

Prerendered Production Build

cd app
npm run prerender

Architecture

All of the resources to host, deploy and update this web application are contained as infrastructure-as-code within the cloudformation.yml in the repository root. This template can be posted to CloudFormation with the appropriate parameters to provision a CloudFront distribution, several S3 buckets, a CodeCommit repository, a CodeBuild project, a CodePipeline pipeline and several other resources to glue the whole environment together. The following diagram illustrates the architecture captured in this template,

If you have the AWS CLI installed and configured, you can use the provision-stack script to provision all the resources necessary to host and continously update the web application stored in this repository,

./scripts/provision-stack

This script will read in several key pieces of information from the command line. Before executing it, you must own a domain on AWS through Route53. You will need the hosted zone ID associated with your domain. In addition, in order to setup HTTPS with the CloudFront distribution, you will need to purchase a SSL certificate from the AWS Certificate Manager. The script will require the AWS Resource Number (ARN) of the certificate.

After the stack is deployed, the pipeline will initially fail because the CodeCommit repository is empty. Add a remote origin to this repository with the CodeCommit SSH url,

git remote add codecommit <ssh-url>

In order to push and pull from this new repository, you will need to setup your SSH key on CodeCommit. After this is setup, you will need to push the current commit up to the repository to initiate the first pipeline build.

git push codecommit master

Deployments

This repository is a public mirror of the actual source code; It is kept in sync with a AWS CodeCommit repository that is hooked into the AWS CodePipeline mentioned in the previous section; The CodeCommit mirror of this repository is, for all intents and purposes, the "master" repository. What that means is the current state of the live frontend application is built on pushes to the CodeCommit master branch only; pushes to this Github repository do not trigger any builds or deployments. CodePipeline pulls in the changes from the CodeCommit push and pushes them in turn to AWS CodeBuild. CodeBuild uses the buildspec.yml in the root of the repository to upload the build artifacts to an S3 bucket, which is served through a CloudFront distribution at cumberland-cloud.com.

CloudFront Edge Functions

When this application is prerendered, it will generate an index.html for each route, as opposed to a normal Angular build that compiles a singe index.html and bootstraps the entire application from that entrypoint. In order to accomodate this difference, the CloudFront distribution will need to be setup to append index.html to the end of all routes, so that will be serve the correct index on each path. If unchanged, the default configuration will serve the root index.html and then pass the routing to the Angular app, instead of loading that route's index and bootstrapping from there. This would effectively make the prerendering process moot, since the static html generated by the prerender would not be served by the Cloudfront distribution.

You will need to set up CloudFront edge functions for each route using the procedure described in the official AWS documentation found here.