Vite کیا ہے؟ ایپ بنانے والوں کے لیے آسان زبان میں گائیڈ

Vite (تلفظ “veet”، فرانسیسی میں ‘quick’) ویب سائٹس اور ویب ایپس کے لیے ایک build ٹول ہے۔ آپ کے بناتے وقت یہ ایک development server چلاتا ہے جو آپ کی تبدیلیاں براؤزر میں تقریباً فوراً دکھاتا ہے۔ جب آپ لانچ کے لیے تیار ہوں تو یہ آپ کے کوڈ کو چھوٹی، بہتر فائلوں میں پیک کرتا ہے جنہیں کوئی بھی ویب ہوسٹ پیش کر سکتا ہے۔ یہ مفت ہے، اوپن سورس ہے، اور بہت سے React، Vue اور Svelte پروجیکٹس کے پیچھے ڈیفالٹ ٹول ہے۔

AI کے ساتھ بناتے وقت Vite کیوں اہم ہے

ہو سکتا ہے آپ نے کبھی Vite کی کمانڈ نہ لکھی ہو، لیکن اگر آپ کی ایپ AI ایپ بلڈر سے بنی ہے تو غالباً اسے Vite ہی چلا رہا ہے۔ Mythex نئے پروجیکٹس Vite + React + TypeScript + Tailwind پر شروع کرتا ہے، جب تک آپ کچھ اور نہ مانگیں (ٹیک کیسے چنی جاتی ہے)۔

Vite کیا کرتا ہے یہ جاننا آپ کی مدد کرتا ہے:

• پریویو کو سمجھیں۔ لائیو پریویو جو AI کے فائلیں بدلنے کے ساتھ اپ ڈیٹ ہوتا ہے، عموماً ایک Vite development server ہوتا ہے۔
• ڈیپلائمنٹ کو سمجھیں۔ Vite ایپ static فائلوں کا فولڈر بن جاتی ہے — HTML، JavaScript، CSS اور تصاویر — جو ہوسٹ کرنا سستا اور سادہ ہے۔
• ایرر پیغامات پڑھیں۔ جب پریویو میں سرخ ایرر اوورلے یا خالی صفحہ دکھے تو اکثر یہ Vite کی طرف سے اطلاع ہوتی ہے کہ کوئی فائل کمپائل نہیں ہو سکی۔
• اس کی حدیں جانیں۔ Vite frontend بناتا ہے۔ اگر آپ کی ایپ کو backend درکار ہو — ڈیٹا بیس، خفیہ API keys، ادائیگیاں — تو وہ کہیں اور چلتا ہے۔ دیکھیں frontend بمقابلہ backend۔

روزمرہ کی ایک مثال

ایک ریسٹورنٹ کے کچن کا تصور کریں۔

• سروس کی تیاری کے دوران (development)، شیف ہر ڈش کو چکھتا اور ساتھ ساتھ ٹھیک کرتا ہے۔ مسالہ بدلیں، ایک سیکنڈ بعد دوبارہ چکھیں۔ یہی Vite کا dev server ہے: آپ فائل بدلتے ہیں، صفحہ فوراً اپ ڈیٹ ہو جاتا ہے، اکثر فارم میں لکھا ہوا متن بھی ضائع کیے بغیر۔
• کیٹرنگ آرڈر کے لیے (production)، سب کچھ پکایا جاتا، حصوں میں بانٹا جاتا، پیک اور لیبل کیا جاتا ہے تاکہ وہ سفر کر سکے اور کہیں بھی پیش ہو سکے۔ یہی vite build ہے: آپ کا کوڈ bundle، سکڑا ہوا اور fingerprinted فائلوں میں بدل جاتا ہے جو کسی بھی ہوسٹ کے لیے تیار ہوں۔

ایک ہی ترکیبیں، دو بالکل مختلف طریقے — اور Vite دونوں کرتا ہے۔

Vite اصل میں کیا کرتا ہے

ایک جدید ویب ایپ بہت سی فائلوں سے بنتی ہے: کمپوننٹس، اسٹائلز، تصاویر اور تیسرے فریق کی لائبریریاں۔ براؤزر یہ سب جیسا لکھا ہو ویسا استعمال نہیں کر سکتے۔ TypeScript کو JavaScript بننا ہوتا ہے، React کا JSX بدلنا ہوتا ہے، اور Tailwind کی کلاسز کو CSS میں بدلنا ہوتا ہے۔

Vite یہ دو موڈز میں سنبھالتا ہے:

پرانے ٹولز کچھ دکھانے سے پہلے پوری ایپ bundle کر دیتے تھے، اس لیے بڑے پروجیکٹ کو شروع کرنے یا اپ ڈیٹ کرنے میں کافی وقت لگتا تھا۔ Vite کی ترکیب یہ ہے کہ development میں یہ مرحلہ چھوڑ دیا جائے اور براؤزر کو ضرورت کے مطابق فائلیں لوڈ کرنے دیا جائے۔ پروڈکشن کے لیے یہ اب بھی bundle کرتا ہے — Vite 8 سے ایک bundler کے ساتھ جسے Rolldown کہتے ہیں — کیونکہ وزیٹرز کے لیے بہت سی چھوٹی فائلیں چند بہتر فائلوں سے سست ہوتی ہیں۔

عملی مثال: ایک Vite پروجیکٹ کے اندر کیا ہے

ایک چھوٹی Vite + React ایپ کچھ یوں دکھتی ہے:

