Frontend Build

Purpose

How frontend/kundkort/ is bundled and served.

Serving

The API server in src/api/index.ts:908-969 serves the SPA. Logic:

1. Any non-/api/, non-/health GET/HEAD request enters the static-asset branch.
2. If path has an extension in [tsx, ts, jsx, js, css, png, svg, ico, woff, woff2, html] and the file exists under frontend/kundkort/, serve it.
3. .tsx/.ts/.jsx files are transpiled on the fly via new Bun.Transpiler({ target: 'browser' }) (src/api/index.ts:928-941). Comment in source flags this as legacy; the prebuilt dist/app.js is preferred.
4. Otherwise SPA fallback: serve frontend/kundkort/index.html.

Dist artifacts

frontend/kundkort/index.html:77-78 references ./dist/app.css and ./dist/app.js. Three dist directories exist:

• dist/ — the live bundle. app.js ~2.7 MB, app.css ~6 KB.
• dist-debug/ — sourcemapped build for debugging. app.js ~1.0 MB plus app.js.map ~5.3 MB. Sourcemap references node_modules/react, @tremor/react, recharts, d3-*, @headlessui/react etc — confirms the bundle includes the full Tremor/Recharts dependency tree.
• dist.backup/ — older bundle, css only is ~2.9 KB.

Warning

No npm script in root package.json matches bun build for the frontend (the only build is tsc). The bundling command is not committed; ask the previous maintainer how dist/ is regenerated.

Tailwind

Two configs coexist:

• frontend/kundkort/index.html:14-76 — inline config injected to the Tailwind CDN at runtime. Sets the Tremor color palette and a few utility extensions.
• frontend/kundkort/tailwind.config.js — file-based config with the same palette plus a safelist for dynamically constructed bg-*-{50..950} etc. classes used by Insights Panel and Tremor Charts.

Note

The HTML inline config dropped its safelist because “the safelist patterns for dynamic color classes were too complex for the browser to process” — see index.html:72-75. Required dynamic styles are baked into dist/app.css instead.

See also

Frontend Overview, Tremor Charts.

See also

• Frontend MOC