{"id":22535687,"url":"https://github.com/chinchalinchin/cumbercloud-web","last_synced_at":"2026-05-11T07:53:41.739Z","repository":{"id":38353807,"uuid":"483592335","full_name":"chinchalinchin/cumbercloud-web","owner":"chinchalinchin","description":"A single page application written in Angular for my personal website and portfolio.","archived":false,"fork":false,"pushed_at":"2023-02-04T10:27:36.000Z","size":143879,"stargazers_count":0,"open_issues_count":19,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T06:22:29.703Z","etag":null,"topics":["angular","aws","cicd","cloudformation","codebuild","webdesign","webdev","webdeveloper"],"latest_commit_sha":null,"homepage":"https://cumberland-cloud.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chinchalinchin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-20T09:36:11.000Z","updated_at":"2022-05-04T14:07:41.000Z","dependencies_parsed_at":"2023-02-13T23:30:26.108Z","dependency_job_id":null,"html_url":"https://github.com/chinchalinchin/cumbercloud-web","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chinchalinchin/cumbercloud-web","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinchalinchin%2Fcumbercloud-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinchalinchin%2Fcumbercloud-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinchalinchin%2Fcumbercloud-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinchalinchin%2Fcumbercloud-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chinchalinchin","download_url":"https://codeload.github.com/chinchalinchin/cumbercloud-web/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinchalinchin%2Fcumbercloud-web/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260301992,"owners_count":22988721,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","aws","cicd","cloudformation","codebuild","webdesign","webdev","webdeveloper"],"created_at":"2024-12-07T10:08:14.607Z","updated_at":"2026-05-11T07:53:36.713Z","avatar_url":"https://github.com/chinchalinchin.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cumberland Cloud Web\n\nThis 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).\n\nThis repository includes everything you will need to build, deploy and host its contents.\n\nThe backend for this application can be found [here](https://github.com/chinchalinchin/cumbercloud-lambdas).\n\n## Quickstart\n\n### Development Server\n\n```shell\ncd app\nnpm install\nng serve\n```\n\n### Prerendered Development Server\n\n```shell\ncd app\nnpm install\nnpm run dev:ssr\n```\n\n### Production Build\n\n```shell\ncd app\nng build\n```\n\n### Prerendered Production Build\n\n```shell\ncd app\nnpm run prerender\n```\n\n## Architecture\n\nAll 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,\n\n\u003cp align=\"center\"\u003e\n    \u003cimg width=\"auto\" height=\"auto\" src=\"/docs/web_architecture.png\"\u003e\n\u003c/p\u003e\n\nIf 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,\n\n```shell\n./scripts/provision-stack\n```\n\nThis 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.\n\nAfter 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,\n\n```shell\ngit remote add codecommit \u003cssh-url\u003e\n```\n\nIn 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.\n\n```shell\ngit push codecommit master\n```\n\n## Deployments\n\nThis 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).\n\n## CloudFront Edge Functions\n\nWhen 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.\n\nYou 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).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchinchalinchin%2Fcumbercloud-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchinchalinchin%2Fcumbercloud-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchinchalinchin%2Fcumbercloud-web/lists"}