Build Tools (Vite) Cheat Sheet – Complete Guide in Hindi

Modern frontend development में सिर्फ HTML, CSS और JavaScript लिखना ही काफी नहीं होता। बड़े projects में modules, dependencies, assets और production files को manage करने के लिए build tools की जरूरत पड़ती है।

Vite एक modern frontend build tool है, जो fast development server, Hot Module Replacement (HMR) और production build जैसी सुविधाएँ देता है।

इस Cheat Sheet में आप सीखेंगे कि Vite क्या है, React project में इसे कैसे use करें, npm scripts कैसे काम करती हैं, environment variables कैसे configure करते हैं और production build को deploy कैसे करते हैं।

Build Tool क्या होता है?#

Build tool ऐसा software है जो application को develop, prepare और production के लिए package करने में मदद करता है।

Frontend project में build tool का उपयोग JavaScript modules, CSS, images और दूसरी assets को process करने के लिए किया जा सकता है।

Build Tools क्यों जरूरी हैं?

मान लीजिए आपने एक frontend application बनाई है जिसमें कई JavaScript files, CSS files, images और external libraries हैं।

Build tool इन resources को manage करने, development को आसान बनाने और production-ready output तैयार करने में मदद करता है।

Common benefits:

• Development server चलाना।
• Changes को browser में जल्दी reflect करना।
• JavaScript और CSS assets process करना।
• Dependencies resolve करना।
• Production build generate करना।
• Assets के URLs और output files manage करना।

Examples of build tools include Vite, Webpack, Rollup और esbuild। इनके features और workflows अलग-अलग हो सकते हैं।

Vite क्या है?#

Vite एक frontend build tool है जिसे modern web development को fast और simple बनाने के लिए design किया गया है।

Vite की दो important responsibilities हैं:

1. Development: Local development server चलाना और changes को जल्दी browser तक पहुँचाना।
2. Production: Application के लिए optimized build output generate करना।

Vite JavaScript frameworks के साथ काम कर सकता है, जैसे React और Vue। इसे plain HTML, CSS और JavaScript projects में भी use किया जा सकता है।

Official website: https://vite.dev/

Vite कैसे काम करता है?#

Development के दौरान Vite native JavaScript modules और browser capabilities का उपयोग करके source code serve करता है। Production के समय यह application को build करके deploy करने योग्य output तैयार करता है।

Simplified flow:

Developer writes code
        |
        v
Vite Development Server
        |
        v
Browser loads modules
        |
        v
Developer changes code
        |
        v
HMR updates the page

Production workflow:

Source Code
    |
    v
npm run build
    |
    v
Vite Production Build
    |
    v
dist/ Directory
    |
    v
Deploy to Hosting

यह simplified overview है। Actual build process project configuration, plugins और framework के अनुसार अलग हो सकता है।

Vite Project कैसे बनाएँ?#

Vite के साथ नया project बनाने के लिए Node.js और npm installed होने चाहिए।

Versions और system requirements के लिए Vite Getting Started Guide check करें।

Step 1: React Project Create करें

Terminal में चलाएँ:

npm create vite@latest my-app -- --template react

यह command my-app नाम का React project scaffold करती है।

TypeScript template के लिए:

npm create vite@latest my-app -- --template react-ts

अगर plain JavaScript project चाहिए:

npm create vite@latest my-app -- --template vanilla

Template options और prompts समय के साथ बदल सकते हैं। उपलब्ध templates की current list official documentation में देखें।

Step 2: Project Directory में जाएँ

cd my-app

Step 3: Dependencies Install करें

npm install

यह project की dependencies install करता है।

Step 4: Development Server Start करें

npm run dev

Terminal में Vite local development URL दिखाएगा। Default URL आमतौर पर http://localhost:5173 होता है, लेकिन अगर port busy हो या configuration अलग हो, तो URL बदल सकता है।

Vite Project Structure#

एक basic React + Vite project की structure कुछ इस तरह दिख सकती है:

my-app/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── App.jsx
│   ├── App.css
│   └── main.jsx
├── index.html
├── package.json
├── package-lock.json
└── vite.config.js

यह एक illustrative structure है। Template और project requirements के अनुसार files अलग हो सकती हैं।

Important: Vite project में index.html project root में होता है। यह Vite के लिए application entry point का हिस्सा है, न कि केवल public assets की तरह copy होने वाली file।

