Skip to content

Blazing fast ๐Ÿš€advanced Angular Starterkit, with many features ๐Ÿ˜๐ŸŽฏ

License

Notifications You must be signed in to change notification settings

rickvandermey/angular-starterkit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

Build Status codecov RVDM-Angular-Starterkit Maintainability Rating

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 ๐Ÿคฉ

Google Lighthouse result

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