Angular seed

Here is my project for new angular project, with selection and configuration of tools to ensure a good quality of code, like linter, formatter, unit tests or e2e tests.

Indeed @angular/cli doesn't impose linter or e2e test anymore.

And doesn't seem to want to use var jest for unit testing. 🤷

I include @angular/material with theming by CSS variables and ngrx, because I use them in most of my projects.

Commands

Development server

npm start

Linter and Formatter

npm run format
npm run lint

You can run only specific lint/formatter if you want:

# For TS and HTML template (AKA ng lint)
npm run format:ng
npm run lint:ng

# For SCSS, JS and JSON
npm run lint:prettier
npm run format:prettier

# For SCSS
npm run format:stylelint
npm run lint:stylelint

Tests

npm run test
npm run e2e -- -c headless

Build

npm run build

Stack and Changes

🅰️ Core:
- @angular
- @angular/cli
  - root scss move to dedicated folder src/scss (stylePreprocessorOptions)
  - remove .vscode folder because it has to remain IDE agnostic
  - basics TS alias
- @angular/material
  - theming with CSS variables
  - dedicated variables file
  - NO global MaterialModule which import all the lib (tree-shaking ...) !
  - light/dark theme auto switch with prefers-color-scheme (no class)
- ngrx
  - store
  - effects
  - router-store with config
  - store-devtools with config
👮 Linter/Formatter
- @angular-eslint + prettier for TS and HTML Template
  - eslint, @typescript-eslint, @angular-eslint recommended rules
  - rxjs plugin with recommended rules
  - ngrx plugin with recommended rules
  - import with import/order to auto sort imports (TS alias support and three groups)
  - unused-imports to detect and auto-clear unused imports
  - cypress plugin with recommended rules
- stylelint + prettier for SCSS
  - standard-scss
  - rational-order with empty-line-between-groups
- prettier for SCSS, JS and JSON
✔ Unit Test
- jest with @briebug/jest-schematic
  - all config put in src/tests folder
  - prepare src/tests/mocks to put tests mocks
  - setup coverage threshold to 100 because I am a crazy person
  - ~~jest-createspyobj for missing typed createspyobj~~ Need to find better typing
  - ~~jest-marbles for rxjs testing~~
  - jasmine-marble for rxjs testing (do not trust the name, is not related to jasmine (no dependence))
  - ng-mocks for greatly simplify component testing
🐵 E2E Test
- cypress
- disable video and screenshotOnRunFailure
- I keep only the npm run e2e command (with configs)

Basic GH Actions

CI/CD must guarantee the quality of the code without being burdensome for the developers (so it must be fast).

And it must deploy (here, in GH Pages) the application automatically.

Job	Description
🚧 Install	Installation of dependencies and creation/update of cache.
👮 Lint	Syntax verification of the code
✔ Unit tests	Units tests
🐵 E2E tests	E2E tests
🛠️ Build	Build Angular application in prod config
🚀 Deploy	Deployment on Github Pages

kekel87 / angular-seed