Vite के Important npm Commands#

npm run dev, npm run build और npm run preview project के package.json में configured scripts पर depend करते हैं।

package.json में Vite Scripts#

Vite project में package.json के scripts section में आमतौर पर ये commands मिलती हैं:

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

इनका purpose:

• dev — local development server start करना।
• build — production build generate करना।
• preview — generated production build को locally check करना।

अगर React template में extra scripts या dependencies हैं, तो उन्हें अपने project की जरूरत के अनुसार रखें।

Vite Development Server#

Development server वह local server है जिस पर आप development के दौरान application चलाते हैं।

Command:

npm run dev

इसके बाद terminal में printed URL browser में खोलें।

Port Change कैसे करें?

अगर default port पहले से use हो रहा है, तो आप दूसरा port specify कर सकते हैं:

npm run dev -- --port 3000

यहाँ पहला -- npm को बताता है कि इसके बाद वाले arguments script को pass करने हैं।

अगर आप चाहते हैं कि port busy होने पर Vite automatically दूसरा port न चुने, तो:

npm run dev -- --port 3000 --strictPort

अगर port 3000 उपलब्ध नहीं है, तो Vite error देगा।

Network पर Server Access करना

कभी-कभी आपको mobile या दूसरे device से local development server test करना होता है।

npm run dev -- --host 0.0.0.0

यह server को network interfaces पर listen करने के लिए configure करता है। इसका उपयोग केवल trusted network और उचित firewall settings के साथ करें।

HMR (Hot Module Replacement) क्या है?#

HMR का पूरा नाम Hot Module Replacement है।

जब आप development के दौरान source file में बदलाव करते हैं, तो Vite updated module को browser तक पहुँचाने में मदद करता है। इससे अक्सर पूरा page reload किए बिना changes दिखाई देते हैं।

Example:

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("Developer"));

अगर आप greeting text बदलते हैं और file save करते हैं, तो development environment update दिखा सकता है।

HMR का exact behavior framework, plugin और type of change पर depend करता है। कुछ changes पर full page reload भी हो सकता है।

याद रखें: HMR development सुविधा है। यह production application की runtime feature नहीं है।

Vite में Assets कैसे Handle करें?#

Vite project में images, fonts और दूसरे static assets रखने के दो common approaches हैं।

1. Source Files से Assets Import करना

मान लीजिए आपकी image src/assets/logo.png में है।

import logoUrl from "./assets/logo.png";

const image = document.querySelector("#logo");

image.src = logoUrl;

यह example उस JavaScript file से relative path मानता है जिसमें import लिखा गया है। HTML में id="logo" वाला element भी मौजूद होना चाहिए।

Vite build के दौरान imported assets को process कर सकता है और production output में उनके URLs बदल सकता है।

2. public Directory का उपयोग करना

ऐसी files जिन्हें exact filename के साथ रखना हो, उन्हें public/ directory में रखा जा सकता है।

Example:

public/
└── favicon.ico

HTML में reference:

<link rel="icon" href="/favicon.ico" />

public directory की files सामान्यतः production output की root में copy होती हैं।

Assets के लिए कौन-सा तरीका चुनें?

अधिकांश imported assets के लिए source imports preferred हैं। public/ उन cases के लिए उपयोगी है जहाँ exact filename या direct public path की जरूरत हो।

Vite Environment Variables#

Environment variables की मदद से application configuration को source code से अलग रखा जा सकता है।

Vite client-side code में environment variables को import.meta.env के माध्यम से expose करता है।

.env File

Project root में .env file बनाएँ:

VITE_APP_NAME=The Easy Master
VITE_API_BASE_URL=https://api.example.com

JavaScript में इन्हें access करें:

console.log(import.meta.env.VITE_APP_NAME);
console.log(import.meta.env.VITE_API_BASE_URL);

Vite variables को strings के रूप में expose करता है। अगर किसी value को number या boolean चाहिए, तो उसे validate और convert करें।

VITE_ Prefix क्यों जरूरी है?

Vite में client-side code के लिए expose होने वाली custom environment variables का default prefix VITE_ है।

Example:

VITE_APP_NAME=The Easy Master
DB_PASSWORD=secret-value

Client-side application में:

console.log(import.meta.env.VITE_APP_NAME);
console.log(import.meta.env.DB_PASSWORD);

