Dialogporten-frontend / Arbeidsflate

On macOS using Homebrew you can install dependencies by running:

brew install fnm pnpm fzf
brew install --cask OrbStack
corepack enable
corepack prepare -activate

On Windows using Chocolatey you can install dependencies by running:

choco install -y fnm pnpm fzf docker-desktop

First you'll need to setup an .env file:

Ensure that ./.env (in root) is created with following keys and appropriate values (Note: replace the examples needed for local development)

OIDC_CLIENT_ID=<my_example_service>
OIDC_CLIENT_SECRET=<secret_password_keep_this_private>
APP_CONFIG_CONNECTION_STRING=<endpoint_url>
ALTINN2_API_KEY=<key>
ALTINN2_BASE_URL=<URL>
DIALOGPORTEN_URL=<URL>
PLATFORM_BASEURL=<URL>
OIDC_PLATFORM_URL==<URL>
AUTH_CONTEXT_COOKIE_DOMAIN='localhost'
PERSON_URN_ENC_KEYS=<base64_key>

PERSON_URN_ENC_KEYS is a base64-encoded AES-SIV key (32 or 64 bytes of key material) used by the BFF to encrypt person URNs in GraphQL responses. Generate one with:

openssl rand -base64 64

For key rotation, supply multiple keys comma-separated (current,previous); decrypt tries each in order. In local development the config falls back to a built-in dev key — do not use the dev default in deployed environments. In Azure the value is wired from the PersonUrnEncryptionKey Key Vault secret via .azure/applications/bff/main.bicep.

Running Docker in watch mode:

make pull (optional)
make dev

This describes how to work with Playwright tests in /packages/frontend.

After installing project dependencies, ensure Playwright browsers are installed:

pnpm install:browsers

Run all tests:

pnpm test:playwright && pnpm test:playwright:heavy && pnpm test:playwright:perf

The heavy and performance specs run as separate invocations so they don't compete with the main suite for the single Vite dev server.

Run code test generator (use app.localhost/?mock=true to access mock data):

pnpm codegen:playwright

Example:

pnpm test:playwright --debug

pnpm test:playwright -g 'myStory.spec.ts'

Mock data is located under src/mocks/data.

• Base: Default dataset
• Stories: Specific datasets used via playwrightId

To run the app with mocks:

http://app.localhost/?mock=true

To specify a dataset:

http://app.localhost/?mock=true&playwrightId=<folder-name>

Run accessibility tests:

pnpm test:accessibility

Accessibility logic resides in axe.test.ts. You can reuse createHtmlReport for reporting.

• Tests: packages/frontend/tests
• Playwright config: packages/frontend/playwright.config.ts

Our project documentation is built using Starlight, a documentation theme for Astro. The documentation is located in the packages/docs/ directory.

packages/docs/src/content/docs/
├── architecture/    # System architecture documentation
├── deployment/      # Deployment processes and configurations
├── development/     # Development guidelines and setup
├── featureFlags/    # Feature flag documentation
└── notes/           # Additional project notes and business rules

1. Location: All documentation files are in the packages/docs/src/content/docs/ directory
2. Format: Pages are written as Markdown (.md) or MDX (.mdx, which also supports components). Every page needs a title in its frontmatter
3. Diagrams: We use Excalidraw for creating diagrams
   • Save diagram source files as .excalidraw format
   • Export diagrams as .svg files
   • Always keep both .excalidraw and .svg files together in the same directory
   • Mermaid diagrams are written as ```mermaid code fences and rendered in the browser

# Using pnpm
pnpm --filter docs run dev

# Using Docker
pnpm --filter docs run build:docker
pnpm --filter docs run run:docker

The documentation will be available at:

• Local development: http://localhost:4321
• Docker: http://localhost:8080
• Full docker-compose setup (make dev): https://docs.localhost

1. File Organization:

   • Place new documentation in the appropriate subdirectory
   • Use clear, descriptive filenames
   • The sidebar is generated from the folder structure, so adding a page is enough to publish it
   • Include a frontmatter section with a title (use sidebar.order to control ordering)

2. Diagrams:

   • Create diagrams using https://excalidraw.com/
   • Save both .excalidraw and .svg versions
   • Place diagrams in the same directory as the documentation they support
   • Note: It used to be .tldr files before, but because of lack of support for maintaining these files.

3. Content Structure:

   • Use clear headings and subheadings
   • Include code examples where relevant
   • Add links to related documentation
   • Keep content up to date with code changes

4. Search Optimization:

   • Use descriptive titles and headings
   • Include relevant keywords naturally in the content
   • Add appropriate tags in frontmatter when applicable