Frontend Dependencies

De VEMAP Frontend is gebouwd met Astro.js en maakt gebruik van Alpine.js voor interactiviteit, React voor complexe UI componenten, en Tailwind CSS voor styling.

Node.js versie

Vereist: Node.js 18.0 of hoger

Productie dependencies

{
  "dependencies": {
    // Framework & Build
    "astro": "^5.6.1", // Meta-framework (SSR, SSG, partial hydration)
    "@astrojs/alpinejs": "^0.4.8", // Alpine.js integratie
    "@astrojs/react": "^4.3.0", // React integratie
    "@astrojs/netlify": "^6.4.0", // Netlify deployment adapter

    // Interactiviteit & State
    "alpinejs": "^3.14.9", // Lightweight UI framework (15KB)
    "@alpinejs/persist": "^3.14.9", // LocalStorage/SessionStorage persistence
    "@alpinejs/collapse": "^3.14.9", // Collapse/expand animaties
    "zustand": "^4.5.1", // React state management

    // UI Libraries
    "react": "^18.2.0", // UI library voor complexe componenten
    "react-dom": "^18.2.0", // React DOM rendering
    "@mui/material": "^5.15.11", // Material-UI component library
    "@mui/icons-material": "^5.18.0", // Material Design icons
    "@emotion/react": "^11.14.0", // CSS-in-JS (MUI peer dependency)
    "@emotion/styled": "^11.14.1", // Styled components (MUI peer dependency)
    "react-colorful": "^5.6.1", // Color picker (2KB)

    // Styling
    "tailwindcss": "^4.1.11", // Utility-first CSS (Oxide engine, geen config)
    "@tailwindcss/vite": "^4.1.3", // Vite plugin voor Tailwind v4

    // Data Visualisatie
    "chart.js": "^4.5.0", // Charts voor dashboards

    // Utilities
    "dayjs": "^1.11.13", // Date library (2KB) met timezone support
    "flatpickr": "^4.6.13", // Date picker component
    "papaparse": "^5.5.3", // CSV parser voor bulk uploads
    "zod": "^3.25.76", // TypeScript schema validation

    // Markdown & Code
    "marked": "^16.1.2", // Markdown parser (email templates)
    "highlight.js": "^11.11.1", // Syntax highlighting
    "insane": "^2.6.2", // HTML sanitization (XSS protection)

    // Types
    "@types/alpinejs": "^3.13.11", // Alpine.js types
    "@types/react": "^18.3.23", // React types
    "@types/react-dom": "^18.3.7" // React DOM types
  }
}

Development dependencies

{
  "devDependencies": {
    "prettier": "^3.6.2", // Code formatter
    "prettier-plugin-astro": "^0.12.0", // Astro formatting
    "prettier-plugin-tailwindcss": "^0.5.6", // Tailwind class sorting
    "rollup": "^4.0.2", // Module bundler (gebruikt door Astro)
    "@types/insane": "^1.0.0", // Insane types
    "@types/marked": "^5.0.2" // Marked types
  }
}

Installatie

Development

npm install
npm run dev
npm run build
npm run preview

Deployment

De npm run deploy command is een alias voor onderstaande commands. Het zorgt ervoor dat de build ID wordt gegenereerd, voor client side cache busting. Vervoglens worden alle tests gedraaid via het geconfigureerde predeploy script en wanneer alle tests slagen wordt de applicatie naar Netlify gedepoyed.

npm run deploy

# Draait de volgende commands:
node scripts/generate-build-id.js && netlify deploy --prod --build

Predeploy Testing

De deployment workflow bevat automatische test validatie:

{
  "scripts": {
    // ... andere scripts ...
    "deploy": "node scripts/generate-build-id.js && netlify deploy --prod --build",
    "predeploy": "npm run test"
  }
}

Workflow:

npm run deploy wordt uitgevoerd
predeploy script wordt automatisch uitgevoerd (npm run test)
Bij falende tests wordt deployment afgebroken
Bij succesvolle tests wordt deployment voortgezet

Dit zorgt ervoor dat alleen geteste code wordt gedeployed naar productie.

App Version Management

De app versie wordt beheerd via scripts/bump-version.js en is cruciaal voor automatische sessie clearing bij updates. De versie wordt opgeslagen in src/lib/config/app.js en gebruikt door de middleware om versie mismatches te detecteren.

