{"id":16590669,"url":"https://github.com/shyam-chen/angular-starter","last_synced_at":"2025-03-16T21:30:33.050Z","repository":{"id":37108975,"uuid":"55134656","full_name":"Shyam-Chen/Angular-Starter","owner":"Shyam-Chen","description":":triangular_ruler: A boilerplate for SPA Client with HTML5, Angular, and Material on Webpack.","archived":false,"fork":false,"pushed_at":"2024-05-08T02:33:26.000Z","size":5529,"stargazers_count":69,"open_issues_count":24,"forks_count":21,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-02-27T14:30:03.958Z","etag":null,"topics":["angular","material","reactivex","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Shyam-Chen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-03-31T08:44:11.000Z","updated_at":"2024-05-08T02:33:28.000Z","dependencies_parsed_at":"2023-02-09T17:31:59.836Z","dependency_job_id":null,"html_url":"https://github.com/Shyam-Chen/Angular-Starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shyam-Chen%2FAngular-Starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shyam-Chen%2FAngular-Starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shyam-Chen%2FAngular-Starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Shyam-Chen%2FAngular-Starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Shyam-Chen","download_url":"https://codeload.github.com/Shyam-Chen/Angular-Starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243830915,"owners_count":20354850,"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","material","reactivex","typescript"],"created_at":"2024-10-11T23:14:01.219Z","updated_at":"2025-03-16T21:30:32.685Z","avatar_url":"https://github.com/Shyam-Chen.png","language":"TypeScript","readme":"# Angular Starter\n\n:tiger: A boilerplate for Angular, Material, TypeScript, and ReactiveX.\n\n|    | Project Information |\n|:--:|---------------------|\n| Live Demo | [![Develop Demo][demo-develop-image]][demo-develop-link] [![Master Demo][demo-master-image]][demo-master-link] |\n| Develop Branch | [![Build Status][develop-build-image]][develop-build-link] [![Coverage Status][develop-coverage-image]][develop-coverage-link] |\n| Master Branch | [![Build Status][master-build-image]][master-build-link] [![Coverage Status][master-coverage-image]][master-coverage-link] |\n| Npm Package | [![dependencies Status][package-dependencies-image]][package-dependencies-link] [![devDependencies Status][package-devDependencies-image]][package-devDependencies-link] |\n\n[demo-develop-image]: https://img.shields.io/badge/link-develop-blue.svg\n[demo-develop-link]: https://angularnest-by-example-dev.firebaseapp.com/\n[demo-master-image]: https://img.shields.io/badge/link-master-blue.svg\n[demo-master-link]: https://angularnest-by-example-prod.firebaseapp.com/\n\n[develop-build-image]: https://img.shields.io/circleci/project/github/Shyam-Chen/Angular-Starter/develop.svg\n[develop-build-link]: https://circleci.com/gh/Shyam-Chen/workflows/Angular-Starter\n[develop-coverage-image]: https://img.shields.io/codecov/c/github/Shyam-Chen/Angular-Starter/develop.svg\n[develop-coverage-link]: https://codecov.io/gh/Shyam-Chen/Angular-Starter\n\n[master-build-image]: https://img.shields.io/circleci/project/github/Shyam-Chen/Angular-Starter/master.svg\n[master-build-link]: https://circleci.com/gh/Shyam-Chen/workflows/Angular-Starter\n[master-coverage-image]: https://img.shields.io/codecov/c/github/Shyam-Chen/Angular-Starter/master.svg\n[master-coverage-link]: https://codecov.io/gh/Shyam-Chen/Angular-Starter\n\n[package-dependencies-image]: https://img.shields.io/david/Shyam-Chen/Angular-Starter.svg\n[package-dependencies-link]: https://david-dm.org/Shyam-Chen/Angular-Starter\n[package-devDependencies-image]: https://img.shields.io/david/dev/Shyam-Chen/Angular-Starter.svg\n[package-devDependencies-link]: https://david-dm.org/Shyam-Chen/Angular-Starter?type=dev\n\n## Table of Contents\n\n* [Getting Started](#getting-started)\n* [Key Features](#key-features)\n* [Dockerization](#dockerization)\n* [Configuration](#configuration)\n* [Directory Structure](#directory-structure)\n\n## Getting Started\n\nFollow steps to execute this boilerplate.\n\n1. Clone this boilerplate\n\n```bash\n$ git clone --depth 1 https://github.com/Shyam-Chen/Angular-Starter \u003cPROJECT_NAME\u003e\n$ cd \u003cPROJECT_NAME\u003e\n```\n\n2. Install dependencies\n\n```bash\n$ yarn install\n```\n\n3. Start a local server\n\n```bash\n$ yarn serve\n```\n\n4. Compile and bundle code\n\n```bash\n$ yarn build\n```\n\n5. Check code quality\n\n```bash\n$ yarn lint\n```\n\n6. Runs unit tests\n\n```bash\n$ yarn unit\n```\n\n7. Runs end-to-end tests\n\n```bash\n$ yarn e2e\n```\n\n## Key Features\n\nThis seed repository provides the following features:\n\n* ---------- **Essentials** ----------\n* [x] [Angular](https://github.com/angular/angular)\n* [x] [Angular Material](https://github.com/angular/material2)\n* [x] [ReactiveX](https://github.com/ReactiveX/rxjs)\n* [x] [NGXS](https://github.com/ngxs/store)\n* [ ] [Ngx Translate](https://github.com/ngx-translate/core)\n* [ ] [Apollo GraphQL](https://github.com/apollographql)\n* ---------- **Tools** ----------\n* [x] [Webpack](https://github.com/webpack/webpack)\n* [x] [TypeScript](https://github.com/Microsoft/TypeScript)\n* [x] [PostCSS](https://github.com/postcss/postcss)\n* [x] [TSLint](https://github.com/palantir/tslint)\n* [x] [StyleLint](https://github.com/stylelint/stylelint)\n* [x] [Jest](https://github.com/facebook/jest)\n* [x] [Puppeteer](https://github.com/GoogleChrome/puppeteer)\n* ---------- **Environments** ----------\n* [x] [Firebase](https://firebase.google.com/)\n* [x] [CircleCI](https://circleci.com/)\n* [x] [Codecov](https://codecov.io/)\n* [x] [Docker](https://www.docker.com/)\n\n## Dockerization\n\nDockerize an application.\n\n1. Build and run the container in the background\n\n```bash\n$ docker-compose up -d \u003cSERVICE\u003e\n```\n\n2. Run a command in a running container\n\n```bash\n$ docker-compose exec \u003cSERVICE\u003e \u003cCOMMAND\u003e\n```\n\n3. Remove the old container before creating the new one\n\n```bash\n$ docker-compose rm -fs\n```\n\n4. Restart up the container in the background\n\n```bash\n$ docker-compose up -d --build \u003cSERVICE\u003e\n```\n\n5. Push images to Docker Cloud\n\n```diff\n# .gitignore\n\n  .DS_Store\n  node_modules\n  npm\n  public\n  functions\n  coverage\n+ dev.Dockerfile\n+ stage.Dockerfile\n+ prod.Dockerfile\n  *.log\n```\n\n```bash\n$ docker login\n$ docker build -f tools/\u003cdev|stage|prod\u003e.Dockerfile -t \u003cIMAGE_NAME\u003e:\u003cIMAGE_TAG\u003e .\n\n# checkout\n$ docker images\n\n$ docker tag \u003cIMAGE_NAME\u003e:\u003cIMAGE_TAG\u003e \u003cDOCKER_ID_USER\u003e/\u003cIMAGE_NAME\u003e:\u003cIMAGE_TAG\u003e\n$ docker push \u003cDOCKER_ID_USER\u003e/\u003cIMAGE_NAME\u003e:\u003cIMAGE_TAG\u003e\n\n# remove\n$ docker rmi \u003cREPOSITORY\u003e:\u003cTAG\u003e\n# or\n$ docker rmi \u003cIMAGE_ID\u003e\n```\n\n6. Pull images from Docker Cloud\n\n```diff\n# docker-compose.yml\n\n  \u003cdev|stage|prod\u003e:\n-   image: \u003cdev|stage|prod\u003e\n-   build:\n-     context: .\n-     dockerfile: tools/\u003cdev|stage|prod\u003e.Dockerfile\n+   image: \u003cDOCKER_ID_USER\u003e/\u003cIMAGE_NAME\u003e:\u003cIMAGE_TAG\u003e\n    volumes:\n      - yarn:/home/node/.cache/yarn\n    tty: true\n```\n\n## Configuration\n\n### Project environments\n\nChange to your project.\n\n```js\n// .firebaserc\n{\n  \"projects\": {\n    \"development\": \"\u003cDEV_PROJECT_NAME\u003e\",\n    \"staging\": \"\u003cSTAGE_PROJECT_NAME\u003e\",\n    \"production\": \"\u003cPROD_PROJECT_NAME\u003e\"\n  }\n}\n```\n\nSet an active project for working direct\n\n```bash\n$ yarn firebase use development\n```\n\n### Default environments\n\nSet your local environment variables. (use `this.\u003cENV_NAME\u003e = process.env.\u003cENV_NAME\u003e || \u003cLOCAL_ENV\u003e;`)\n\n```js\n// env.js\nfunction Environments() {\n  this.NODE_ENV = process.env.NODE_ENV || 'development';\n\n  this.PROJECT_NAME = process.env.PROJECT_NAME || '\u003cPROJECT_NAME\u003e';\n\n  this.HOST_NAME = process.env.HOST_NAME || '0.0.0.0';\n\n  this.SITE_PORT = process.env.SITE_PORT || 8000;\n  this.SITE_URL = process.env.SITE_URL || `http://${this.HOST_NAME}:${this.SITE_PORT}`;\n\n  this.FUNC_PORT = process.env.FUNC_PORT || 5000;\n  this.FUNC_URL = process.env.FUNC_URL || `http://${this.HOST_NAME}:${this.FUNC_PORT}/${this.PROJECT_NAME}/us-central1`;\n\n  this.APP_BASE = process.env.APP_BASE || '/';\n\n  this.GOOGLE_ANALYTICS = process.env.GOOGLE_ANALYTICS || '\u003cGOOGLE_ANALYTICS\u003e';\n\n  this.SENTRY_DSN = process.env.SENTRY_DSN || null;\n  this.RENDERTRON_URL = process.env.RENDERTRON_URL || null;\n}\n```\n\n### Deployment environment\n\nSet your deployment environment variables.\n\n```dockerfile\n# tools/\u003cdev|stage|prod\u003e.Dockerfile\n\n# envs --\nENV SITE_URL \u003cSITE_URL\u003e\nENV FUNC_URL \u003cFUNC_URL\u003e\n# -- envs\n```\n\n### CI environment\n\nAdd environment variables to the CircleCI build.\n\n```yml\nCODECOV_TOKEN\nDOCKER_PASSWORD\nDOCKER_USERNAME\nFIREBASE_TOKEN\n```\n\n### SEO friendly\n\nEnable billing on your Firebase Platform and Google Cloud the project by switching to the Blaze plan.\n\nServe dynamic content for bots.\n\n```diff\n// firebase.json\n    \"rewrites\": [\n      {\n        \"source\": \"**\",\n-       \"destination\": \"/index.html\"\n+       \"function\": \"app\"\n      }\n    ],\n```\n\nDeploy rendertron instance to Google App Engine.\n\n```bash\n$ git clone https://github.com/GoogleChrome/rendertron\n$ cd rendertron\n$ gcloud auth login\n$ gcloud app deploy app.yaml --project \u003cRENDERTRON_NAME\u003e\n```\n\nSet your rendertron instance in deployment environment.\n\n```dockerfile\n# tools/\u003cdev|stage|prod\u003e.Dockerfile\n\n# envs --\nENV RENDERTRON_URL \u003cRENDERTRON_URL\u003e\n# -- envs\n```\n\n## Directory Structure\n\nThe structure follows the LIFT Guidelines.\n\n```coffee\n.\n├── functions\n│   ├── index.js\n│   ├── package.json\n│   └── yarn.lock\n├── src\n│   ├── __tests__\n│   │   └── ...\n│   ├── _\u003cTHING\u003e  -\u003e app of private or protected things\n│   │   └── ...\n│   ├── assets  -\u003e datas, fonts, images, medias, styles\n│   │   └── ...\n│   ├── core  -\u003e core feature module\n│   │   └── ...\n│   ├── \u003cFEATURE\u003e  -\u003e feature modules\n│   │   ├── __tests__\n│   │   │   ├── \u003cFEATURE\u003e.component.spec.js\n│   │   │   └── \u003cFEATURE\u003e.e2e-spec.js\n│   │   ├── _\u003cTHING\u003e  -\u003e feature of private or protected things\n│   │   │   └── ...\n│   │   ├── \u003cFEATURE\u003e.component.css\n│   │   ├── \u003cFEATURE\u003e.component.html\n│   │   ├── \u003cFEATURE\u003e.component.ts\n│   │   └── \u003cFEATURE\u003e.module.ts\n│   ├── \u003cGROUP\u003e  -\u003e module group\n│   │   └── \u003cFEATURE\u003e  -\u003e feature modules\n│   │       ├── __tests__\n│   │       │   ├── \u003cFEATURE\u003e.component.spec.js\n│   │       │   └── \u003cFEATURE\u003e.e2e-spec.js\n│   │       ├── _\u003cTHING\u003e  -\u003e feature of private or protected things\n│   │       │   └── ...\n│   │       ├── \u003cFEATURE\u003e.component.css\n│   │       ├── \u003cFEATURE\u003e.component.html\n│   │       ├── \u003cFEATURE\u003e.component.ts\n│   │       └── \u003cFEATURE\u003e.module.ts\n│   ├── shared  -\u003e shared feature module\n│   │   └── ...\n│   ├── app-routing.module.ts\n│   ├── app.component.css\n│   ├── app.component.html\n│   ├── app.component.ts\n│   ├── app.module.ts\n│   ├── index.html\n│   └── main.ts\n├── tools\n│   └── ...\n├── .editorconfig\n├── .firebaserc\n├── .gitignore\n├── .postcssrc\n├── .stylelintrc\n├── Dockerfile\n├── LICENSE\n├── README.md\n├── circle.yml\n├── docker-compose.yml\n├── env.js\n├── firebase.json\n├── jest.config.js\n├── package.json\n├── tsconfig.json\n├── tslint.json\n├── webpack.config.js\n└── yarn.lock\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshyam-chen%2Fangular-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshyam-chen%2Fangular-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshyam-chen%2Fangular-starter/lists"}