Vite क्या है? ऐप बनाने वालों के लिए सरल गाइड

Vite (उच्चारण "veet", फ़्रेंच में "तेज़"), वेबसाइटों और वेब ऐप्स के लिए एक build tool है। आप बनाते समय यह एक development server चलाता है जो आपके बदलाव ब्राउज़र में लगभग तुरंत दिखाता है। लॉन्च के लिए तैयार होने पर यह आपके कोड को छोटी, optimise की हुई फ़ाइलों में पैक करता है जिन्हें कोई भी web host सर्व कर सके। यह मुफ़्त और open source है, और कई React, Vue और Svelte प्रोजेक्ट्स के पीछे का डिफ़ॉल्ट टूल है।

AI से बनाते समय Vite क्यों मायने रखता है

शायद आप कभी Vite कमांड न टाइप करें, पर अगर आपकी ऐप किसी AI app builder से बनी है, तो संभवतः Vite ही उसे चला रहा है। Mythex नए प्रोजेक्ट Vite + React + TypeScript + Tailwind पर शुरू करता है, जब तक आप कुछ और न माँगें (तकनीक कैसे चुनी जाती है)।

Vite के बारे में जानने से आपको ये फ़ायदे होते हैं:

• Preview समझना। वह लाइव preview जो AI फ़ाइलें बदलते समय अपडेट होता है, आमतौर पर एक Vite development server होता है।
• Deployment समझना। एक Vite ऐप सादी static फ़ाइलों का फ़ोल्डर बन जाती है: HTML, JavaScript, CSS और images, जिसे होस्ट करना सस्ता और सरल है।
• Error messages पढ़ना। जब preview में लाल error overlay या खाली पेज दिखता है, तो अक्सर Vite बता रहा होता है कि कोई फ़ाइल compile नहीं हुई।
• इसकी सीमाएँ जानना। Vite frontend बनाता है। अगर आपकी ऐप को backend चाहिए, जैसे database, गुप्त API keys, भुगतान, तो वह कहीं और चलता है। देखें frontend बनाम backend।

एक रोज़मर्रा की मिसाल

एक रेस्तराँ की रसोई के बारे में सोचिए।

• सेवा की तैयारी के दौरान (development), शेफ़ हर व्यंजन चखकर उसे बदलता रहता है। मसाला बदलें, और एक सेकंड बाद फिर चखें। यही Vite का dev server है: आप फ़ाइल बदलते हैं, पेज तुरंत अपडेट हो जाता है, अक्सर फ़ॉर्म में टाइप किया हुआ भी नहीं जाता।
• कैटरिंग ऑर्डर के लिए (production), सब कुछ पकाया जाता है, हिस्सों में बाँटा जाता है, पैक और लेबल किया जाता है ताकि वह सफ़र कर सके और कहीं भी परोसा जा सके। यही है vite build: आपका कोड बंडल होता है, छोटा होता है और ऐसे नाम पाता है जो हर होस्ट पर जा सकें।

वही रेसिपी, दो बहुत अलग तरीके, और Vite दोनों करता है।

Vite असल में क्या करता है

आधुनिक वेब ऐप कई फ़ाइलों से बनती है: components, styles, images और third-party libraries। ब्राउज़र उस सब को जैसा लिखा है वैसा नहीं समझ सकते। TypeScript को JavaScript बनना होता है, React का JSX बदलना होता है, और Tailwind की classes को CSS में बदलना होता है।

Vite यह दो तरीकों से संभालता है:

पुराने टूल कुछ दिखाने से पहले पूरी ऐप बंडल कर देते थे, इसलिए बड़ी परियोजना शुरू करने या अपडेट करने में बहुत समय लगता था। Vite की चाल यह है कि development में यह प्रक्रिया छोड़ दी जाती है और ब्राउज़र ज़रूरत पड़ने पर फ़ाइलें लोड करता है। Production के लिए, Vite 8 से, Rolldown नाम के bundler के साथ, यह अब भी बंडल करता है, क्योंकि बहुत सारी छोटी फ़ाइलें कुछ optimise की हुई फ़ाइलों से विज़िटर के लिए धीमी होती हैं।

