Šta je Vite? Vodič jednostavnim jezikom za graditelje aplikacija

Vite (izgovara se „vit“, što na francuskom znači „brzo“) je alat za izgradnju web sajtova i web aplikacija. Dok gradite, pokreće razvojni server koji prikazuje vaše izmjene u pregledaču gotovo odmah. Kada ste spremni za objavljivanje, pakuje vaš kod u male, optimizovane datoteke koje može da servira bilo koji web hosting. Besplatan je, open source je i podrazumijevani alat iza mnogih React, Vue i Svelte projekata.

Zašto je Vite važan kada gradite uz AI

Možda nikada nećete unijeti nijednu Vite komandu, ali ako je vaša aplikacija izgrađena uz AI alat za izradu, Vite je vjerovatno ono što je pokreće. Mythex pokreće nove projekte na Vite + React + TypeScript + Tailwind osim ako ne tražite nešto drugo (kako se bira tehnologija).

Znanje o tome šta Vite radi pomaže vam da:

• Razumijete Preview. Živi pregled koji se ažurira dok AI mijenja datoteke je tipično Vite razvojni server.
• Razumijete objavljivanje. Vite aplikacija postaje fascikla statičkih datoteka — HTML, JavaScript, CSS i slike — što je jeftino i jednostavno za hostovanje.
• Čitate poruke o greškama. Kada preview prikaže crveni prozor sa greškom ili praznu stranicu, često je to Vite koji prijavljuje da se datoteka nije kompajlirala.
• Znate njegova ograničenja. Vite gradi frontend. Ako vaša aplikacija treba backend — bazu podataka, tajne API ključeve, plaćanja — to radi negdje drugo. Pogledajte frontend naspram backenda.

Svakodnevna analogija

Zamislite kuhinju restorana.

• Tokom pripreme (razvoj), kuhar kuša i podešava svako jelo dok radi. Promijenite začin, ponovo ga okusite sekund kasnije. To je Vite razvojni server: mijenjate datoteku, stranica se odmah ažurira, često bez gubitka onoga što ste upisali u formular.
• Za cateringu (produkcija), sve se skuva, porcioniše, upakuje i označi tako da dobro putuje i može se poslužiti bilo gdje. To je vite build: vaš kod se spakuje, smanji i dobije otiske u imenima datoteka, spremne za bilo koji hosting.

Isti recepti, dva veoma različita načina rada — a Vite radi oba.

Šta Vite zapravo radi

Savremena web aplikacija se sastoji od mnogo datoteka: komponenti, stilova, slika i biblioteka trećih strana. Pregledači ne mogu sve to koristiti onako kako je napisano. TypeScript mora postati JavaScript, React JSX mora biti transformisan, a Tailwind klase moraju biti pretvorene u CSS.

Vite to rješava u dva režima:

Stariji alati su spajali cijelu aplikaciju prije nego što išta prikažu, pa je pokretanje i ažuriranje velikog projekta moglo trajati dugo. Vitov trik je da to preskače tokom razvoja i pusti pregledač da učitava datoteke po potrebi. Za produkciju, i dalje spaja — od Vite 8, uz bundler pod nazivom Rolldown — jer su mnoge male datoteke sporije za posjetioce od nekoliko optimizovanih.

Praktičan primjer: šta je unutra u Vite projektu

Evo otprilike kako izgleda mala Vite + React aplikacija:

my-app/
  index.html          ← jedina HTML stranica od koje aplikacija kreće
  package.json        ← lista biblioteka i skripti (dev, build)
  vite.config.ts      ← Vite podešavanja i plugin-ovi
  src/
    main.tsx          ← pokreće React i montira ga u index.html
    App.tsx           ← glavna komponenta vaše aplikacije
    index.css         ← stilovi, npr. @import "tailwindcss";
  public/             ← datoteke kopirane kakve jesu (favicon, robots.txt)

I skripte u package.json:

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

Sada pratite jednu izmjenu:

1. Tražite od AI-a da „naslov bude plav“.
2. On mijenja klasu u App.tsx.
3. Vite primijeti da se datoteka promijenila, transformiše baš tu datoteku i šalje ažuriranje pregledaču.
4. Naslov postaje plav u pregledu, obično za manje od sekunde.

Kada objavite, vite build proizvede nešto poput dist/index.html i dist/assets/index-a1b2c3.js. Nasumično izgledajući dio imena datoteke mijenja se kada se sadržaj promijeni, pa pregledači i CDN-ovi mogu dugo keširati datoteke bez posluživanja zastarjelog koda.

Varijable okruženja u Vite-u

Vite za kod u pregledaču izlaže samo varijable čiji nazivi počinju sa VITE_, na primjer VITE_PUBLIC_MAP_ID. To je mjera sigurnosti: sve što je u kodu pregledača može da vidi posjetilac, pa tajni ključevi nikada ne smiju imati taj prefiks i moraju ostati na backendu. Pogledajte varijable okruženja i tajne.

Ključni pojmovi

Česte zablude

• „Vite je framework.“ To je alat za izgradnju. Framework su React, Vue ili Svelte; Vite ga pokreće i pakuje.
• „Vite aplikacija uključuje backend.“ Standardna Vite aplikacija je samo frontend. Baze podataka, prijave i tajni ključevi zahtijevaju server ili API uz nju.
• „Razvojni server je u redu staviti na internet.“ Nije namijenjen za pravi saobraćaj. Uvijek objavljujte izlaz produkcijske izgradnje.
• „Sve u .env je tajno.“ U Vite aplikaciji, VITE_ varijable se ugrađuju u datoteke koje svaki posjetilac preuzima.
• „Osvježavanje stranice koja daje 404 znači da je aplikacija pokvarena.“ U jednostraničnoj aplikaciji, hosting mora svaku rutu vratiti na index.html. To je podešavanje hostinga — pogledajte kako popraviti 404 greške nakon objavljivanja.

Šta tražiti od vašeg AI alata

• „Da li je ova aplikacija samo Vite (frontend), ili ima i backend? Gdje se svaki dio pokreće?“
• „Pokreni produkcijsku izgradnju i popravi sve greške ili upozorenja prije nego objavim.“
• „Provjeri da nijedan tajni ključ nije u VITE_ varijablama niti bilo gdje u frontend kodu.“
• „Preview prikazuje praznu stranicu — provjeri greške u Vite i konzoli pregledača i popravi uzrok.“ Pogledajte kako popraviti praznu bijelu stranicu.
• „Pobrini se da osvježavanje bilo koje URL stranice radi nakon objavljivanja, ne samo početne stranice.“

Vite u Mythexu

Svaki novi Mythex projekat počinje na Viteu osim ako ne tražite Next.js, statički HTML ili drugačiji backend. Živi Preview u vašem privatnom sandboxu se ažurira dok agent mijenja datoteke, a Publish izgradi aplikaciju i objavi je — ne morate sami podešavati hosting. Ako kasnije zatrebate API ili bazu podataka, zatražite u chatu, a Mythex može dodati backend servis uz Vite frontend (aplikacije sa više servisa).

Pitanja