Powerful Starterkit combining all latest advanced Angular features. Strict typescript mode and preventing pushing untested code. Read more for all features.
- ⭐️ Angular 17
- 🎁 Monorepo with NX.dev
- ⭐️ NGRX store (implemented according ngrx.io)
- ⭐️ NGX-Translate (assets/i18n/{locale}.json)
- 🚀 SSR (Server Side Rendering)
- 😍 PWA (Progressive Web App)
- 😍 Service Worker detects new build versions
- 🤓 Unit Test (Jest)
- 🕹️ E2E Test / Reports (Playwright / Cucumber)
- 🕹️ A11Y Test (Axe Core in E2E)
- 🚀 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
serveinside '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.
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>:ssr-build [options]- production build with Server Side Renderingnx run <project>:docker-build [options]- production build with Server Side Rendering in a Docker
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>:ssr-serve [options] - For Building -
nx run <project>:ssr-build [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
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 > 18. nvm alias stable default