Co je Vite? Srozumitelný průvodce pro tvůrce aplikací

Vite (vyslovuje se „vít“, francouzsky „rychlý“) je nástroj pro sestavení webů a webových aplikací. Během stavby spouští vývojový server, který změny ukazuje v prohlížeči téměř okamžitě. Když jste připraveni na spuštění, zabalí váš kód do malých, optimalizovaných souborů, které může obsloužit jakýkoli webhosting. Je zdarma, je open source a je to výchozí nástroj za mnoha projekty s Reactem, Vue a Svelte.

Proč je Vite důležitý, když stavíte s AI

Je možné, že nikdy nenapíšete příkaz pro Vite, ale pokud byla vaše aplikace vytvořena AI tvůrcem aplikací, Vite ji pravděpodobně spouští. Mythex zakládá nové projekty na Vite + React + TypeScript + Tailwind, pokud nepožádáte o něco jiného (jak se volí technologie).

Vědět, co Vite dělá, vám pomůže:

• Porozumět náhledu. Živý náhled, který se aktualizuje, když AI upravuje soubory, je obvykle vývojový server Vite.
• Porozumět nasazení. Aplikace Vite se změní na složku statických souborů — HTML, JavaScript, CSS a obrázky —, což je levné a jednoduché hostovat.
• Číst chybová hlášení. Když náhled ukáže červené chybové okno nebo prázdnou stránku, často je to Vite, které hlásí, že se soubor nepodařilo zkompilovat.
• Znát jeho limity. Vite sestavuje frontend. Pokud vaše aplikace potřebuje backend — databázi, tajné API klíče, platby —, ten běží jinde. Viz frontend vs backend.

Každodenní přirovnání

Představte si kuchyni restaurace.

• Při přípravě (vývoj) kuchař ochutnává a upravuje každé jídlo za pochodu. Změní koření a o vteřinu později to znovu ochutná. To je vývojový server Vite: změníte soubor a stránka se hned aktualizuje, často aniž byste přišli o to, co jste napsali do formuláře.
• Pro cateringovou objednávku (produkce) se všechno uvaří, porcuje, zabalí a označí tak, aby to dobře cestovalo a dalo se to podávat kdekoli. To je vite build: váš kód se spojí, zmenší a opatří otisky do souborů připravených pro jakýkoli hosting.

Stejné recepty, dva velmi odlišné způsoby zpracování — a Vite zvládá oba.

Co Vite vlastně dělá

Moderní webová aplikace se skládá z mnoha souborů: komponent, stylů, obrázků a knihoven třetích stran. Prohlížeče to nemohou použít tak, jak to je. TypeScript se musí proměnit v JavaScript, JSX z Reactu se musí přepsat a třídy Tailwindu se musí převést na CSS.

Vite to zvládá ve dvou režimech:

Starší nástroje před zobrazením čehokoli sbalily celou aplikaci, takže spuštění a aktualizace velkého projektu mohly trvat dlouho. Trik Vite spočívá v tom, že to při vývoji přeskakuje a nechá prohlížeč načítat soubory podle potřeby. Pro produkci stále balí — od Vite 8 s balíčkovačem Rolldown —, protože mnoho malých souborů je pro návštěvníky pomalejší než několik optimalizovaných.

Praktický příklad: co je uvnitř projektu Vite

Zhruba takhle vypadá malá aplikace Vite + React:

my-app/
  index.html          ← the one HTML page the app starts from
  package.json        ← list of libraries and scripts (dev, build)
  vite.config.ts      ← Vite settings and plugins
  src/
    main.tsx          ← starts React and mounts it into index.html
    App.tsx           ← your app's top-level component
    index.css         ← styles, e.g. @import "tailwindcss";
  public/             ← files copied as-is (favicon, robots.txt)

A skripty v package.json:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Nyní sledujte jednu změnu:

1. Požádáte AI: „udělej nadpis modrý“.
2. Upraví třídu v App.tsx.
3. Vite si všimne, že se soubor změnil, převede jen ten soubor a aktualizaci pošle do prohlížeče.
4. Nadpis v náhledu zmodrá, obvykle do jedné vteřiny.

Když publikujete, vite build vytvoří něco jako dist/index.html a dist/assets/index-a1b2c3.js. Ta náhodně vypadající část názvu souboru se změní pokaždé, když se změní obsah, takže prohlížeče a CDN mohou soubory ukládat do cache dlouho, aniž by podávaly zastaralý kód.

Proměnné prostředí ve Vite

Vite zpřístupňuje kódu v prohlížeči jen proměnné, jejichž názvy začínají na VITE_, například VITE_PUBLIC_MAP_ID. Je to bezpečnostní opatření: cokoli v kódu prohlížeče mohou návštěvníci vidět, takže tajné klíče nesmí mít tuto předponu a musí zůstat na backendu. Viz proměnné prostředí a tajemství.

Vysvětlení klíčových pojmů

Časté mylné představy

• „Vite je framework.“ Je to nástroj pro sestavení. Framework je React, Vue nebo Svelte; Vite ho spouští a balí.
• „Aplikace Vite obsahuje backend.“ Standardní aplikace Vite je jen frontend. Databáze, přihlášení a tajné klíče potřebují server nebo API vedle sebe.
• „Vývojový server se dá v pohodě dát online.“ Není určen pro skutečný provoz. Vždy nasazujte výstup produkčního sestavení.
• „Cokoli v .env je tajné.“ V aplikaci Vite jsou proměnné VITE_ zapečené do souborů, které si stáhne každý návštěvník.
• „Obnovení stránky, která vrátí 404, znamená, že aplikace je rozbitá.“ V jednostránkové aplikaci musí hosting poslat každou trasu zpět na index.html. Je to nastavení hostingu — viz jak opravit chyby 404 po nasazení.

Co žádat od AI tvůrce

• „Je tahle aplikace jen Vite (frontend), nebo má i backend? Kde běží každá část?“
• „Spusť produkční sestavení a oprav všechny chyby a varování, než publikuji.“
• „Zkontroluj, že žádné tajné klíče nejsou v proměnných VITE_ ani nikde v kódu frontendu.“
• „Náhled ukazuje prázdnou stránku — zkontroluj chyby v konzoli Vite i prohlížeče a oprav příčinu.“ Viz jak opravit prázdnou bílou stránku.
• „Ujisti se, že po publikování funguje obnovení libovolné adresy stránky, ne jen domovské.“

Vite v Mythexu

Každý nový projekt Mythexu začíná na Vite, pokud nepožádáte o Next.js, statické HTML nebo jiný backend. Živý náhled ve vašem soukromém sandboxu se aktualizuje, jak agent upravuje soubory, a Publish aplikaci sestaví a nasadí — hosting nemusíte nastavovat sami. Pokud později potřebujete API nebo databázi, požádejte o ně v chatu a Mythex může vedle frontendu Vite přidat backendovou službu (aplikace s více službami).

Otázky