Skip to content

Create Project using this boiler plate

Jump to bottom
Dharmen Shah edited this page Sep 15, 2021 · 6 revisions

Angular Application Boilerplate

All Contributors

Twitter

A boiler-plate project to create an Open-Source Angular Application with set of most used and needed tooling. See version section for info about Angular and its packages' versions.

Create Project using this boiler-plate

  1. Go to https://github.com/shhdharmen/angular-app-boilerplate
  2. Above the file list, click Use this template Use this template button
  3. Follow the on-screen instructions
  4. Create a Personal Access Token with repo access. Copy the token generated.
  5. Create a secret named GH_TOKEN and paste the token generated previously in Value.
  6. Clone the newly created repo
  7. If needed, create new branch, preferably beta
  8. Run node init.js "<BOT_NAME>" "<YOUR_EMAIL_ADDRESS>" "<FULL_NAME>", or if you can do following manually:
    1. Modify --name and --email in .github/workflows/release.yaml
    2. Update name in LICENSE
    3. Update email in CODE_OF_CONDUCT
    4. Clear content of CHANGELOG.md
    5. Change version in package.json to 0.0.0
  9. Find and replace angular-app-boilerplate with your app name
  10. Install dependencies: npm i
  11. All Contributors
    1. Initialize all-contributors using npx all-contributors init
    2. Add a contributor using npx all-contributors add
    3. Generate all-contributors' table: npx all-contributors generate
  12. Develop your app and test it
  13. Commit your changes using npm run commit
  14. Push it and merge it with main branch

Tools included

  1. All Contributors
  2. ESLint with help from Angular ESLint
  3. Prettier
  4. Semantic Release
  5. Stylelint
  6. Cypress with help from @briebug/cypress-schematic
  7. Husky
  8. Commitlint
  9. Commitizen CLI
  10. Angular CLI GH Pages
  11. Github Workflows/Actions
  12. Github Issue and Pull Request Templates

Utilizing this boiler-plate

Commit messages, Husky, linting and formatting

npm run commit

Always use above script to commit your changes. What happens when you run above command?

  1. Set of prompts will be presented to help you follow commit message guidelines
  2. Linting and formatting with possible fixes will be done on staged files using lint-staged:
"lint-staged": {
  "src/**/*.ts": "eslint --cache --fix",
  "src/**/*.{ts,js,css,md,json}": "prettier --write",
  "src/**/*.css": "stylelint --fix",
  "src/**/*.scss": "stylelint --syntax=scss --fix"
}
  1. If all of above checks run successfully, only then your files will be committed, else proper error messages will be presented

E2E Testing with Cypress

You can run e2e tests in 2 ways:

  1. Browser Mode (Usually helpful to run locally):
npm run start
# another terminal or session
npm run cy:open
  1. Headless Mode (Usually helpful to run in CI, this is ran through GitHub Actions in this project):
ng e2e

All Contributors

To add a contributor run:

npx all-contributors add

Semantic Release

Semantic release config file is present at .releaserc.json. This is triggered through GitHub Actions:

npx semantic-release

Above commands takes care of following things:

  1. Analyzes commit messages
  2. Generates release notes
  3. Creates or updates CHANGELOG.md
  4. Updates version in package.json
  5. Creates release tag
  6. Commits above changes

Checkout Release workflow recipes for more info on releases.

Angular CLI GH Pages

This helps to deploy your angular app on GitHub Pages.

npm run deploy

Above command is run through GitHub Actions.

GitHub Workflows and Actions

This boiler-plate comes with 2 workflows:

Workflow Runs-on Tasks
release.yaml push on main branch ✅ Build
✅ Release through Semantic Release
✅ Deploy on GitHub Pages
test.yaml push on any branch except main ✅ Lint
✅ Unit Test
✅ E2E Test
✅ Pre-release through Semantic Release

Version

➜  angular-app-boilerplate git:(main) ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 12.2.5
Node: 14.16.1
Package Manager: npm 7.9.0
OS: darwin x64

Angular: 12.2.5
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.5
@angular-devkit/build-angular   12.2.5
@angular-devkit/core            12.2.5
@angular-devkit/schematics      12.2.5
@schematics/angular             12.2.5
rxjs                            6.6.7
typescript                      4.2.4

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Dharmen Shah
💻 🖋 🎨 📖 🤔 🚧

This project follows the all-contributors specification. Contributions of any kind welcome!

Clone this wiki locally