Vite কী? অ্যাপ নির্মাতাদের জন্য সহজ গাইড

Vite (উচ্চারণ "ভিট", ফরাসি শব্দ "quick"-এর মতো) ওয়েবসাইট ও ওয়েব অ্যাপের জন্য একটি বিল্ড টুল। আপনি বানানোর সময় এটি একটি ডেভেলপমেন্ট সার্ভার চালায়, যা ব্রাউজারে আপনার পরিবর্তন প্রায় সঙ্গে সঙ্গে দেখায়। লঞ্চের জন্য প্রস্তুত হলে এটি আপনার কোডকে ছোট, অপ্টিমাইজড ফাইলে প্যাকেজ করে, যা যেকোনো ওয়েব হোস্ট পরিবেশন করতে পারে। এটি বিনামূল্যে, ওপেন সোর্স, এবং অনেক React, Vue ও Svelte প্রজেক্টের ডিফল্ট টুল।

এআই দিয়ে বানানোর সময় Vite কেন গুরুত্বপূর্ণ

আপনি হয়তো কখনো Vite কমান্ড টাইপ করবেন না, কিন্তু আপনার অ্যাপ যদি কোনো এআই অ্যাপ বিল্ডার দিয়ে বানানো হয়, তবে সম্ভবত Vite-ই সেটি চালাচ্ছে। Mythex নতুন প্রজেক্ট শুরু করে Vite + React + TypeScript + Tailwind দিয়ে, যদি আপনি অন্য কিছু না চান (প্রযুক্তি কীভাবে বাছা হয়)।

Vite কী করে জানলে আপনার সুবিধা হয়:

• Preview বোঝা। এআই ফাইল বদলালে যে লাইভ প্রিভিউ আপডেট হয়, সেটি সাধারণত একটি Vite ডেভেলপমেন্ট সার্ভার।
• ডিপ্লয়মেন্ট বোঝা। একটি Vite অ্যাপ স্ট্যাটিক ফাইলের একটি ফোল্ডারে পরিণত হয় — HTML, JavaScript, CSS ও ছবি — যা হোস্ট করা সস্তা ও সহজ।
• ত্রুটির বার্তা পড়া। প্রিভিউতে লাল ত্রুটির ওভারলে বা ফাঁকা পেজ দেখালে প্রায়ই Vite জানাচ্ছে যে একটি ফাইল কম্পাইল হয়নি।
• এর সীমা জানা। Vite ফ্রন্টএন্ড বানায়। অ্যাপের যদি ব্যাকএন্ড লাগে — ডেটাবেস, গোপন API কী, পেমেন্ট — তা অন্য কোথাও চলে। দেখুন ফ্রন্টএন্ড বনাম ব্যাকএন্ড।

একটি দৈনন্দিন উদাহরণ

একটি রেস্তোরাঁর রান্নাঘরের কথা ভাবুন।

• প্রস্তুতির সময় (ডেভেলপমেন্ট), শেফ প্রতিটি পদ চেখে দেখে ও সামঞ্জস্য করে। মসলা বদলান, এক সেকেন্ড পরে আবার চেখে দেখেন। এটাই Vite-এর ডেভ সার্ভার: আপনি একটি ফাইল বদলান, পেজ সাথে সাথে আপডেট হয়, প্রায়ই ফর্মে যা লিখেছিলেন তা না হারিয়েই।
• ক্যাটারিং অর্ডারের জন্য (প্রোডাকশন), সবকিছু রান্না, ভাগ, প্যাক ও লেবেল করা হয়, যাতে তা ভালোভাবে যায় এবং যেকোনো জায়গায় পরিবেশন করা যায়। এটাই vite build: আপনার কোড বান্ডেল, ছোট ও ফিঙ্গারপ্রিন্টযুক্ত হয়ে যেকোনো হোস্টের জন্য প্রস্তুত ফাইল হয়।

একই রেসিপি, দুটি ভিন্ন উপায়ে — এবং Vite দুটোই করে।

Vite আসলে কী করে

একটি আধুনিক ওয়েব অ্যাপ অনেক ফাইল দিয়ে তৈরি: কম্পোনেন্ট, স্টাইল, ছবি এবং তৃতীয়-পক্ষের লাইব্রেরি। ব্রাউজার সবকিছু যেমন লেখা আছে তেমনভাবে ব্যবহার করতে পারে না। TypeScriptকে JavaScript হতে হয়, React-এর JSX-কে রূপান্তর করতে হয়, এবং Tailwind-এর ক্লাসগুলোকে CSS-এ পরিণত করতে হয়।

Vite এটি দুই মোডে করে:

পুরোনো টুলগুলো কিছু দেখানোর আগে পুরো অ্যাপ বান্ডেল করত, তাই বড় প্রজেক্ট শুরু বা আপডেট হতে অনেক সময় লাগত। Vite-এর কৌশল হলো ডেভেলপমেন্টের সময় সেটি এড়ানো এবং ব্রাউজারকে প্রয়োজনমতো ফাইল লোড করতে দেওয়া। প্রোডাকশনের জন্য এটি এখনো বান্ডেল করে — Vite 8 থেকে Rolldown নামের একটি বান্ডলার দিয়ে — কারণ দর্শকের জন্য অনেক ছোট ফাইলের চেয়ে কয়েকটি অপ্টিমাইজড ফাইল দ্রুত।

একটি বাস্তব উদাহরণ: একটি Vite প্রজেক্টের ভেতরে কী থাকে

একটি ছোট Vite + React অ্যাপ দেখতে প্রায় এমন:

