Files
werkbaum/frontend/vite.config.js
T
mhoennigandClaude Opus 4.8 78d1000f61 frontend: Projektgerüst mit Vite — Single-HTML in ES-Module + Bündelung
Erster Schritt der Modularisierung (ROADMAP „tragfähige Codebasis",
TASKS Phase 1). Der bisher einzelne index.html-Prototyp wird zur Vite-App:

- CSS -> src/style.css, gesamtes JS -> src/app.js (noch als ein Modul;
  Parser/Renderer werden in den folgenden Checkboxen herausgelöst).
- index.html ist der Vite-Entry (<script type="module" src="/src/app.js">).
- npm run build (vite + vite-plugin-singlefile) inlint JS+CSS+Favicon (als
  data:-URI) in EINE self-contained dist/index.html -> bleibt file://-tauglich.
- Vitest als Testrunner eingerichtet (tests/, passWithNoTests bis Schritt 2/3).
- Pages-Workflow: Node + npm ci + npm test + npm run build, deployt dist/;
  Favicon-sed entfällt (inline), nur ../LICENSE + Footer-Version bleiben.
- .claude/launch.json auf Vite-Dev-Server (Port 8137) umgestellt.

Entscheidung als D19 dokumentiert (weicht D11 „kein Build-Zwang" bewusst auf,
hält aber D16 file://-Versprechen über die gebündelte Datei). README (de/en)
und frontend/CLAUDE.md um Dev-/Build-/Test-Workflow ergänzt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-21 20:47:23 +02:00

43 lines
1.6 KiB
JavaScript

import { readFileSync } from 'node:fs';
import { defineConfig } from 'vitest/config';
import { viteSingleFile } from 'vite-plugin-singlefile';
// Bettet das Favicon (../docs/brand/favicon.svg, außerhalb des Roots) als
// data:-URI direkt in <link rel="icon"> ein, damit die gebaute Datei wirklich
// EINE self-contained Datei ist (kein Sibling-Asset). Läuft vor Vites eigener
// HTML-Asset-Auflösung ('pre'), damit Vite die data:-URI unangetastet lässt.
function inlineFavicon() {
return {
name: 'werkbaum-inline-favicon',
transformIndexHtml: {
order: 'pre',
handler(html) {
const svg = readFileSync(new URL('../docs/brand/favicon.svg', import.meta.url), 'utf8');
const uri = 'data:image/svg+xml,' + encodeURIComponent(svg.trim());
return html.replace(/href="[^"]*favicon\.svg"/, `href="${uri}"`);
},
},
};
}
// Werkbaum bleibt bewusst eine einzelne, self-contained Datei (file://-tauglich,
// D16). Vite dient nur als Bündler/Testrunner (D19): `vite build` inlint alle
// Module + CSS in dist/index.html; im Dev-Server (`vite`) werden sie einzeln
// geladen. `fs.allow: ['..']` lässt den Dev-Server das Favicon aus
// ../docs/brand/ ausliefern (liegt außerhalb des Projekt-Roots frontend/).
export default defineConfig({
root: '.',
plugins: [inlineFavicon(), viteSingleFile()],
server: { port: 8137, strictPort: true, fs: { allow: ['..'] } },
build: {
// Alles inlinen -> keine externen Assets, eine Datei.
assetsInlineLimit: 100_000_000,
cssCodeSplit: false,
},
test: {
environment: 'node',
include: ['tests/**/*.test.js'],
passWithNoTests: true,
},
});