Fertige Config für Vite, Next.js oder Astro in 30 Sekunden
Du startest ein neues Projekt. Du weißt, du willst TypeScript, Tailwind, den **@/* Alias, vielleicht einen Dev-Proxy zu deinem Backend, vielleicht Standalone-Output** für Docker. Die "offizielle" Doku verstreut das auf sechs Seiten, und die Snippets gehen immer von einem anderen Snippet aus, den du noch nicht gelesen hast. Also kopierst du eine halbe Config aus einem Tutorial, die andere Hälfte aus einem anderen, und verbringst die nächste Stunde damit, zu debuggen, warum nichts funktioniert.
Dieser Builder gibt dir die eine Config-Datei, die du wirklich brauchst: vorverdrahtet, kommentiert, copy-paste-fertig. Framework wählen (Vite, Next.js oder Astro), Toggles für die gewollten Features umlegen, und die Config updated live rechts. In deinen Projekt-Root kopieren, npm install für die gelisteten Plugins laufen lassen, fertig zum Coden.
Kein File wird je verschickt. Das Ganze läuft im Browser, inklusive der Code-Generierung. Der Output ist eine saubere, moderne Config, die dem entspricht, was die Framework-Teams in 2025 selbst empfehlen.
So nutzt du das Tool
- Framework oben wählen: Vite für eine schnelle SPA, Next.js für eine Full-Stack-React-App, Astro für eine content-lastige statische Seite.
- Toggle-Optionen links umlegen. Jeder Toggle ändert die generierte Config rechts in Echtzeit, inklusive der Inline-Kommentare, damit du verstehst, was jede Section macht.
- Für Vite einen Flavor wählen (React, Vue, Svelte, SolidJS, Vanilla). Für Next einen Router (App oder Pages) und Output-Modus (default, standalone, static export). Für Astro die Integrationen (React, Vue, Svelte).
- Brauchst du einen Dev-Proxy für Vite? Den Proxy-Switch an und Pfad und Target tippen. Image-Domains in Next whitelisten? Eine Hostname pro Zeile in die Textbox.
- Wenn die Vorschau passt, Copy oben am Preview-Panel klicken und als vite.config.ts / next.config.ts / astro.config.mjs in deinen Projekt-Root pasten.
- Plugins installieren, die die Config importiert (Namen stehen in den `import`-Zeilen oben). Meist sind das offizielle `@vitejs/plugin-react`-, `@astrojs/react`- oder `next-intl`-artige Pakete.
- Du kannst auch Reset drücken, um auf einen sinnvollen Default für das aktive Framework zurückzugehen, nützlich beim Experimentieren.
Wann das nützlich ist
Sechs häufige Momente, in denen der Builder echt Minuten spart:
- Neues Projekt von Null aufziehen. Du hast `npm create vite@latest` gemacht und willst Tailwind, einen Alias und einen Proxy ergänzen, ohne drei Blog-Posts zu lesen. Vite wählen, Toggles, generierte Config pasten. In 30 Sekunden erledigt.
- Von Pages Router auf App Router migrieren. Next.js 16 shippt App Router als Default. Der Builder zeigt die moderne Config mit App Router, next-intl, typedRoutes und Standalone-Output, alles so eingerichtet, wie das Next-Team es 2025 empfiehlt. Kopieren und anpassen.
- Docker für eine Next.js-App einrichten. Du brauchst output: 'standalone', damit das Docker-Image klein ist, willst aber auch typedRoutes und Image-Domains. Der Builder schreibt das ganze in einem Block statt dass du die Feldnamen rätst.
- Von create-react-app zu Vite wechseln. CRA ist nicht mehr gepflegt. Der Builder gibt dir eine **Vite + React + TS + Tailwind + @/* **-Config, die sauber reinpasst, kein Webpack-Config-Albtraum, keine `craco`-Workarounds.
- Dev-API-Proxy ergänzen. Dein Frontend ist auf localhost:5173, dein Go-/Python-/Rust-Backend auf localhost:8080. Du brauchst /api, um an das Backend mit dem richtigen CORS-Bypass weiterzuleiten. Der Builder schreibt den Proxy-Block exakt richtig, inklusive `changeOrigin` und `secure: false`.
- Content-Site mit Astro hochziehen. Du willst Static-Output, React-Islands für interaktive Teile, Tailwind und ein i18n-Routing. Astros Doku hat das alles, aber über fünf Guides verteilt. Der Builder packt es in eine Datei.