Čo je Vite? Jednoduchý sprievodca pre tvorcov aplikácií

Vite (vyslovuje sa „vít“, z francúzštiny „rýchly“) je nástroj na zostavenie webových stránok a aplikácií. Počas tvorby spúšťa vývojový server, ktorý zobrazí vaše zmeny v prehliadači takmer okamžite. Keď ste pripravení na spustenie, zabalí váš kód do malých, optimalizovaných súborov, ktoré môže obsluhovať akýkoľvek webhosting. Je zadarmo, je open source a je predvoleným nástrojom za mnohými projektmi v Reacte, Vue a Svelte.

Prečo je Vite dôležitý, keď staviate s AI

Možno nikdy nenapíšete príkaz Vite, no ak vašu aplikáciu vytvoril AI tvorca aplikácií, Vite ju pravdepodobne spúšťa. Mythex začína nové projekty na Vite + React + TypeScript + Tailwind, pokiaľ nepožiadate o niečo iné (ako sa technológia vyberá).

Vedieť, čo Vite robí, vám pomôže:

• Pochopiť náhľad. Živý náhľad, ktorý sa aktualizuje, keď AI upravuje súbory, je zvyčajne vývojový server Vite.
• Pochopiť nasadenie. Aplikácia Vite sa stane priečinkom statických súborov — HTML, JavaScript, CSS a obrázky — ktoré sa lacno a jednoducho hostujú.
• Čítať chybové hlásenia. Keď náhľad zobrazí červené chybové okno alebo prázdnu stránku, často ide o to, že Vite hlási, že súbor sa nepodarilo skompilovať.
• Poznať jeho hranice. Vite zostavuje frontend. Ak vaša aplikácia potrebuje backend — databázu, tajné API kľúče, platby — beží inde. Pozri frontend vs backend.

Každodenná analógia

Predstavte si kuchyňu reštaurácie.

• Pri príprave počas služby (vývoj) kuchár ochutnáva a upravuje každé jedlo cestou. Zmení korenie a o sekundu to znova ochutná. To je vývojový server Vite: zmeníte súbor, stránka sa hneď aktualizuje, často bez straty toho, čo ste zadali do formulára.
• Pri cateringovej objednávke (produkcia) sa všetko uvarí, porciuje, zabalí a označí tak, aby sa dobre prepravilo a dalo sa podávať kdekoľvek. To je vite build: váš kód sa zviaže, zmenší a označí odtlačkami do súborov pripravených pre ľubovoľný hosting.

Rovnaké recepty, dva úplne odlišné spôsoby spracovania — a Vite zvláda oba.

Čo Vite skutočne robí

Moderná webová aplikácia sa skladá z mnohých súborov: komponentov, štýlov, obrázkov a knižníc tretích strán. Prehliadače nedokážu všetko to použiť tak, ako je napísané. TypeScript sa musí premeniť na JavaScript, JSX z Reactu musí byť transformovaný a triedy Tailwindu sa musia premeniť na CSS.

Vite to zvláda v dvoch režimoch:

Staršie nástroje zviazali celú aplikáciu, než niečo zobrazili, takže spustenie a aktualizácia veľkého projektu mohli trvať dlho. Trik Vite spočíva v tom, že to počas vývoja preskočí a nechá prehliadač načítavať súbory podľa potreby. Pre produkciu stále zväzuje — od Vite 8 s bundlerom Rolldown — pretože veľa malých súborov je pre návštevníkov pomalších než pár optimalizovaných.

Praktický príklad: čo je vnútri projektu Vite

Tu zhruba vyzerá malá aplikácia Vite + React:

my-app/
  index.html          ← jediná HTML stránka, z ktorej aplikácia začína
  package.json        ← zoznam knižníc a skriptov (dev, build)
  vite.config.ts      ← nastavenia Vite a pluginy
  src/
    main.tsx          ← spustí React a pripojí ho do index.html
    App.tsx           ← váš najvyššie položený komponent
    index.css         ← štýly, napr. @import "tailwindcss";
  public/             ← súbory kopírované bez zmeny (favicon, robots.txt)

A skripty v package.json:

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

Teraz sledujte jednu zmenu:

1. Požiadate AI: „zmeň nadpis na modrý“.
2. Upraví triedu v App.tsx.
3. Vite zistí, že súbor sa zmenil, transformuje práve ten súbor a pošle aktualizáciu do prehliadača.
4. Nadpis v náhľade zmodrie, zvyčajne do jednej sekundy.

Keď publikujete, vite build vytvorí niečo ako dist/index.html plus dist/assets/index-a1b2c3.js. Ten náhodne vyzerajúci úsek názvu súboru sa zmení vždy, keď sa zmení obsah, takže prehliadače a CDN môžu súbory ukladať do vyrovnávacej pamäte dlho bez toho, aby podávali zastaraný kód.

Premenné prostredia vo Vite

Vite sprístupní prehliadaču len premenné, ktorých názov začína VITE_, napríklad VITE_PUBLIC_MAP_ID. Ide o bezpečnostné opatrenie: čokoľvek v kóde prehliadača môže vidieť ktokoľvek z návštevníkov, preto tajné kľúče nesmú mať túto predponu a musia zostať na backende. Pozri premenné prostredia a tajomstvá.

Kľúčové pojmy

Bežné mylné predstavy

• „Vite je framework.“ Je to nástroj na zostavenie. Framework je React, Vue alebo Svelte; Vite ho spúšťa a balí.
• „Aplikácia Vite obsahuje backend.“ Štandardná aplikácia Vite je len frontend. Databázy, prihlásenia a tajné kľúče potrebujú server alebo API vedľa nej.
• „Vývojový server je v poriadku dať online.“ Nie je určený na skutočnú návštevnosť. Vždy nasadzujte výstup produkčného zostavenia.
• „Čokoľvek v .env je tajné.“ V aplikácii Vite sa premenné VITE_ zapekajú do súborov, ktoré si stiahne každý návštevník.
• „Obnovenie stránky, ktorá dá 404, znamená, že aplikácia je rozbitá.“ V jednostránkovej aplikácii musí hosting posielať každú trasu späť na index.html. Ide o nastavenie hostingu — pozri ako opraviť chyby 404 po nasadení.

Čo požadovať od vášho AI tvorcu

• „Je táto aplikácia len Vite (frontend), alebo má aj backend? Kde beží každá časť?“
• „Spusti produkčné zostavenie a oprav všetky chyby a upozornenia, kým publikujem.“
• „Skontroluj, že žiadne tajné kľúče nie sú v premenných VITE_ ani nikde vo frontend kóde.“
• „Náhľad zobrazuje prázdnu stránku — skontroluj chyby vo Vite a v konzole prehliadača a oprav príčinu.“ Pozri ako opraviť prázdnu bielu stránku.
• „Over, že obnovenie ľubovoľnej URL stránky funguje aj po publikovaní, nielen domovskej stránky.“

Vite v Mythex

Každý nový projekt v Mythex začína na Vite, pokiaľ nepožiadate o Next.js, statický HTML alebo iný backend. Živý náhľad vo vašom súkromnom sandboxe sa aktualizuje, keď agent upravuje súbory, a Publish aplikáciu zostaví a nasadí — nemusíte nastavovať žiadny hosting sami. Ak neskôr potrebujete API alebo databázu, požiadajte o to v chate a Mythex môže pridať backendovú službu vedľa frontendu Vite (aplikácie s viacerými službami).

Otázky