Gotowy config do Vite, Next.js albo Astro w 30 sekund
Zaczynasz nowy projekt. Wiesz, że chcesz TypeScript, Tailwind, alias @/*, może proxy dev API do backendu, może standalone output pod Dockera. „Oficjalna" dokumentacja rozrzuca to po sześciu stronach, a snippety zawsze zakładają inny snippet, którego jeszcze nie przeczytałeś. Kończy się tak, że kopiujesz pół configu z jednego tutoriala, pół z drugiego, i przez kolejną godzinę debugujesz, czemu nic nie działa.
Ten builder daje Ci jeden plik configu, którego naprawdę potrzebujesz: gotowy, z komentarzami, do skopiowania i wklejenia. Wybierasz framework (Vite, Next.js albo Astro), przełączasz toggle dla opcji, których chcesz, a wygenerowany config aktualizuje się na żywo po prawej. Wklejasz do roota projektu, robisz npm install dla wypisanych pluginów i piszesz kod.
Żaden plik nigdzie nie wychodzi. Wszystko działa w przeglądarce, łącznie z generowaniem kodu. Wynik to czysty, nowoczesny config, zgodny z tym, co same zespoły frameworków rekomendują w 2025.
Jak używać
- Wybierz framework na górze: Vite do szybkiego SPA, Next.js do pełnego full-stacka w Reactcie, Astro do strony z dużą ilością contentu.
- Przełącz toggle opcji po lewej. Każdy przełącznik zmienia config po prawej w czasie rzeczywistym, łącznie z komentarzami w środku, żebyś rozumiał, co robi każda sekcja.
- Dla Vite wybierz wariant (React, Vue, Svelte, SolidJS, Vanilla). Dla Next wybierz router (App albo Pages) i tryb output (default, standalone, static export). Dla Astro wybierz integracje, które chcesz (React, Vue, Svelte).
- Potrzebujesz proxy dev API do Vite? Włącz przełącznik Proxy i wpisz ścieżkę i target. Trzeba dodać domeny do Next/Image? Wpisz jeden host w linijkę w textarea.
- Kiedy preview wygląda dobrze, kliknij Kopiuj nad podglądem i wklej jako vite.config.ts / next.config.ts / astro.config.mjs w roocie projektu.
- Zainstaluj pluginy, które config importuje (nazwy są w linijkach `import` na górze). Większość to oficjalne paczki w stylu `@vitejs/plugin-react`, `@astrojs/react` czy `next-intl`.
- Możesz też kliknąć Reset, żeby wrócić do sensownych domyślnych ustawień dla aktywnego frameworka, przydatne przy eksperymentowaniu.
Kiedy się przydaje
Sześć typowych momentów, w których builder oszczędza realne minuty:
- Startujesz nowy projekt od zera. Odpaliłeś `npm create vite@latest` i chcesz dodać Tailwinda, alias i proxy bez czytania trzech różnych blogposów. Klikasz Vite, przełączasz toggle, wklejasz wygenerowany config. Gotowe w 30 sekund.
- Migrujesz z Pages Router na App Router. Next.js 16 wystawia App Router jako default. Builder pokazuje nowoczesny config z App Routerem, next-intl, typedRoutes i standalone output ustawionym tak, jak zespół Next rekomenduje w 2025. Skopiuj i dostosuj.
- Stawiasz Dockera pod aplikację Next. Potrzebujesz output: 'standalone', żeby obraz Docker był mały, ale chcesz też typedRoutes i domeny obrazków. Builder pisze całość w jednym bloku, zamiast Ty miałbyś zgadywać nazwy pól.
- Przesiadasz się z create-react-app na Vite. CRA jest nieutrzymywane. Builder daje Ci config Vite + React + TS + Tailwind + @/*, który wklejasz cleanowo, bez piekła z konfigiem Webpacka, bez obejść z `craco`.
- Dodajesz proxy do dev API. Frontend chodzi na localhost:5173, Twój backend Go/Python/Rust na localhost:8080. Potrzebujesz, żeby /api forwardowało do backendu z obejściem CORS. Builder pisze blok proxy dokładnie tak, jak trzeba, łącznie z `changeOrigin` i `secure: false`.
- Stawiasz stronę contentową w Astro. Chcesz static output, wyspy w React do interaktywnych kawałków, Tailwind i routing i18n. Dokumentacja Astro ma to wszystko, ale w pięciu różnych guide'ach. Builder zwija to do jednego pliku.