adb-web

Rôle

Nouvelle architecture frontend sur Cloudflare Workers, en remplacement progressif de adb-ui. Monorepo Yarn 4 + Turborepo qui contient :

  • apps/ui — Angular servi statiquement par un Worker (Static Assets).
  • apps/bff — Backend-For-Frontend en Hono : termine l'auth à l'edge, cache les lectures, rate-limit, et fait du fan-out vers les services Java via Cloudflare Tunnel.
  • packages/* — types partagés, client API généré depuis OpenAPI, composants UI, styles, config ESLint.

⚠️ Migration en cours. À la date de rédaction, seul le endpoint /healthz est implémenté côté BFF ; le scaffolding existe et les TODOs sont nombreux.

Stack

ÉlémentValeur
Package managerYarn 4.5.0
Build orchestratorTurbo 2.3.0
Node>= 20.10.0
TypeScript5.6.0
BFF frameworkHono 4.6.0
Wrangler4.0.0
Workers types@cloudflare/workers-types 4.20240925.0
TestsVitest 2.0 + @cloudflare/vitest-pool-workers 0.5

Architecture

flowchart TB
    Browser[Navigateur]

    subgraph CFEdge[Cloudflare Edge]
        UIWorker[Worker UI<br/>Static Assets<br/>Angular SPA]
        BFF[Worker BFF<br/>Hono]
        KV[(KV<br/>cache)]
        DO[Durable Objects<br/>rate-limit, sessions]
    end

    Tunnel[Cloudflare Tunnel<br/>ADB_TUNNEL_TOKEN]

    subgraph Backend
        GW[adb/proxy<br/>Nginx]
        Services[adb-* services]
    end

    Browser --> UIWorker
    UIWorker -->|charge SPA + assets| Browser
    Browser -->|/api/...| BFF

    BFF -.cache lookup.-> KV
    BFF -.rate-limit.-> DO
    BFF -->|HTTPS| Tunnel
    Tunnel --> GW
    GW --> Services

Structure du monorepo

adb-web/
├── apps/
│   ├── ui/                Angular SPA (à migrer depuis adb-ui)
│   └── bff/               Hono Worker
│       ├── src/index.ts   Routes (TODO: Hono router complet)
│       └── wrangler.jsonc Config Worker
└── packages/
    ├── api-client/        Types TS générés depuis OpenAPI
    ├── shared-types/      Types partagés UI <-> BFF
    ├── ui-components/     Composants Angular réutilisables
    ├── ui-styles/         CSS/SCSS partagés
    └── eslint-config/     Config ESLint commune

apps/bff — le BFF Hono

Responsabilités prévues

  1. Terminer l'authentification à l'edge (validation JWT Keycloak via JWKS).
  2. Cacher les lectures idempotentes (KV namespace).
  3. Rate-limit / shape par utilisateur (Durable Objects).
  4. Fan-out vers les services Java via Cloudflare Tunnel.

Configuration wrangler.jsonc

{
  "name": "adb-bff",
  "main": "src/index.ts",
  "compatibility_date": "2026-04-01",
  "compatibility_flags": ["nodejs_compat"],
  "observability": { "enabled": true },
  "vars": { "ENVIRONMENT": "development" }
  // TODO:
  // - routes + custom domain
  // - kv_namespaces (cache)
  // - durable_objects (rate-limit, sessions)
  // - service bindings
  // - secrets
}

Secrets attendus

SecretRôle
ADB_UPSTREAM_URLURL du backend Java (via tunnel)
ADB_TUNNEL_TOKENToken Cloudflare Tunnel
JWT_SECRETValidation JWT

État actuel

// src/index.ts — extrait
app.get('/healthz', (c) => c.json({ ok: true, env: c.env.ENVIRONMENT }))

Les routes métier (/api/contracts, /api/persons, etc.) sont à monter.

apps/ui — l'Angular sur Cloudflare

L'app Angular sera buildée puis servie par un Worker en mode Static Assets. Le code source est à migrer depuis adb-ui.

Packages

@adb/api-client

Client TypeScript généré automatiquement depuis les specs OpenAPI de adb/adb-openapi/.

yarn workspace @adb/api-client run generate

Le script pointe vers ../../../adb/adb-openapi/*.yaml (chemin relatif depuis adb-web/packages/api-client/).

@adb/shared-types

Types partagés entre UI et BFF (request/response shapes, enums, constants).

@adb/ui-components

Composants Angular réutilisables, packagés via ng-packagr.

@adb/ui-styles

CSS / SCSS partagés (variables, mixins, thèmes).

@adb/eslint-config

Configuration ESLint commune à tous les workspaces.

Dépendances inter-services

flowchart LR
    web[adb-web/bff]
    tunnel[Cloudflare Tunnel]
    proxy[adb/proxy]
    services[Tous les adb-* services]

    web --> tunnel
    tunnel --> proxy
    proxy --> services

Le BFF n'a pas de dépendance Maven ni de FQDN — il accède au backend via une URL upstream (secret ADB_UPSTREAM_URL) qui transite par le tunnel.

Build & déploiement

# À la racine de adb-web/
yarn install

turbo run build           # Build tous les workspaces
turbo run dev             # Dev mode (watch)
turbo run lint
turbo run test            # Vitest sur tous les packages
turbo run deploy          # Déploiement Wrangler

# Sync des types depuis l'OpenAPI backend
yarn sync:openapi

Cloudflare Pages / Workers

  • apps/ui → déployé en Worker avec Static Assets binding.
  • apps/bff → déployé en Worker classique.

À configurer côté dashboard Cloudflare (compte lifeconnect) :

  • Custom domain.
  • KV namespace pour le cache.
  • Durable Objects classes pour rate-limiting.
  • Cloudflare Tunnel vers l'infrastructure interne.
  • Secrets.

Liens