Šta je Vite? Vodič običnim jezikom za one koji prave aplikacije

Vite (izgovara se „vit“, što je francuski za „brzo“) je alat za build sajtova i veb aplikacija. Dok pravite, pokreće razvojni server koji prikazuje vaše izmene u browseru gotovo trenutno. Kada ste spremni za objavljivanje, pakuje vaš kod u male, optimizovane datoteke koje može da posluži bilo koji web hosting. Besplatan je, open source i podrazumevani alat iza mnogih React, Vue i Svelte projekata.

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

Možda nikada nećete ukucati Vite komandu, ali ako je vaša aplikacija napravljena uz AI alat za pravljenje aplikacija, verovatno je Vite pokreće. Mythex novim projektima podrazumevano dodeljuje 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:

• Razumete Preview. Živi pregled koji se ažurira dok AI menja datoteke obično je Vite razvojni server.
• Razumete 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 prikaz greške ili praznu stranicu, često Vite prijavljuje da datoteka nije uspela da se kompajlira.
• Znate njegova ograničenja. Vite gradi frontend. Ako vaša aplikacija treba backend — bazu podataka, tajne API ključeve, plaćanja — to radi negde drugde. Pogledajte frontend i backend.

Svakodnevna analogija

Zamislite kuhinju restorana.

• Tokom pripreme (razvoj), kuvar proba i podešava svako jelo dok radi. Promenite začin, pa ga ponovo probate sekundu kasnije. To je Vite razvojni server: menjate datoteku, stranica se odmah ažurira, često bez gubljenja onoga što ste upisali u formu.
• Za cateringovu porudžbinu (produkcija), sve se skuva, porcioniše, zapakuje i obeleži da može da putuje i bude servirano bilo gde. To je vite build: vaš kod se spaja, smanjuje i dobija datoteke sa otiscima spremne za bilo koji hosting.

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

Šta Vite zapravo radi

Savremena veb aplikacija se sastoji od mnogo datoteka: komponenti, stilova, slika i biblioteka trećih strana. Browseri ne mogu sve to da koriste kako je napisano. TypeScript mora da postane JavaScript, React JSX mora da se transformiše, a Tailwind klase moraju da se pretvore u CSS.

Vite to radi u dva režima:

Stariji alati su pakovali celu aplikaciju pre nego što bi išta prikazali, pa su pokretanje i ažuriranje velikog projekta mogli dugo da traju. Vitein trik je da to preskoči tokom razvoja i pusti browser da učitava datoteke po potrebi. Za produkciju i dalje pakuje — od Vite 8, uz bundler pod nazivom Rolldown — jer su mnoge male datoteke sporije za posetioce od nekoliko optimizovanih.

Radni primer: š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        ← spisak biblioteka i skripti (dev, build)
  vite.config.ts      ← Vite podešavanja i plugin-i
  src/
    main.tsx          ← pokreće React i ubacuje ga u index.html
    App.tsx           ← vaša glavna komponenta aplikacije
    index.css         ← stilovi, npr. @import "tailwindcss";
  public/             ← datoteke koje se kopiraju kakve jesu (favicon, robots.txt)

I skripte u package.json:

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

Sada pratite jednu izmenu:

1. Tražite od AI-ja da „napravi naslov plavim“.
2. On menja klasu u App.tsx.
3. Vite primeti da se datoteka promenila, transformiše samo nju i šalje izmenu u browser.
4. Naslov postaje plav u Preview-u, obično za manje od sekunde.

Kada objavite, vite build pravi nešto poput dist/index.html plus dist/assets/index-a1b2c3.js. Deo imena datoteke koji deluje nasumično menja se kada se sadržaj promeni, pa browseri i CDN-ovi mogu dugo da keširaju datoteke bez posluživanja zastarelog koda.

Environment varijable u Vite-u

Vite izlaže browser kodu samo promenljive čiji nazivi počinju sa VITE_, na primer VITE_PUBLIC_MAP_ID. To je mera bezbednosti: sve u browser kodu može da vidi posetilac, zato tajni ključevi nikada ne smeju imati taj prefiks i moraju ostati na backendu. Pogledajte environment varijable i tajne.

Ključni pojmovi

Uobičajena pogrešna shvatanja

• „Vite je framework.“ To je alat za build. React, Vue ili Svelte je framework; Vite ga pokreće i pakuje.
• „Vite aplikacija uključuje backend.“ Standardna Vite aplikacija je samo frontend. Baze podataka, prijave i tajni ključevi zahtevaju server ili API pored nje.
• „Razvojni server je u redu staviti na internet.“ Nije namenjen pravom saobraćaju. Uvek objavljujte izlaz produkcijskog builda.
• „Sve u .env je tajno.“ U Vite aplikaciji VITE_ promenljive se ugrađuju u datoteke koje svaki posetilac preuzima.
• „Osvežavanje stranice koja daje 404 znači da je aplikacija pokvarena.“ U aplikaciji sa jednom stranicom, hosting mora da pošalje svaku putanju nazad na index.html. To je podešavanje hostinga — pogledajte kako popraviti 404 greške posle objavljivanja.

Šta tražiti od AI alata

• „Je li ova aplikacija samo Vite (frontend), ili ima i backend? Gde se pokreće svaki deo?“
• „Pokreni produkcijski build i popravi sve greške i upozorenja pre nego što objavim.“
• „Proveri da nijedan tajni ključ nije u VITE_ promenljivama niti bilo gde u frontend kodu.“
• „Preview prikazuje praznu stranicu — proveri greške u Vite-u i konzoli browsera i popravi uzrok.“ Pogledajte kako popraviti praznu belu stranicu.
• „Proveri da osvežavanje bilo koje URL adrese stranice radi posle objavljivanja, ne samo početne stranice.“

Vite u Mythex-u

Svaki novi Mythex projekat počinje na Vite-u, osim ako ne zatražite Next.js, statički HTML ili drugačiji backend. Živi Preview u vašem privatnom sandboxu se ažurira dok agent menja datoteke, a Publish builda aplikaciju i objavljuje je — nema potrebe da sami podešavate hosting. Ako kasnije zatreba API ili baza podataka, zatražite to u chatu i Mythex može da doda backend servis pored Vite frontenda (aplikacije sa više servisa).

Pitanja