Powerful Starterkit combining all latest advanced Angular features. Strict typescript mode and preventing pushing untested code. Read more for all features.
- βοΈ Angular 13
- π Monorepo with NX.dev
- π IVY by default
- βοΈ NGRX store (implemented according ngrx.io)
- π΄ Lazy Loading
- βοΈ HttpInterceptor
- βοΈ NGX-Translate (assets/i18n/{locale}.json)
- π SSR (Server Side Rendering)
- π Prerendering (for SEO and static HTML generation)
- π PWA (Progressive Web App)
- π Service Worker detects new build versions
- π€ Unit Test (Jest)
- πΉοΈ E2E Test / Reports (Playwright / Cucumber)
- π Visual Testing (Storybook / Playwright)
- π Storybook
- ποΈ Tailwind
- π― Git hooks (husky)
- π€© Ability to Mock data (mockServer) (Docker)
- π° WebPush integration (mockServer and PWA)
- Install modules:
npm ci
- MAC:
npm run certificate:generate:mac && nx run <project>:serve [options]
- Windows: remove ssl from
serve
inside 'project.json' andnx run <project>:serve [options]
NRWL nx.dev monorepo, see all commands
nx serve <project> [options]
nx run <project>:serve [options]
Because we are running localhost on SSL (https), you will need to generate a certificate and key, and place them in a folder called build
. Run npm run certificate:generate:mac
to create the required certificates and place them in the required folder.
Git hooks are active, which means you only can commit when there are no linting errors, and all unit-tests succeeds. Other commmands can be implemented with husky
.
When using nvm, the default node should be > 14. nvm alias stable default
NRWL nx.dev monorepo, see all commands
nx build <project> [options]
- normal production buildnx run <project>:build [options]
- production build with files already gzippednx run <project>:build-prerender [options]
- with prerendering all routesnx run <project>:build-ssr [options]
- production build with Server Side Rendering
Ivy is set to true by default and works with SSR / Prerendering
This project comes with built-in SSR functionality. The effect of SSR will be valuable on larger projects or slower internet connections, run Google Audit with slow network to see the difference.
- For Serving -
nx run <project>:serve-ssr [options]
- For Building -
nx run <project>:build-ssr [options]
- For Serving -
nx run <project>:serve-prerender [options]
- For Building -
nx run <project>:build-prerender [options]
nx run <project>:lint [options]
- Linting applicationnx run <project>:test [options]
- Unit test Watcher (only runs tests for changed files)nx run <project>:e2e [options]
- End to End test with Playwright and reports with Cucumber
Run nx run <project>:test [options
to execute the unit tests via Jest.
Run npm run affected:test
to execute a all unit tests for affected libs and apps.
Both scripts will provide a Code Coverage file, which can be found in './test-reports/<apps|libs>/<project>/coverage'
Run nx run <project>:e2e [options]
to execute the E2E Playwright tests.
This test will provide an report which will be shown at the end of all tests. It can also be found in ./test-reports/<apps|libs>/<project-e2e>. When tests fails, there will be a screenshot attached to the scenario where the test has failed.
For each component you create, you can add a storybook build and serve to your project, and call these events for building and serving
Within each lib / component you can create a 'visual-regression' folder which contains a spec file, which you need to connect to your storybook component. From there, you can add various test and scenario's from storybook and create a snapshot.
As of version 1.1.0 it is possible to setup a mockServer with nx run mockserver:serve
. Port will be https://localhost:4000
and the different status can be set at https://localhost:4000/mocking
. All data can be setup in './mockServer'. Examples of API, JSON and images are added.
As of version 2.1.0 the mockServer is running through Docker and runs with HTTPS/HTTP2
Do a POST call to https://localhost:4000/notification
to create a mocked push notification.
Best can be tested after nx run <project>:build [options]
and then serve the correct folder as http-server
. The application will then be available at https://localhost:8081