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.

Execute locally:

npm run audit:licences

Architecture

👉 doc/ARCHITECTURE.md