Ano ang Vite? Gabay sa Simpleng Salita para sa App Builders

Ang Vite (binibigkas na "veet", French para sa "mabilis") ay build tool para sa mga website at web app. Habang gumagawa ka, nagpapatakbo ito ng development server na nagpapakita ng mga pagbabago mo sa browser halos agad. Kapag handa ka nang ilunsad, iniimpake nito ang code mo sa maliliit at na-optimize na file na kayang i-serve ng kahit anong web host. Libre ito, open source, at ito ang default na tool sa likod ng maraming React, Vue, at Svelte project.

Bakit mahalaga ang Vite kapag gumagawa ka gamit ang AI

Maaaring hindi ka kailanman mag-type ng Vite command, pero kung ginawa ang app mo gamit ang AI app builder, malamang na Vite ang nagpapatakbo nito. Nagsisimula ang mga bagong project sa Mythex sa Vite + React + TypeScript + Tailwind maliban kung humiling ka ng iba (paano pinipili ang tech).

Makakatulong sa iyo ang pag-alam kung ano ang ginagawa ng Vite para:

• Maunawaan ang Preview. Ang live preview na nag-a-update habang ini-edit ng AI ang mga file ay kadalasang Vite development server.
• Maunawaan ang deployment. Nagiging folder ng static files — HTML, JavaScript, CSS, at images — ang Vite app, na mura at simpleng i-host.
• Basahin ang mga error message. Kapag nagpapakita ang preview ng pulang error overlay o blangkong page, kadalasan ay iniuulat ng Vite na nabigo ang compile ng isang file.
• Alamin ang mga limitasyon nito. Ang frontend ang binubuo ng Vite. Kung kailangan ng app mo ang backend — database, secret API keys, payments — sa ibang lugar ito tumatakbo. Tingnan ang frontend vs backend.

Isang pang-araw-araw na halimbawa

Isipin ang kusina ng restaurant.

• Sa paghahanda bago ang serbisyo (development), tinitikman at isinasaayos ng chef ang bawat ulam habang nagluluto. Binabago ang timpla, tinitikman muli makalipas ang isang segundo. Ganito ang dev server ng Vite: binabago mo ang isang file, agad na nag-a-update ang page, kadalasan nang hindi nawawala ang anumang na-type mo sa form.
• Para sa catering order (production), lahat ay niluto, hinati, binalot, at nilagyan ng label para maayos ang biyahe at maihain saanman. Iyon ang vite build: pinagsasama, pinaliliit, at minamarkahan ang code mo bilang mga file na handa para sa kahit anong host.

Iisang recipe, dalawang magkaibang paraan ng paghawak — at ginagawa ng Vite ang pareho.

Ano talaga ang ginagawa ng Vite

Binubuo ang modernong web app ng maraming file: components, styles, images, at third-party libraries. Hindi kayang gamitin ng browser ang lahat ng iyon gaya ng pagkakasulat. Kailangang maging JavaScript ang TypeScript, kailangang i-transform ang JSX ng React, at kailangang gawing CSS ang mga Tailwind class.

Hinahawakan ito ng Vite sa dalawang mode:

Dati, bina-bundle muna ng mas lumang tool ang buong app bago magpakita ng anuman, kaya maaaring tumagal nang husto ang pagsisimula at pag-update ng malaking project. Ang trick ng Vite ay laktawan iyon habang nagde-develop at hayaan ang browser na mag-load ng mga file kapag kailangan. Para sa production, nagba-bundle pa rin ito — simula sa Vite 8, gamit ang bundler na tinatawag na Rolldown — dahil mas mabagal para sa mga bisita ang maraming maliliit na file kaysa sa iilang na-optimize na file.

Isang halimbawa: ano ang nasa loob ng Vite project

Ganito humigit-kumulang ang itsura ng maliit na Vite + React app:

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)

At ang mga script sa package.json:

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

Ngayon sundan ang isang pagbabago:

1. Hinihiling mo sa AI na "gawing asul ang heading".
2. Ine-edit nito ang isang class sa App.tsx.
3. Napapansin ng Vite na nagbago ang file, tina-transform lang ang file na iyon at itinutulak ang update sa browser.
4. Nagiging asul ang heading sa preview, kadalasan sa loob ng isang segundo.

Kapag nag-publish ka, ang vite build ay gumagawa ng mga bagay gaya ng dist/index.html at dist/assets/index-a1b2c3.js. Nagbabago ang mukhang random na bahagi ng pangalan ng file sa tuwing nagbabago ang nilalaman, kaya maaaring i-cache nang matagal ng mga browser at CDN ang mga file nang hindi naghahain ng lumang code.

Environment variables sa Vite

Ipinapakita lamang ng Vite sa browser code ang mga variable na ang pangalan ay nagsisimula sa VITE_, halimbawa VITE_PUBLIC_MAP_ID. Ito ay hakbang pangkaligtasan: anumang nasa browser code ay makikita ng mga bisita, kaya hindi dapat magkaroon ng prefix na iyon ang mga secret key at dapat manatili sa backend. Tingnan ang environment variables at secrets.

Mga pangunahing termino

Mga karaniwang maling akala

• "Framework ang Vite." Build tool ito. Ang React, Vue, o Svelte ang framework; pinapatakbo at iniimpake ito ng Vite.
• "Kasama sa Vite app ang backend." Frontend lang ang karaniwang Vite app. Kailangan ng database, login, at secret keys ng server o API sa tabi nito.
• "Ayos lang ilagay sa internet ang dev server." Hindi ito ginawa para sa totoong trapiko. Laging i-deploy ang output ng production build.
• "Anumang nasa .env ay lihim." Sa Vite app, ang mga VITE_ variable ay naka-embed sa mga file na dina-download ng bawat bisita.
• "Sira ang app kapag ang pag-refresh ng page ay nagbibigay ng 404." Sa single-page app, dapat ipadala ng host ang bawat route pabalik sa index.html. Setting ito ng hosting — tingnan ang paano ayusin ang 404 errors pagkatapos mag-deploy.

Ano ang hihilingin sa iyong AI builder

• "Frontend lang ba ang app na ito gamit ang Vite, o may backend din? Saan tumatakbo ang bawat bahagi?"
• "Patakbuhin ang production build at ayusin ang anumang error o warning bago ako mag-publish."
• "I-check na walang secret keys sa VITE_ variables o saanman sa frontend code."
• "Blangko ang preview — tingnan ang mga error sa Vite at sa browser console at ayusin ang sanhi." Tingnan ang paano ayusin ang blangkong puting page.
• "Siguraduhing gumagana ang pag-refresh ng anumang page URL pagkatapos mag-publish, hindi lamang ng home page."

Vite sa Mythex

Nagsisimula ang bawat bagong Mythex project sa Vite maliban kung humiling ka ng Next.js, static HTML, o ibang backend. Nag-a-update ang live Preview sa pribado mong sandbox habang ini-edit ng agent ang mga file, at ina-build at dina-deploy ng Publish ang app — walang hosting na kailangan mong i-set up nang mag-isa. Kung kailangan mo ng API o database sa hinaharap, humiling sa chat at maaaring magdagdag ang Mythex ng backend service sa tabi ng Vite front end (multi-service apps).

Mga tanong