पहली variable expose हो सकती है, जबकि दूसरी default configuration में expose नहीं होती।

Security warning: VITE_ prefix वाली values build output में शामिल हो सकती हैं। इनमें database passwords, private API keys या दूसरे secrets न रखें। Frontend में इस्तेमाल होने वाली values को public मानकर चलें।

Common Environment Files

Local-only environment files को repository में commit करने से बचें, खासकर जब उनमें sensitive values हों।

Environment files बदलने के बाद development server restart करना पड़ सकता है।

import.meta.env के Useful Variables#

Vite कुछ built-in environment values provide करता है।

console.log(import.meta.env.MODE);
console.log(import.meta.env.DEV);
console.log(import.meta.env.PROD);
console.log(import.meta.env.BASE_URL);

इन values को application में conditional behavior या URL handling के लिए use किया जा सकता है।

Vite Configuration क्या है?#

Vite configuration file में project की build और development settings define की जा सकती हैं।

Default configuration file का नाम अक्सर vite.config.js होता है। TypeScript configuration के लिए vite.config.ts भी use किया जा सकता है।

Example:

import { defineConfig } from "vite";

export default defineConfig({
  server: {
    port: 3000,
    strictPort: true
  },
  build: {
    outDir: "dist"
  }
});

इस configuration में:

• server.port development server का port set करता है।
• server.strictPort busy port होने पर दूसरे port पर switch होने से रोकता है।
• build.outDir production output directory set करता है।

यह basic example है। React या अन्य framework projects में जरूरी plugins और configuration अपने template के अनुसार रखें।

Production Build कैसे बनाएँ?#

Development server और production build का purpose अलग है।

Development server coding और testing के लिए होता है। Production build deploy करने के लिए तैयार files generate करती है।

Build command:

npm run build

Default configuration में output dist/ directory में generate होता है।

Example structure:

dist/
├── assets/
├── index.html
└── ...

Actual output files application, assets और build configuration पर depend करती हैं।

Production Build को Locally Check करना

Build के बाद चलाएँ:

npm run preview

Vite production output को locally serve करेगा और terminal में preview URL दिखाएगा।

Important: vite preview production hosting server का replacement नहीं है। इसका मुख्य purpose locally generated build को verify करना है।

Vite App Deploy कैसे करें?#

Vite की सामान्य static build को static hosting या web server पर deploy किया जा सकता है।

Basic workflow:

1. Project dependencies install करें।
2. Production build generate करें।
3. dist/ directory की files check करें।
4. Files को hosting पर upload या deploy करें।
5. Production URL पर routes, assets और API requests test करें।

Command:

npm ci
npm run build

यह workflow तब उपयुक्त है जब project में compatible package-lock.json मौजूद हो।

Subdirectory में Deploy करना

अगर application domain root पर नहीं बल्कि किसी subdirectory में deploy हो रही है, तो Vite की base configuration जरूरी हो सकती है।

Example:

import { defineConfig } from "vite";

export default defineConfig({
  base: "/my-app/"
});

यह configuration उस स्थिति का example है जहाँ app /my-app/ path पर serve होगी।

गलत base path होने पर CSS, JavaScript और images load नहीं हो सकतीं। Hosting path के अनुसार इसे set करें।

Vite और Webpack में अंतर#

दोनों frontend tooling ecosystem के महत्वपूर्ण हिस्से हैं, लेकिन उनके development workflows और configuration approaches अलग हैं।

हर project के लिए एक ही tool best नहीं होता। Existing infrastructure, plugins, build requirements और team experience के आधार पर decision लें।

Vite और npm में अंतर#

Example:

npm install
npm run dev
npm run build

यहाँ npm dependencies install करता है और scripts run करता है। Vite development server या production build का actual काम करता है।

Common Vite Errors और Fixes#

1. npm run dev काम नहीं कर रहा

Possible reasons:

• Dependencies install नहीं हैं।
• package.json में dev script नहीं है।
• आप गलत directory में हैं।

Fix:

npm install
npm run

Check करें कि आप सही project directory में हैं और dev script available है।

2. Port Already in Use

अगर configured port busy है, तो server start नहीं हो सकता, खासकर जब strictPort enabled हो।

Fix:

npm run dev -- --port 3001

या existing process को safely stop करें।

