Mitra Frontend

Prerequisites

Node.js 16.13.0

The repository contains a .node-version file to set up the required Node.js version automatically with nodenv.

For E2E testing with Playwright you will need to install the supported browsers:

npx playwright install

For the provided Git hooks you will need:

brew install lefthook talisman

Development

Getting started

Optional - install Git hooks:

./run.sh init

Dev server

The project uses Vite to provide a fast bundler-less dev server.

Start server:

npm run dev

Testing

The application has

unit tests (using Jest)
end-to-end tests (using Playwright)
accessibility tests (using pa11y)

To run the unit tests:

npm test

With watcher:

npm test -- --watch

Gather coverage:

npm run coverage

To run the E2E tests:

npm run test:e2e

To run a11y tests:

npm run test:a11y

Note that automated accessibility testing will help root out about 30% of the errors in code, but can't replace auditing by humans.

Style (linting & formatting)

Linting is done via ESLint; consistent formatting for a variety of source code files is being enforced using Prettier. ESLint and Prettier work in conjunction.

Check style:

npm run style:check

Autofix issues:

npm run style:fix

(Some problems might not autofix.)

Check format, lint and run tests in one pass:

npm run check

(Executing in that order, failing fast.)

Git hooks

The repo contains a Lefthook configuration, providing a Git hooks setup out of the box.

To install these hooks, run:

./run.sh init

The hooks are supposed to help to:

commit properly formatted and linted source code only (and not break the build otherwise)
write conventional commit messages
not accidentally push secrets and sensitive information

Deployment

Currently the app is deployed to GitHub Pages from trunk continuously, upon a successful build.

Entry point creator 👉 https://digitalservice4germany.github.io/mitra-frontend/creator

Entry point buyer 👉 https://digitalservice4germany.github.io/mitra-frontend/einkauf

Audits

Lighthouse

A Lighthouse audit is performed against the deployed application as part of the pipeline's audit job and fails when metric values drop below a score of 90 (recommended preset).

Execute locally:

npm run audit:lighthouse

License scanning

Continuous license scanning is performed as part of the pipeline's audit job. Whenever a production dependency is being added with a yet unknown license the build is going to fail.