Vite શું છે? App builders માટે સરળ માર્ગદર્શિકા

Vite (ઉચ્ચાર "veet", ફ્રેંચ માં "ઝડપી") વેબસાઇટ્સ અને વેબ apps માટેનું build tool છે. તમે બનાવતા હો ત્યારે, તે development server ચલાવે છે જે બ્રાઉઝરમાં તમારા ફેરફારો લગભગ તરત બતાવે છે. જ્યારે તમે launch કરવા તૈયાર હો, ત્યારે તે તમારા કોડને નાની, ઑપ્ટિમાઇઝ્ડ ફાઇલોમાં પેક કરે છે, જે કોઈ પણ વેબ host સર્વ કરી શકે. તે મફત છે, open source છે, અને ઘણા React, Vue અને Svelte પ્રોજેક્ટ્સ પાછળનું ડિફોલ્ટ સાધન છે.

AI સાથે બનાવતી વખતે Vite શા માટે મહત્વનું છે

તમે કદાચ ક્યારેય Vite નો કમાન્ડ ટાઇપ ન કરો, પણ જો તમારી app AI app builder વડે બની હોય, તો Vite કદાચ તેને ચલાવી રહ્યું છે. Mythex નવા પ્રોજેક્ટ્સ Vite + React + TypeScript + Tailwind પર શરૂ કરે છે, જ્યાં સુધી તમે બીજું કંઈ માગો નહીં (ટેક્નોલોજી કેવી રીતે પસંદ થાય છે).

Vite શું કરે છે તે જાણવાથી તમને મદદ મળે છે:

• Preview સમજવું. જે લાઇવ preview AI ફાઇલો બદલે તેમ અપડેટ થાય છે, તે સામાન્ય રીતે Vite development server છે.
• Deployment સમજવું. Vite app સ્થિર ફાઇલોનું ફોલ્ડર બને છે — HTML, JavaScript, CSS અને છબીઓ — જે હોસ્ટ કરવું સસ્તું અને સરળ છે.
• Error messages વાંચવા. જ્યારે preview માં લાલ error overlay અથવા ખાલી પેજ દેખાય, ત્યારે ઘણી વાર તે Vite એ જણાવે છે કે કોઈ ફાઇલ compile થઈ નથી.
• તેની મર્યાદાઓ જાણવી. Vite frontend બનાવે છે. જો તમારી app ને backend જોઈએ — database, ગુપ્ત API keys, payments — તો તે બીજે ક્યાંક ચાલે છે. જુઓ frontend vs backend.

એક રોજિંદો ઉદાહરણ

રેસ્ટોરાંના રસોડાનો વિચાર કરો.

• સેવા માટેની તૈયારી (development) દરમિયાન, શેફ દરેક વાનગી ચાખીને ગોઠવે છે. મસાલો બદલો, અને એક જ ક્ષણમાં ફરી ચાખો. તે Vite નો dev server છે: તમે ફાઇલ બદલો, પેજ તરત અપડેટ થાય છે, ઘણી વાર ફોર્મમાં તમે જે લખ્યું હતું તે ગુમાવ્યા વિના.
• કેટરિંગ ઓર્ડર (production) માટે, બધું રાંધવામાં આવે છે, ભાગ પાડવામાં આવે છે, પેક અને લેબલ કરવામાં આવે છે જેથી તે સારી રીતે પહોંચે અને ક્યાંય પણ પીરસી શકાય. તે vite build છે: તમારો કોડ બંડલ, નાનો અને ફિંગરપ્રિન્ટ થયેલી ફાઇલોમાં ફેરવાય છે જે કોઈ પણ host માટે તૈયાર હોય.

એ જ રેસિપી, બે બહુ અલગ રીતે સંભાળવી — અને Vite બંને કરે છે.

Vite ખરેખર શું કરે છે

આધુનિક વેબ app ઘણી ફાઇલોથી બને છે: components, styles, છબીઓ અને તૃતીય-પક્ષ libraries. બ્રાઉઝર એ બધું જેમ લખ્યું છે તેમ વાપરી શકતું નથી. TypeScript ને JavaScript બનવું પડે છે, React ના JSX નું રૂપાંતર કરવું પડે છે, અને Tailwind classes ને CSS માં ફેરવવા પડે છે.

Vite આ બે રીતે સંભાળે છે:

જૂનાં tools કંઈ બતાવતા પહેલાં આખી app બંડલ કરતા હતા, તેથી મોટા પ્રોજેક્ટ શરૂ કરવામાં કે અપડેટ કરવામાં લાંબો સમય લાગી શકતો. Vite ની યુક્તિ એ છે કે development દરમિયાન તે પગલું છોડી દે છે અને બ્રાઉઝરને જરૂર મુજબ ફાઇલો લોડ કરવા દે છે. Production માટે, Vite 8 થી તે Rolldown નામના bundler સાથે હજી બંડલ કરે છે, કારણ કે ઘણી નાની ફાઇલો કેટલીક ઑપ્ટિમાઇઝ્ડ ફાઇલો કરતાં મુલાકાતીઓ માટે ધીમી હોય છે.