my-app/
  index.html          ← যে একক HTML পেজ থেকে অ্যাপ শুরু হয়
  package.json        ← লাইব্রেরি ও স্ক্রিপ্টের তালিকা (dev, build)
  vite.config.ts      ← Vite সেটিং ও প্লাগইন
  src/
    main.tsx          ← React শুরু করে এবং index.html-এ মাউন্ট করে
    App.tsx           ← আপনার অ্যাপের শীর্ষ-স্তরের কম্পোনেন্ট
    index.css         ← স্টাইল, যেমন @import "tailwindcss";
  public/             ← যেমন আছে তেমনই কপি হয় (favicon, robots.txt)

এবং package.json-এর স্ক্রিপ্টগুলো:

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

এখন একটি একক পরিবর্তন অনুসরণ করুন:

1. আপনি এআইকে বলেন "শিরোনামটি নীল করো"।
2. এটি App.tsx-এ একটি ক্লাস বদলায়।
3. Vite লক্ষ্য করে ফাইলটি বদলেছে, শুধু সেই ফাইলটি রূপান্তর করে এবং আপডেট ব্রাউজারে পাঠায়।
4. প্রিভিউতে শিরোনামটি নীল হয়, সাধারণত এক সেকেন্ডের মধ্যে।

প্রকাশ করার সময় vite build dist/index.html এবং dist/assets/index-a1b2c3.js-এর মতো কিছু তৈরি করে। ফাইলের নামের এলোমেলো দেখানো অংশটি কনটেন্ট বদলালে বদলায়, তাই ব্রাউজার ও CDN পুরনো কোড না দিয়ে দীর্ঘ সময় ফাইল ক্যাশ করতে পারে।

Vite-এ এনভায়রনমেন্ট ভেরিয়েবল

Vite শুধু সেই ভেরিয়েবলগুলো ব্রাউজার কোডে উন্মুক্ত করে যাদের নাম VITE_ দিয়ে শুরু, যেমন VITE_PUBLIC_MAP_ID। এটি একটি নিরাপত্তা ব্যবস্থা: ব্রাউজার কোডে যা থাকে তা দর্শকেরা দেখতে পায়, তাই গোপন কী-র নাম কখনো এই প্রিফিক্সে থাকবে না এবং সেগুলো অবশ্যই ব্যাকএন্ডে থাকবে। দেখুন এনভায়রনমেন্ট ভেরিয়েবল ও সিক্রেট।

মূল পরিভাষা

সাধারণ ভুল ধারণা

• "Vite একটি ফ্রেমওয়ার্ক।" এটি একটি বিল্ড টুল। React, Vue বা Svelte হলো ফ্রেমওয়ার্ক; Vite সেটি চালায় ও প্যাকেজ করে।
• "একটি Vite অ্যাপে ব্যাকএন্ড থাকে।" একটি সাধারণ Vite অ্যাপ শুধু ফ্রন্টএন্ড। ডেটাবেস, লগইন ও গোপন কী-এর জন্য পাশে একটি সার্ভার বা API লাগে।
• "ডেভ সার্ভার অনলাইনে রাখা ঠিক।" এটি আসল ট্রাফিকের জন্য নয়। সবসময় প্রোডাকশন বিল্ডের আউটপুট ডিপ্লয় করুন।
• ".env-এর সবকিছু গোপন।" একটি Vite অ্যাপে VITE_ ভেরিয়েবলগুলো প্রতিটি দর্শকের ডাউনলোড করা ফাইলে বসে যায়।
• "একটি পেজ URL-এ ৪০৪ দেখালে অ্যাপ ভাঙা।" একটি single-page অ্যাপে হোস্টকে প্রতিটি রুট index.html-এ ফেরত পাঠাতে হয়। এটি হোস্টিং সেটিং — দেখুন ডিপ্লয়ের পর ৪০৪ ত্রুটি কীভাবে ঠিক করবেন।

আপনার এআই বিল্ডারকে কী চাইবেন

• "এই অ্যাপটি কি শুধু Vite-ভিত্তিক (ফ্রন্টএন্ড), নাকি এর ব্যাকএন্ডও আছে? প্রতিটি অংশ কোথায় চলে?"
• "প্রকাশের আগে প্রোডাকশন বিল্ড চালাও এবং সব ত্রুটি বা সতর্কতা ঠিক করো।"
• "নিশ্চিত করো যে কোনো গোপন কী VITE_ ভেরিয়েবলে বা ফ্রন্টএন্ড কোডের কোথাও নেই।"
• "প্রিভিউতে ফাঁকা পেজ দেখাচ্ছে — Vite ও ব্রাউজার কনসোলের ত্রুটি দেখে কারণ ঠিক করো।" দেখুন ফাঁকা সাদা পেজ কীভাবে ঠিক করবেন।
• "প্রকাশের পর শুধু হোমপেজ নয়, যেকোনো পেজের URL রিফ্রেশ করলেও কাজ করে তা নিশ্চিত করো।"

Mythex-এ Vite

আপনি Next.js, স্ট্যাটিক HTML বা অন্য ব্যাকএন্ড না চাইলে প্রতিটি নতুন Mythex প্রজেক্ট Vite দিয়ে শুরু হয়। আপনার ব্যক্তিগত স্যান্ডবক্সের লাইভ Preview এজেন্ট ফাইল বদলালে আপডেট হয়, এবং Publish অ্যাপ বিল্ড করে ডিপ্লয় করে — নিজে হোস্টিং সেটআপ করতে হয় না। পরে যদি একটি API বা ডেটাবেস লাগে, চ্যাটে বলুন এবং Mythex Vite ফ্রন্ট এন্ডের পাশে একটি ব্যাকএন্ড সার্ভিস যোগ করতে পারে (মাল্টি-সার্ভিস অ্যাপ)।

প্রশ্নোত্তর