Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chinchalinchin/cumbercloud-web
A single page application written in Angular for my personal website and portfolio.
https://github.com/chinchalinchin/cumbercloud-web
angular aws cicd cloudformation codebuild webdesign webdev webdeveloper
Last synced: about 2 months ago
JSON representation
A single page application written in Angular for my personal website and portfolio.
- Host: GitHub
- URL: https://github.com/chinchalinchin/cumbercloud-web
- Owner: chinchalinchin
- Created: 2022-04-20T09:36:11.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-02-04T10:27:36.000Z (almost 2 years ago)
- Last Synced: 2023-03-03T23:18:38.834Z (almost 2 years ago)
- Topics: angular, aws, cicd, cloudformation, codebuild, webdesign, webdev, webdeveloper
- Language: TypeScript
- Homepage: https://cumberland-cloud.com
- Size: 137 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Cumberland Cloud Web
This is a Single Page Application written in [Angular](https://angular.io) and [Angular Material](https://material.angular.io/) for my personal website and portfolio. The application is hosted on an [AWS Cloudfront Distribution](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html).
This repository includes everything you will need to build, deploy and host its contents.
The backend for this application can be found [here](https://github.com/chinchalinchin/cumbercloud-lambdas).
## Quickstart
### Development Server
```shell
cd app
npm install
ng serve
```
### Prerendered Development Server
```shell
cd app
npm install
npm run dev:ssr
```
### Production Build
```shell
cd app
ng build
```
### Prerendered Production Build
```shell
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](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-configure.html) 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,
```shell
./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](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/domain-register.html). You will need the [hosted zone ID](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/ListInfoOnHostedZone.html) 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](https://docs.aws.amazon.com/acm/latest/userguide/acm-overview.html). 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,
```shell
git remote add codecommit
```
In order to push and pull from this new repository, you will need to [setup your SSH key on CodeCommit](https://docs.aws.amazon.com/codecommit/latest/userguide/setting-up-ssh-unixes.html). After this is setup, you will need to push the current commit up to the repository to initiate the first pipeline build.
```shell
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](https://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](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/example-function-add-index.html).