એક કામ કરેલું ઉદાહરણ: Vite પ્રોજેક્ટમાં શું હોય છે

એક નાની 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)

અને package.json માં scripts:

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

હવે એક જ ફેરફારને અનુસરો:

1. તમે AI ને "heading ને વાદળી બનાવો" કહો છો.
2. તે App.tsx માં એક class બદલે છે.
3. Vite નોંધે છે કે ફાઇલ બદલાઈ, ફક્ત તે ફાઇલને રૂપાંતરિત કરે છે અને અપડેટ બ્રાઉઝરને મોકલે છે.
4. Preview માં heading વાદળી થઈ જાય છે, સામાન્ય રીતે એક સેકન્ડની અંદર.

જ્યારે તમે publish કરો, ત્યારે vite build dist/index.html જેવું અને dist/assets/index-a1b2c3.js જેવું કંઈક બનાવે છે. એ રેન્ડમ લાગતો ભાગ ફાઇલ નામમાં છે, જે જ્યારે સામગ્રી બદલાય ત્યારે બદલાય છે, જેથી બ્રાઉઝરો અને CDNs જૂનો કોડ સર્વ કર્યા વિના ફાઇલો લાંબા સમય સુધી cache કરી શકે.

Vite માં Environment variables

Vite ફક્ત એવા variables ને browser કોડ માટે ખુલ્લા પાડે છે જેમના નામ VITE_ થી શરૂ થાય છે, જેમ કે VITE_PUBLIC_MAP_ID. તે એક સુરક્ષા ઉપાય છે: browser કોડમાં જે કંઈ છે તે મુલાકાતીઓ જોઈ શકે છે, તેથી ગુપ્ત keys પર ક્યારેય એ prefix ન હોવો જોઈએ અને તે backend પર જ રહેવી જોઈએ. જુઓ environment variables અને secrets.

મુખ્ય શબ્દો

સામાન્ય ગેરસમજો

• "Vite એ framework છે." તે build tool છે. React, Vue કે Svelte એ framework છે; Vite તેને ચલાવે અને પેક કરે છે.
• "Vite app માં backend હોય છે." સામાન્ય Vite app ફક્ત frontend છે. Databases, logins અને ગુપ્ત keys માટે તેની સાથે server અથવા API જોઈએ.
• "Dev server ઓનલાઇન મૂકવો બરાબર છે." તે વાસ્તવિક ટ્રાફિક માટે નથી. હંમેશાં production build નું આઉટપુટ deploy કરો.
• ".env માં જે હોય તે ગુપ્ત છે." Vite app માં VITE_ variables દરેક મુલાકાતી ડાઉનલોડ કરે તે ફાઇલોમાં બેક થાય છે.
• "404 આપતું પેજ રિફ્રેશ કરવાથી app તૂટેલી છે." Single-page app માં, host એ દરેક route ને index.html પર પાછી મોકલવી જોઈએ. તે હોસ્ટિંગ સેટિંગ છે — જુઓ deploy પછી 404 errors કેવી રીતે ઠીક કરવા.

તમારા AI builder ને શું માગવું

• "આ app ફક્ત Vite (frontend) છે, કે તેનો backend પણ છે? દરેક ભાગ ક્યાં ચાલે છે?"
• "Production build ચલાવો અને publish કરતાં પહેલાં દરેક ભૂલ અથવા ચેતવણી ઠીક કરો."
• "ચકાસો કે કોઈ ગુપ્ત keys VITE_ variables માં અથવા frontend કોડમાં ક્યાંય નથી."
• "Preview ખાલી પેજ બતાવે છે — Vite અને બ્રાઉઝર console ની ભૂલો તપાસો અને કારણ ઠીક કરો." જુઓ ખાલી સફેદ પેજ કેવી રીતે ઠીક કરવું.
• "Publish પછી ફક્ત હોમ પેજ નહીં, કોઈ પણ પેજ URL રિફ્રેશ કરવાથી કામ કરે તેની ખાતરી કરો."

Mythex માં Vite

Mythex પર દરેક નવો પ્રોજેક્ટ, જ્યાં સુધી તમે Next.js, static HTML અથવા બીજો backend ન માગો, Vite પર શરૂ થાય છે. તમારા ખાનગી sandbox માંની લાઇવ Preview એજન્ટ ફાઇલો બદલે તેમ અપડેટ થાય છે, અને Publish app ને build કરીને deploy કરે છે — તમારે જાતે hosting સેટ કરવાનું નથી. જો પછીથી તમને API કે database જોઈએ, તો chat માં કહો અને Mythex Vite front end સાથે backend સેવા ઉમેરી શકે છે (multi-service apps).

પ્રશ્નો