Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rickvandermey/angular-starterkit
Blazing fast 🚀advanced Angular Starterkit, with many features 😍🎯
https://github.com/rickvandermey/angular-starterkit
Last synced: 12 days ago
JSON representation
Blazing fast 🚀advanced Angular Starterkit, with many features 😍🎯
- Host: GitHub
- URL: https://github.com/rickvandermey/angular-starterkit
- Owner: rickvandermey
- License: mit
- Created: 2019-07-02T06:50:29.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-09-12T08:45:40.000Z (2 months ago)
- Last Synced: 2024-09-12T19:25:40.452Z (2 months ago)
- Language: TypeScript
- Homepage: https://angular-prerender.rickvandermeij.nl/
- Size: 20.3 MB
- Stars: 100
- Watchers: 10
- Forks: 24
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-blazingly-fast - angular-starterkit - Blazing fast 🚀advanced Angular Starterkit, with many features 😍🎯 (TypeScript)
README
[](https://travis-ci.com/rickvandermey/angular-starterkit)
[](https://codecov.io/gh/rickvandermey/angular-starterkit)
[](https://dashboard.cypress.io/projects/i6rrnt/runs)
[](https://sonarcloud.io/summary/new_code?id=rickvandermey_angular-starterkit)
# 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 :serve [options]`
- Windows: remove ssl from `serve` inside _'project.json'_ and `nx run :serve [options]`
## Perfect score application 🤩
## Development server
NRWL nx.dev monorepo, [see all commands](https://nx.dev/l/a/cli/serve)
- `nx serve [options]`
- `nx run :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](https://nx.dev/l/a/cli/build)
- `nx build [options]` - normal production build
- `nx run :build [options]` - production build with files already gzipped
- `nx run :ssr-build [options]` - production build with Server Side Rendering
- `nx run :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 :ssr-serve [options]`
- For Building - `nx run :ssr-build [options]`
## Testing
- `nx run :lint [options]` - Linting application
- `nx run :test [options]` - Unit test Watcher (only runs tests for changed files)
- `nx run :e2e [options]` - End to End test with Playwright and reports with Cucumber
### Unit tests with Jest 🤓
Run `nx run :test [options` to execute the unit tests via [Jest](https://jestjs.io/).
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//\/coverage'_
### E2E tests with Playwright and Cucumber and Axe Core (A11y) 🤓
Run `nx run :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//\_. 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 :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`