एक उदाहरण: Vite प्रोजेक्ट के अंदर क्या है

एक छोटी Vite + React ऐप लगभग ऐसी दिखती है:

my-app/
  index.html          ← वह एक HTML पेज जहाँ से ऐप शुरू होती है
  package.json        ← libraries और scripts (dev, build) की सूची
  vite.config.ts      ← Vite सेटिंग्स और plugins
  src/
    main.tsx          ← React शुरू करता है और उसे index.html में माउंट करता है
    App.tsx           ← आपकी ऐप का सबसे ऊपर का component
    index.css         ← styles, जैसे @import "tailwindcss";
  public/             ← फ़ाइलें जो जैसी हैं वैसी कॉपी होती हैं (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। फ़ाइल नाम का वह दिखने में यादृच्छिक हिस्सा तब बदलता है जब सामग्री बदलती है, ताकि browsers और CDNs पुराना कोड परोसे बिना फ़ाइलों को लंबे समय तक cache कर सकें।

Vite में environment variables

Vite केवल वे variables ब्राउज़र कोड को देता है जिनके नाम VITE_ से शुरू होते हैं, जैसे VITE_PUBLIC_MAP_ID। यह सुरक्षा का उपाय है: ब्राउज़र कोड में जो भी है, उसे विज़िटर देख सकते हैं, इसलिए गुप्त keys पर यह prefix कभी नहीं होना चाहिए और उन्हें backend पर ही रहना चाहिए। देखें environment variables और secrets।

मुख्य शब्द

आम गलतफ़हमियाँ

• "Vite एक framework है।" यह build tool है। React, Vue या Svelte framework है; Vite उसे चलाता और पैक करता है।
• "Vite ऐप में backend भी होता है।" एक मानक Vite ऐप केवल frontend है। Databases, लॉगिन और गुप्त keys के लिए उसके साथ एक server या API चाहिए।
• "Dev server को online रखना ठीक है।" यह असली ट्रैफ़िक के लिए नहीं बना है। हमेशा production build का आउटपुट deploy करें।
• ".env में जो भी है वह गुप्त है।" Vite ऐप में VITE_ variables हर विज़िटर की डाउनलोड की गई फ़ाइलों में बेक हो जाते हैं।
• "deploy के बाद किसी पेज पर 404 आए तो ऐप टूटी है।" Single-page app में होस्ट को हर route को index.html पर भेजना होता है। यह होस्टिंग सेटिंग है; देखें deploy के बाद 404 errors कैसे ठीक करें।

AI builder से क्या माँगें

• "क्या यह ऐप केवल Vite frontend है, या इसका backend भी है? हर हिस्सा कहाँ चलता है?"
• "Production build चलाएँ और publish करने से पहले हर error और warning ठीक करें।"
• "जाँचें कि कोई भी गुप्त key VITE_ variables में या frontend कोड में कहीं न हो।"
• "Preview में खाली पेज दिख रहा है, तो Vite और browser console के errors देखें और कारण ठीक करें।" देखें खाली सफ़ेद पेज कैसे ठीक करें।
• "Publish के बाद सुनिश्चित करें कि किसी भी पेज URL को रिफ़्रेश करना काम करे, सिर्फ़ होम पेज नहीं।"

Mythex में Vite

हर नई Mythex प्रोजेक्ट Vite पर शुरू होती है, जब तक आप Next.js, static HTML या कोई अलग backend न माँगें। आपके निजी sandbox में लाइव Preview एजेंट के फ़ाइलें बदलने के साथ अपडेट होता है, और Publish ऐप बनाकर deploy करता है; आपको खुद कोई होस्टिंग सेट नहीं करनी पड़ती। बाद में अगर आपको API या database चाहिए, तो चैट में माँगें और Mythex Vite frontend के साथ एक backend service जोड़ सकता है (multi-service apps)।

सवाल