# Frontend decisions

A running log of frontend tooling and component decisions (CLAUDE.md §10). One entry per
decision; record *why*, and note any deviation from NL Design System.

---

## Workspace & tooling (S-08a, #65)

The portals live in an **Nx monorepo at the repository root**, alongside the .NET `services/`.

- **Package manager: pnpm.** Native build scripts are approved explicitly in `pnpm-workspace.yaml`
  under `allowBuilds` (pnpm 11 fails the install otherwise). Node 24, pnpm 11.
- **Angular, standalone components + signals, no NgModules** (§10). Apps are generated with
  `@nx/angular:application`.
- **Unit tests: Vitest** via Angular's built-in `@angular/build:unit-test` (the `vitest-angular`
  runner). **Angular Testing Library** is added for component tests when the first real components
  land (S-08c); the S-08a placeholder uses a plain `TestBed` render assertion.
- **Lint: ESLint** (flat config, `@nx/eslint`).
- **Nx is scoped to `apps/` + `libs/` only.** The `@nx/docker` and `@nx/dotnet` plugins are **not**
  installed — the .NET services are built by `dotnet`/the Makefile, and `@nx/docker` would otherwise
  infer every `services/*/Dockerfile` as an unnamed Nx project and break the project graph.
- **No Nx Cloud.** `nxCloudId` is stripped from `nx.json`; remote caching would depend on an
  external service, and the repo is Gitea-only (§8.7). Nx's "configure-ai-agents" additions
  (`.claude/settings.json`, a CLAUDE.md section referencing a GitHub marketplace) are **not**
  committed for the same reason.
- **CI:** a `frontend` job (`make frontend` → `pnpm install --frozen-lockfile` + `nx run-many -t
  lint test build`) runs on pnpm + Node, with pinned action URLs (§15).

**NL Design System:** not yet introduced — the S-08a app is a placeholder. NL DS components arrive
with the submit form (S-08c, #67); any deviation from NL DS will be recorded here.

---

## API client generator (S-08b, #66)

`libs/api-client` is **generated from `services/bff/openapi.json`** — never hand-written (§10).

- **Generator: orval** (`client: 'angular'`), a **node-based** generator (no Java, unlike
  `openapi-generator`), so it runs in the pnpm/Node CI lane. It emits an injectable
  `BffApiV1Service` using Angular's `HttpClient` — which means the DigiD bearer token can be attached
  by an **`HttpInterceptor`** (S-08c), the idiomatic Angular approach; a fetch-based SDK would bypass
  the interceptor pipeline.
- **Config:** `libs/api-client/orval.config.ts` (single-file output into `src/lib/generated/`,
  `clean: true`, prettier). **Regenerate with `nx run api-client:generate`** after the BFF spec
  changes; the output is deterministic (idempotent), and `src/lib/generated/` is never hand-edited.
- **Tested** against a mocked BFF via `HttpClientTesting` (`libs/api-client/src/lib/bff-api.spec.ts`).
- The BFF endpoints carry no `operationId`, so orval synthesises method names
  (`postSelfServiceRegistrations`, `getOpenbaarRegister`); adding explicit operation ids to the BFF
  is a possible later polish.