Što je Vite? Vodič običnim jezikom za graditelje aplikacija

Vite (izgovara se „vit“, franc. „brzo“) je alat za izgradnju web stranica i aplikacija. Dok radite, pokreće razvojni poslužitelj koji prikazuje vaše promjene u pregledniku gotovo odmah. Kad ste spremni za lansiranje, pakira vaš kod u male, optimizirane datoteke koje bilo koji web hosting može poslužiti. Besplatan je, open source i zadani alat iza mnogih React, Vue i Svelte projekata.

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

Možda nikad nećete upisati Vite naredbu, ali ako je vaša aplikacija izgrađena uz AI graditelj aplikacija, Vite je vjerojatno pokreće. Mythex nove projekte pokreće na Vite + React + TypeScript + Tailwind, osim ako ne zatražite nešto drugo (kako se bira tehnologija).

Poznavanje onoga što Vite radi pomaže vam da:

• Razumijete pregled. Živi pregled koji se ažurira dok AI uređuje datoteke obično je Vite razvojni poslužitelj.
• Razumijete objavu. Vite aplikacija postaje mapa statičnih datoteka — HTML, JavaScript, CSS i slike — što je jeftino i jednostavno za hostiranje.
• Čitate poruke o greškama. Kad pregled pokaže crveni okvir s greškom ili prazan zaslon, često je to Vite koji javlja da datoteka nije uspjela kompajlirati.
• Znate njegove granice. Vite gradi frontend. Ako vaša aplikacija treba backend — bazu podataka, tajne API ključeve, plaćanja — to se pokreće negdje drugdje. Vidi frontend naspram backenda.

Svakodnevna usporedba

Zamislite kuhinju restorana.

• Tijekom pripreme (razvoj) kuhar kuša i podešava svako jelo dok ide. Promijenite začin, ponovno ga kušate sekundu kasnije. To je Vitein razvojni poslužitelj: promijenite datoteku, stranica se odmah ažurira, često bez gubitka onoga što ste upisali u obrazac.
• Za narudžbu za catering (produkcija) sve se kuha, porcionira, pakira i označava da putuje dobro i može se poslužiti bilo gdje. To je vite build: vaš kod se spaja, smanjuje i dobiva otiske u nazivima datoteka, spremne za bilo koji hosting.

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

Što Vite zapravo radi

Moderna web aplikacija sastoji se od mnogo datoteka: komponenti, stilova, slika i vanjskih biblioteka. Preglednici ne mogu sve to koristiti onako kako je napisano. TypeScript mora postati JavaScript, Reactov JSX mora se transformirati, a Tailwind klase moraju se pretvoriti u CSS.

Vite to radi u dva načina:

Stariji alati spajali su cijelu aplikaciju prije nego što bi išta prikazali, pa je pokretanje i ažuriranje velikog projekta moglo trajati dugo. Vitein trik je preskočiti to tijekom razvoja i dopustiti pregledniku da učitava datoteke po potrebi. Za produkciju i dalje spaja — od Vitea 8, uz bundler zvan Rolldown — jer su mnoge male datoteke sporije za posjetitelje nego nekoliko optimiziranih.

Radni primjer: što je unutra Vite projekta

Evo otprilike kako izgleda mala Vite + React aplikacija:

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 skripte u package.json:

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

Sada pratite jednu promjenu:

1. Pitate AI da „napravi naslov plavim“.
2. On uredi klasu u App.tsx.
3. Vite primijeti da se datoteka promijenila, transformira samo tu datoteku i gurne ažuriranje u preglednik.
4. Naslov postane plav u pregledu, obično unutar sekunde.

Kad objavite, vite build proizvodi nešto poput dist/index.html plus dist/assets/index-a1b2c3.js. Taj naizgled nasumični dio naziva datoteke mijenja se kad se sadržaj promijeni, pa preglednici i CDN-ovi mogu predmemorirati datoteke dugo vremena bez posluživanja zastarjelog koda.

Varijable okruženja u Viteu

Vite izlaže pregledničkom kodu samo varijable čiji nazivi počinju s VITE_, na primjer VITE_PUBLIC_MAP_ID. To je sigurnosna mjera: sve u kodu preglednika posjetitelji mogu vidjeti, pa tajni ključevi nikad ne smiju imati taj prefiks i moraju ostati na backendu. Vidi varijable okruženja i tajne.

Ključni pojmovi

Uobičajene zablude

• „Vite je framework.“ To je alat za izgradnju. React, Vue ili Svelte je framework; Vite ga pokreće i pakira.
• „Vite aplikacija uključuje backend.“ Standardna Vite aplikacija je samo frontend. Baze podataka, prijave i tajni ključevi trebaju poslužitelj ili API uz nju.
• „Razvojni poslužitelj je u redu staviti na internet.“ Nije namijenjen stvarnom prometu. Uvijek objavljujte izlaz produkcijske izgradnje.
• „Sve u .env je tajna.“ U Vite aplikaciji VITE_ varijable se ugrađuju u datoteke koje svaki posjetitelj preuzima.
• „Osvježavanje stranice koja daje 404 znači da je aplikacija pokvarena.“ U jednostraničnoj aplikaciji host mora svaku rutu vratiti na index.html. To je postavka hostinga — vidi kako popraviti 404 greške nakon objave.

Što tražiti od AI graditelja

• „Je li ova aplikacija samo Vite (frontend) ili ima i backend? Gdje se pokreće svaki dio?“
• „Pokreni produkcijsku izgradnju i ispravi sve greške i upozorenja prije nego što objavim.“
• „Provjeri da nijedan tajni ključ nije u VITE_ varijablama niti bilo gdje u frontend kodu.“
• „Pregled prikazuje prazan zaslon — provjeri konzolu Vitea i preglednika i ispravi uzrok.“ Vidi kako popraviti prazan bijeli zaslon.
• „Provjeri da osvježavanje bilo koje URL stranice radi nakon objave, ne samo početne.“

Vite u Mythexu

Svaki novi Mythex projekt počinje na Viteu, osim ako ne zatražite Next.js, statični HTML ili drugi backend. Živi pregled u vašem privatnom sandboxu ažurira se dok agent uređuje datoteke, a Objavi izgradi aplikaciju i objavi je — ne morate sami postavljati hosting. Ako kasnije trebate API ili bazu podataka, zatražite u chatu i Mythex može dodati backend servis uz Vite frontend (aplikacije s više servisa).

Pitanja