Calling Backend Services
The frontend reaches every backend service through its own hostname, with one API-client instance per service:
- CORS — the frontend origin must be in the service's
CORS_ORIGINS. - Base URL — a
NEXT_PUBLIC_<NAME>_API_URLenv var in.env.local(+.example) andinfra/env/public-page.env.prod(+.example).NEXT_PUBLIC_*values are baked in at build time: restart the dev container / rebuild the prod image to pick them up. - API client — add the base URL to
lib/api/config.tsand export a client instance for it inlib/api/client.ts, then wrap the endpoints in alib/api/services/<name>.service.tswith types inlib/api/types.ts. - UI — fetch through the service module. Any user-facing text needs keys
in all locale catalogues under
messages/.
The dashboard's activity panel (fed by the second example service) is the
worked example of all four steps: service2ApiClient in lib/api/client.ts,
analytics.service.ts, and app/dashboard/components/analytics-panel.tsx.
Next: Writing Docs.