Carplates App

Car plates number CRUD application with Angular and Express

✨ This workspace has been generated by Nx, a Smart, fast and extensible build system. ✨

Built with Angular and Express.

Sequelize Typescript ORM for MySQL management.

NgRx state management.

RxJS reactive programming library for asynchronous requests, events and data streams handling.

Sentry tracing and error monitoring.

Unit testing written in Jest.

E2E testing written in Cypress

Tailwindcss utility classes for component styling.

Project features

• NX monorepo based libraries for advanced CI to build, lint or test only affected
• Express REST CRUD API endpoints (Swagger for visual interaction)
• MySQL with sequelize ORM
• Data access with NgRx (Facade design pattern for simplified interface and single point access)
• Unit testing with Jest
• Lazy loadable modules and routable modal components
• Multiple shared reusable common(constants, types, utilities for pagination/validators, types) and UI libraries/components to use across Angular and Express apps
• Docker setup
• Git hooks with husky and commitlint

Understand this workspace

Run nx graph to see a diagram of the dependencies of the projects.

Further help

Visit the Nx Documentation to learn more.

Development server

Angular Setup

For the local environment run yarn run angular-app:dev for a dev angular app. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Express App

For the local environment run yarn run backend-api:dev for a dev express app. Navigate to http://localhost:8080. The app will automatically reload if you change any of the source files. For the database install MySQL server.

Docker

Add sentry DSN to .env SENTRY_EXPRESS_DSN variable if available.

For the docker environment run docker compose up --build. Add -d for detached mode. Use Docker desktop for easier Docker management.

Swagger

To access navigate to http://localhost:8080/docs/

Library Unit testing

Run npx nx test <LIBRARY-NAME>. Library name can be found in jest.config.ts of each library.

npx nx test frontend-angular-carplate-carplate-data-access

Development Experience

Husky git hooks with Commitlint conventions

Husky for git hooks to standartize good practices and code documenting.

Read more on Commitlint conventions or conventions configuration. If any of scripts seem to fail without a reason, try adjusting encoding to UTF8.

There is a default commit convention enforcing one of [build, chore, ci, docs, feat, fix, perf, refactor, revert, style, test] types, for ex: type(scope): message or type: message.

To bypass pre-commit hook add environment variable when commiting via terminal

Bash:

SKIP_PRE_COMMIT=true git commit -m "type(scope):Your commit message"

Or set variable before with powershell and then commit:

$env:SKIP_PRE_COMMIT="true"
git commit -m "type(scope):Your commit message"

Use --no-verify flag to skip all hooks for a specific commit.

For pre-push hook best experience use terminal rather than plugins like git graph.

git push --set-upstream origin <branch-name>

Testing

• npm run affected:test Unit testing for all affected libraries.
• npm run test <LIBRARY_NAME> Unit testing for specific library.
• npm run affected:e2e E2E testing for all affected projects.
• npm run carplates-e2e:watch E2E testing angular carplates project.

Cypress e2e

NX way of running cypress

NX Graph

Visual graph of dependencies within workspace. Open the graph on http://127.0.0.1:4211/projects

Most commonly used:

• npm run affected:dep-graph
• npm run affected:build
• npm run affected:test
• npm run affected:lint