Ce este Vite? Ghid simplu pentru constructorii de aplicații

Vite (se pronunță „veet”, care înseamnă „rapid” în franceză) este un instrument de build pentru site-uri și aplicații web. Cât construiești, rulează un server de dezvoltare care arată schimbările în browser aproape instant. Când ești gata de lansare, împachetează codul în fișiere mici, optimizate, pe care le poate servi orice host web. Este gratuit, open source și instrumentul implicit din spatele multor proiecte React, Vue și Svelte.

De ce contează Vite când construiești cu AI

S-ar putea să nu scrii niciodată o comandă Vite, dar dacă aplicația ta a fost construită cu un constructor AI, Vite o rulează probabil. Mythex pornește proiectele noi pe Vite + React + TypeScript + Tailwind, dacă nu ceri altceva (cum este aleasă tehnologia).

A ști ce face Vite te ajută să:

• Înțelegi Preview-ul. Previzualizarea live care se actualizează pe măsură ce AI-ul editează fișierele este de obicei un server de dezvoltare Vite.
• Înțelegi publicarea. O aplicație Vite devine un folder de fișiere statice — HTML, JavaScript, CSS și imagini — ceea ce este ieftin și simplu de găzduit.
• Citești mesajele de eroare. Când previzualizarea arată o eroare roșie sau o pagină albă, este adesea Vite care raportează că un fișier nu s-a compilat.
• Cunoști limitele. Vite construiește partea de frontend. Dacă aplicația ta are nevoie de backend — o bază de date, chei API secrete, plăți — aceasta rulează în altă parte. Vezi frontend vs backend.

O analogie din viața de zi cu zi

Gândește-te la bucătăria unui restaurant.

• În pregătirea serviciului (dezvoltarea), bucătarul gustă și ajustează fiecare fel pe parcurs. Schimbi condimentele, guști din nou o secundă mai târziu. Asta este serverul de dezvoltare Vite: schimbi un fișier, pagina se actualizează imediat, adesea fără să pierzi ce ai scris într-un formular.
• Pentru o comandă de catering (producția), totul este gătit, porționat, ambalat și etichetat, ca să călătorească bine și să poată fi servit oriunde. Asta este vite build: codul tău este grupat, micșorat și primește nume de fișier cu amprentă, gata pentru orice host.

Aceleași rețete, două moduri foarte diferite de a le gestiona — iar Vite face ambele.

Ce face Vite de fapt

O aplicație web modernă este formată din multe fișiere: componente, stiluri, imagini și biblioteci terțe. Browserele nu pot folosi toate acestea așa cum sunt scrise. TypeScript trebuie transformat în JavaScript, JSX-ul din React trebuie transformat, iar clasele Tailwind trebuie transformate în CSS.

Vite se ocupă de asta în două moduri:

Instrumentele mai vechi grupau întreaga aplicație înainte de a afișa ceva, deci pornirea și actualizarea unui proiect mare puteau dura mult. Trucul Vite este să sară peste asta în timpul dezvoltării și să lase browserul să încarce fișierele pe măsură ce sunt necesare. Pentru producție, tot grupează — din Vite 8, cu un grupator numit Rolldown — pentru că multe fișiere mici sunt mai lente pentru vizitatori decât câteva optimizate.

Un exemplu practic: ce există într-un proiect Vite

Iată aproximativ cum arată o aplicație mică 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)

Și scripturile din package.json:

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

Acum urmărește o singură schimbare:

1. Ceri AI-ului „fă titlul albastru”.
2. El editează o clasă din App.tsx.
3. Vite observă că fișierul s-a schimbat, transformă doar acel fișier și trimite actualizarea în browser.
4. Titlul devine albastru în previzualizare, de obicei în mai puțin de o secundă.

Când publici, vite build produce ceva de genul dist/index.html plus dist/assets/index-a1b2c3.js. Partea aparent aleatorie din numele fișierului se schimbă ori de câte ori se schimbă conținutul, astfel încât browserele și CDN-urile pot păstra fișierele în cache mult timp fără să servească cod vechi.

Variabile de mediu în Vite

Vite expune codului din browser doar variabilele al căror nume începe cu VITE_, de exemplu VITE_PUBLIC_MAP_ID. Este o măsură de siguranță: orice se află în codul din browser poate fi văzut de vizitatori, deci cheile secrete nu trebuie să aibă niciodată acest prefix și trebuie să rămână pe un backend. Vezi variabilele de mediu și secretele.

Termeni cheie

Concepții greșite frecvente

• „Vite este un framework.” Este un instrument de build. React, Vue sau Svelte este framework-ul; Vite îl rulează și îl împachetează.
• „O aplicație Vite include un backend.” O aplicație Vite standard este doar frontend. Bazele de date, autentificările și cheile secrete au nevoie de un server sau de un API alături.
• „Serverul de dezvoltare poate fi pus online.” Nu este făcut pentru trafic real. Publică întotdeauna rezultatul build-ului de producție.
• „Orice din .env este secret.” Într-o aplicație Vite, variabilele VITE_ sunt încorporate în fișierele pe care le descarcă fiecare vizitator.
• „Dacă reîncarci o pagină și primești 404, aplicația este defectă.” Într-o aplicație single-page, host-ul trebuie să trimită fiecare rută înapoi către index.html. Este o setare a hosting-ului — vezi cum repari erorile 404 după publicare.

Ce să ceri constructorului tău AI

• „Este această aplicație doar Vite (frontend) sau are și backend? Unde rulează fiecare parte?”
• „Rulează build-ul de producție și repară toate erorile sau avertismentele înainte să public.”
• „Verifică să nu existe chei secrete în variabile VITE_ sau oriunde în codul de frontend.”
• „Previzualizarea arată o pagină goală — verifică erorile din consola Vite și a browserului și repară cauza.” Vezi cum repari o pagină albă goală.
• „Asigură-te că reîncărcarea oricărei adrese de pagină funcționează după publicare, nu doar a paginii principale.”

Vite în Mythex

Fiecare proiect nou Mythex pornește pe Vite, dacă nu ceri Next.js, HTML static sau un alt backend. Previzualizarea live din sandbox-ul tău privat se actualizează pe măsură ce agentul editează fișierele, iar Publish construiește aplicația și o trimite online — nu trebuie să configurezi singur hosting-ul. Dacă mai târziu ai nevoie de un API sau de o bază de date, cere-o în chat, iar Mythex poate adăuga un serviciu de backend lângă frontend-ul Vite (aplicații cu mai multe servicii).

Întrebări