3. Environment Variable undefined है

Possible reasons:

• Variable में VITE_ prefix नहीं है।
• .env file गलत location पर है।
• Variable name में typo है।
• Server restart नहीं किया गया।

Fix: File location, prefix और exact variable name check करें, फिर dev server restart करें।

4. Production में Images या CSS Load नहीं हो रही

Possible reasons:

• Incorrect asset path।
• Subdirectory deployment के लिए गलत base configuration।
• Assets public directory में गलत तरीके से reference की गई हैं।

Fix: Build output inspect करें और hosting path के अनुसार URLs verify करें।

5. Module Import Error

Possible reasons:

• Import path गलत है।
• Package install नहीं है।
• File name या extension mismatch है।

Fix: Import path verify करें और जरूरत के अनुसार dependencies install करें।

6. Production Build Fail हो रही है

Possible reasons:

• Syntax या import error।
• Missing dependency।
• Invalid configuration।
• Type checking या linting जैसी project-specific checks fail होना।

Fix: Terminal का पहला meaningful error पढ़ें, उसे fix करें और build दोबारा चलाएँ।

Vite Best Practices#

• Project की Node.js requirements verify करें।
• Dependencies install करने के बाद project scripts check करें।
• Development server और production build को अलग समझें।
• Environment variables में client-side secrets न रखें।
• Imported assets को prefer करें, जब तक public/ directory की जरूरत न हो।
• Production build को deployment से पहले preview करें।
• Subdirectory deployment के लिए base configuration verify करें।
• npm lockfile को version control में रखें।
• Dependencies update करने के बाद build और tests run करें।
• Build errors को ignore करने की बजाय root cause fix करें।

Vite Quick Reference#

Knowledge Check#

1. Build tool क्या होता है?
2. Vite का development server क्या करता है?
3. HMR का पूरा नाम क्या है?
4. npm run dev और npm run build में क्या अंतर है?
5. package.json में Vite scripts कहाँ define होती हैं?
6. Vite में custom client-side environment variables के लिए कौन-सा prefix use होता है?
7. public/ और src/assets/ में क्या अंतर है?
8. vite preview का मुख्य purpose क्या है?
9. Subdirectory deployment में base configuration क्यों जरूरी हो सकती है?
10. Vite और npm के roles में क्या अंतर है?

Practice Exercises#

Exercise 1: Vite Project Setup

एक नया React + Vite project बनाएँ। Dependencies install करें और development server run करें।

Exercise 2: HMR Test करें

React component में text बदलें और browser में update observe करें। देखें कि किस तरह के changes पर page reload होता है।

Exercise 3: Assets Handle करें

एक image को src/assets/ में import करें और दूसरी image को public/ से reference करें। दोनों approaches का अंतर समझें।

Exercise 4: Environment Variables

एक .env file बनाएँ जिसमें VITE_APP_NAME हो। उसे import.meta.env के माध्यम से access करें।

Exercise 5: Production Build

npm run build चलाएँ और dist/ directory inspect करें। इसके बाद npm run preview से build verify करें।

Exercise 6: Mini Project

एक simple React page बनाएँ जिसमें:

• Header और navigation हों।
• एक image asset हो।
• Environment variable से app title आए।
• Production build सफलतापूर्वक generate हो।

Summary#

इस Cheat Sheet में आपने सीखा:

• Build tools क्या हैं और इनकी जरूरत क्यों पड़ती है।
• Vite project कैसे create करते हैं।
• npm scripts से development server और production build कैसे चलाते हैं।
• HMR क्या है।
• Images और static assets कैसे handle करते हैं।
• Environment variables और Vite configuration कैसे use करते हैं।
• Production build को preview और deploy कैसे करते हैं।
• Common errors और best practices क्या हैं।

Vite को समझने के बाद React और TypeScript projects का setup, development और deployment workflow समझना आसान हो जाएगा।

आगे क्या सीखें?#

अगला topic है TypeScript Cheat Sheet। इसमें हम JavaScript के ऊपर type system, types, interfaces, functions, generics और practical TypeScript examples सीखेंगे।

Suggested internal links:

• JavaScript Cheat Sheet
• Node.js Cheat Sheet
• npm Cheat Sheet
• TypeScript Cheat Sheet

Publish करने से पहले internal links के URLs verify करें और केवल published pages के links रखें.