Blazing fast advanced Angular Starterkit

Powerful Starterkit combining all latest advanced Angular features. Strict typescript mode and preventing pushing untested code. Read more for all features.

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)

Quickstart:

Install modules: npm ci
MAC: npm run certificate:generate:mac && nx run <project>:serve [options]
Windows: remove ssl from serve inside 'project.json' and nx run <project>:serve [options]

Perfect score application 🤩

Development server

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.

Build

NRWL nx.dev monorepo, see all commands

nx build <project> [options] - normal production build
nx run <project>:build [options] - production build with files already gzipped
nx run <project>:ssr-build [options] - production build with Server Side Rendering
nx run <project>:docker-build [options]- production build with Server Side Rendering in a Docker

Server Side Rendering (SSR) 😍

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]

Testing

nx run <project>:lint [options] - Linting application
nx 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

Unit tests with Jest 🤓

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'

E2E tests with Playwright and Cucumber and Axe Core (A11y) 🤓

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.

Storybook 📖

For each component you create, you can add a storybook build and serve to your project, and call these events for building and serving

Visual Regression

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.

Mock data (MockServer) 🤩

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

Web push

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 🎯

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

spoon98 / dcl-starterkit Goto Github PK

dcl-starterkit's Introduction