feat(spa): proxy /api in dev-server, relative bffApiBaseUrl

Make the SPAs reach the BFF same-origin via the Angular dev-server's
proxy, so the dockerised dev mode (ADR-0030) works when the SPA is
accessed from a remote browser (e.g. http://<vm-ip>:4200/) — and CORS
is bypassed in dev altogether.

- New proxy.conf.js per SPA: /api -> ${BFF_TARGET:-http://localhost:3000}
  (JS form so the env var can swap the target at startup without a
  rebuild).
- project.json serve.options.proxyConfig wired in for both apps.
- environment.ts (shell + admin) bffApiBaseUrl: 'http://localhost:3000/api'
  -> '/api'. Production siblings can still set an absolute origin if
  the SPA and BFF live on different hosts; tracing.ts resolves either
  form against window.location.origin.
- tracing.ts: new URL(env, window.location.origin) — relative bases no
  longer throw, absolute bases keep their own origin.
- dev.compose.yml: BFF_TARGET=http://portal-bff:3000 on portal-shell
  and portal-admin so the proxy hits the BFF container by Compose DNS.
  Native nx serve leaves it unset and falls back to localhost.

OTel exporter URL and cross-SPA links remain absolute — same remote-
browser issue, but not blocking the 'Backend unreachable' path this
PR targets. Out of scope here, follow-up if needed.

Stacked on top of feat/dockerised-dev-mode.
This commit is contained in:
Julien Gautier
2026-06-01 10:57:46 +02:00
parent 7ab43125a1
commit 099393c0e8
8 changed files with 99 additions and 12 deletions
+32
View File
@@ -0,0 +1,32 @@
// Angular dev-server proxy for portal-shell.
//
// Lets the SPA call `/api/...` as a SAME-ORIGIN request — the dev
// server intercepts it and proxies to the BFF. Two wins:
// - the browser no longer pins the BFF to `localhost:3000`, so the
// SPA works when accessed from a different host (e.g. `http://
// <vm-ip>:4200/` in the ADR-0030 dockerised dev mode, where the
// browser may not be on the same machine as the BFF);
// - CORS is bypassed entirely in dev (same origin), so the BFF's
// `CORS_ALLOWED_ORIGINS` allowlist no longer has to enumerate the
// workstation/VM hostnames a developer might use.
//
// Target resolution:
// - native `nx serve` → defaults to http://localhost:3000
// (the BFF on the same machine).
// - Compose `apps` profile → BFF_TARGET=http://portal-bff:3000 is
// set in dev.compose.yml so the proxy
// hits the BFF container by name.
//
// JS form (not JSON) is deliberate: it is the only Angular-supported
// proxy-config form that can read `process.env` at dev-server startup,
// which is what makes the Docker / native swap work without rebuilds.
const target = process.env['BFF_TARGET'] ?? 'http://localhost:3000';
module.exports = {
'/api': {
target,
secure: false,
changeOrigin: true,
},
};