my-app/
  index.html          ← وہ واحد HTML صفحہ جس سے ایپ شروع ہوتی ہے
  package.json        ← لائبریریوں اور اسکرپٹس (dev، build) کی فہرست
  vite.config.ts      ← Vite کی سیٹنگز اور plugins
  src/
    main.tsx          ← React شروع کرتا ہے اور اسے index.html میں mount کرتا ہے
    App.tsx           ← آپ کی ایپ کا اوپر کی سطح کا کمپوننٹ
    index.css         ← اسٹائلز، مثلاً @import "tailwindcss";
  public/             ← جوں کی توں کاپی ہونے والی فائلیں (favicon، robots.txt)

اور package.json میں اسکرپٹس:

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

اب ایک تبدیلی کو قدم بہ قدم دیکھیں:

1. آپ AI سے کہتے ہیں “heading کو نیلا کر دو”۔
2. وہ App.tsx میں ایک کلاس بدلتا ہے۔
3. Vite دیکھتا ہے کہ فائل بدل گئی، صرف اس فائل کو تبدیل کرتا ہے اور اپ ڈیٹ براؤزر کو بھیجتا ہے۔
4. پریویو میں heading عموماً ایک سیکنڈ کے اندر نیلی ہو جاتی ہے۔

جب آپ پبلش کرتے ہیں تو vite build کچھ ایسا بناتا ہے جیسے dist/index.html اور dist/assets/index-a1b2c3.js۔ فائل نام کا بے ترتیب دکھنے والا حصہ مواد بدلنے پر بدل جاتا ہے، تاکہ براؤزرز اور CDNs فائلوں کو طویل عرصے تک کیش کر سکیں بغیر پرانا کوڈ پیش کیے۔

Vite میں Environment variables

Vite صرف ان variables کو براؤزر کوڈ کے لیے دکھاتا ہے جن کے نام VITE_ سے شروع ہوں، جیسے VITE_PUBLIC_MAP_ID۔ یہ حفاظتی اقدام ہے: براؤزر کوڈ میں جو کچھ ہے وہ وزیٹرز دیکھ سکتے ہیں، اس لیے خفیہ keys پر یہ prefix کبھی نہیں ہونا چاہیے اور انہیں backend پر ہی رہنا چاہیے۔ دیکھیں environment variables اور secrets۔

اہم اصطلاحات

عام غلط فہمیاں

• “Vite ایک فریم ورک ہے۔” یہ ایک build ٹول ہے۔ فریم ورک React، Vue یا Svelte ہے؛ Vite اسے چلاتا اور پیک کرتا ہے۔
• “Vite ایپ میں backend شامل ہوتا ہے۔” معیاری Vite ایپ صرف frontend ہے۔ ڈیٹا بیس، لاگ اِنز اور خفیہ keys کے لیے اس کے ساتھ سرور یا API درکار ہے۔
• “dev server کو آن لائن رکھنا ٹھیک ہے۔” یہ اصل ٹریفک کے لیے نہیں بنا۔ ہمیشہ production build کا آؤٹ پٹ ڈیپلائے کریں۔
• “.env میں کوئی بھی چیز خفیہ ہے۔” Vite ایپ میں VITE_ variables ان فائلوں میں شامل ہو جاتے ہیں جو ہر وزیٹر ڈاؤن لوڈ کرتا ہے۔
• “404 دینے والے صفحے کو ریفریش کرنا ایپ کے خراب ہونے کا مطلب ہے۔” single-page app میں ہوسٹ کو ہر راستہ index.html کی طرف واپس بھیجنا ہوتا ہے۔ یہ ہوسٹنگ کی سیٹنگ ہے — دیکھیں ڈیپلائ کے بعد 404 غلطیاں کیسے ٹھیک کریں۔

اپنے AI بلڈر سے کیا مانگیں

• “کیا یہ ایپ صرف Vite (frontend) ہے، یا اس کا backend بھی ہے؟ ہر حصہ کہاں چلتا ہے؟”
• “production build چلائیں اور پبلش کرنے سے پہلے ہر غلطی یا وارننگ ٹھیک کریں۔”
• “یقینی بنائیں کہ کوئی خفیہ key VITE_ variables میں یا frontend کوڈ میں کہیں نہ ہو۔”
• “پریویو خالی صفحہ دکھاتا ہے — Vite اور براؤزر کنسول کی غلطیاں چیک کریں اور وجہ ٹھیک کریں۔” دیکھیں خالی سفید صفحہ کیسے ٹھیک کریں۔
• “پبلش کے بعد یقینی بنائیں کہ کسی بھی صفحے کے URL کو ریفریش کرنا کام کرے، صرف ہوم پیج ہی نہیں۔”

Mythex میں Vite

ہر نیا Mythex پروجیکٹ Vite پر شروع ہوتا ہے، جب تک آپ Next.js، static HTML یا کوئی مختلف backend نہ مانگیں۔ آپ کے نجی sandbox میں لائیو Preview ایجنٹ کے فائلیں بدلنے کے ساتھ اپ ڈیٹ ہوتا ہے، اور Publish ایپ کو build کر کے ڈیپلائے کرتا ہے — آپ کو خود کوئی ہوسٹنگ سیٹ اپ نہیں کرنی۔ اگر بعد میں آپ کو API یا ڈیٹا بیس چاہیے تو چیٹ میں کہیں، اور Mythex Vite frontend کے ساتھ ایک backend سروس شامل کر سکتا ہے (multi-service ایپس)۔

سوالات