Versie bump workflow:

# Handmatig versie bumpen
node scripts/bump-version.js

# Of via npm script (indien beschikbaar)
npm run version:bump

Het script biedt interactieve versie bump opties:

Patch (bijv. 0.9.4 → 0.9.5) - Voor bug fixes
Minor (bijv. 0.9.4 → 0.10.0) - Voor nieuwe features
Major (bijv. 0.9.4 → 1.0.0) - Voor breaking changes
Skip - Geen versie wijziging

Hoe het werkt:

// 1. Leest huidige versie uit src/lib/config/app.js
// 2. Vraagt gebruiker om versie type (patch/minor/major)
// 3. Update versie in app.js
// 4. Versie wordt gebruikt door middleware voor cookie checking

Integratie met deployment:

De app versie wordt automatisch gecheckt bij elke request via de middleware. Wanneer de versie in de cookie niet matcht met de huidige app versie, worden alle auth cookies gecleared en wordt de gebruiker doorgestuurd naar de login pagina. Dit zorgt ervoor dat:

Oude sessies worden automatisch beëindigd na een update
Gebruikers krijgen altijd de nieuwste versie van de app
Cache problemen worden voorkomen

Best practice:

Update de app versie bij elke deployment die:

Breaking changes bevat
Nieuwe features introduceert
Belangrijke bug fixes bevat

Zie Middleware documentatie voor details over hoe de versie checking werkt.

Dependency management

Versie strategie

Caret ranges (^) worden gebruikt voor automatische minor/patch updates
Security updates worden direct toegepast
Major version upgrades worden getest in development
Breaking changes worden gedocumenteerd

Security

Alle dependencies worden regelmatig gescand op vulnerabilities:

npm audit voor security scanning
Dependabot alerts op GitHub
Netlify security scanning bij deployment

npm audit

npm audit fix

Security architectuur

XSS bescherming

De VEMAP applicatie implementeert meerdere lagen van XSS bescherming:

1. httpOnly cookies voor tokens

Gevoelige authenticatie tokens worden opgeslagen in httpOnly cookies, waardoor ze niet toegankelijk zijn via JavaScript:

Cookie	httpOnly	Beschrijving
`access_token`	✅ (prod/dev)	JWT token voor API authenticatie
`refresh_token`	✅ (altijd)	Token voor het vernieuwen van access tokens
`user_session`	❌	Niet-gevoelige gebruikersgegevens voor UI

Waarom dit belangrijk is: Bij een XSS aanval kan kwaadaardige JavaScript code geen toegang krijgen tot de access en refresh tokens, waardoor account takeover wordt voorkomen.

2. HTML sanitization

De insane library wordt gebruikt voor het sanitizen van user-generated HTML content:

import insane from "insane";

// Sanitize HTML om XSS te voorkomen
const safeHtml = insane(userInput);

Alle authenticatie cookies gebruiken security best practices. De omgeving wordt automatisch gedetecteerd:

// Automatische omgevingsdetectie via Astro
const currentEnv = import.meta.env.DEV ? "local" : "dev";
// → "local" bij npm run dev (development)
// → "dev" bij Netlify deployment (productie)

// Cookie opties per omgeving
{
  secure: true,       // Alleen via HTTPS (prod/dev)
  sameSite: "lax",    // Bescherming tegen CSRF
  httpOnly: true,     // Bescherming tegen XSS (voor tokens)
  domain: ".vemap.nl" // Cross-subdomain sharing (prod/dev)
}

Situatie	`import.meta.env.DEV`	`currentEnv`	Cookie flags
`npm run dev`	`true`	`"local"`	secure: false, domain: undefined
Netlify deploy	`false`	`"dev"`	secure: true, domain: “.vemap.nl”

Token lifecycle

Login → access_token (httpOnly, 1 uur)
      → refresh_token (httpOnly, 30 dagen)
      → user_session (niet httpOnly, 7 dagen)

Token refresh → Nieuwe access_token via refresh_token
             → Gebeurt automatisch bij expiratie
             → Server-side via Astro middleware

Compatibiliteit

Browser Support: Chrome 90+, Firefox 88+, Safari 14+, Edge 90+

Node.js: Alle dependencies compatibel met Node 18, 20 en 22