अध्याय 6: Express.js फ्रेमवर्क (Express.js Framework)

Express.js Node.js के लिए एक तेज़, लचीला और न्यूनतम वेब फ्रेमवर्क है, जिसका उपयोग सर्वर और APIs विकसित करने के लिए किया जाता है। Express.js रूटिंग और मिडलवेयर के साथ एप्लिकेशन डेवलपमेंट को बेहद सरल बना देता है, जिससे डेवलपर्स जटिल सर्वर-साइड लॉजिक को आसानी से हैंडल कर सकते हैं।

इस अध्याय में, हम Express.js का परिचय प्राप्त करेंगे और देखेंगे कि इसे कैसे इंस्टॉल और सेटअप किया जा सकता है। इसके साथ ही, हम रूटिंग, मिडलवेयर, और API डेवलपमेंट के मूलभूत कॉन्सेप्ट्स को समझेंगे। Express.js का उपयोग करके आप अपने Node.js एप्लिकेशन को एक संरचित और मॉड्यूलर तरीके से विकसित कर सकते हैं, जिससे विकास प्रक्रिया तेज़ और अधिक कुशल हो जाती है।

आइए Express.js की दुनिया में कदम रखें और देखें कि यह फ्रेमवर्क Node.js एप्लिकेशन को कितना सरल और शक्तिशाली बनाता है।

Express.js का परिचय (Introduction to Express.js)

Express.js Node.js के लिए एक सरल, तेज़, और न्यूनतम वेब फ्रेमवर्क है, जो आपको वेब एप्लिकेशन और APIs को आसानी से विकसित करने की सुविधा प्रदान करता है। यह एक सर्वर-साइड फ्रेमवर्क है जो HTTP अनुरोधों और उत्तरों को प्रबंधित करने के लिए बहुत लचीलापन और पावर प्रदान करता है। Express.js Node.js के ऊपर एक एब्स्ट्रैक्शन लेयर के रूप में काम करता है, जिससे डेवलपर्स को अधिक संरचित और कुशल एप्लिकेशन बनाने में मदद मिलती है।

Express.js के प्रमुख फीचर्स (Key Features of Express.js)

1. रूटिंग (Routing): Express.js में आप सरल और शक्तिशाली रूटिंग सिस्टम के माध्यम से विभिन्न URL पाथ्स और HTTP मेथड्स को हैंडल कर सकते हैं। यह आपको अलग-अलग पेज और API एंडपॉइंट्स बनाने में मदद करता है।
2. मिडलवेयर (Middleware): Express.js मिडलवेयर का समर्थन करता है, जो आपको HTTP अनुरोधों और उत्तरों को संसाधित करने से पहले और बाद में कस्टम लॉजिक लागू करने की अनुमति देता है। यह लॉगिंग, ऑथेंटिकेशन, और अन्य कार्यों के लिए अत्यधिक उपयोगी है।
3. तेज़ विकास (Rapid Development): Express.js डेवलपर्स को एक लचीला और मॉड्यूलर वातावरण प्रदान करता है, जिससे आप तेजी से प्रोटोटाइप बना सकते हैं और उत्पादन-स्तरीय एप्लिकेशन विकसित कर सकते हैं।
4. मिनिमलिस्ट डिजाइन (Minimalist Design): Express.js एक हल्का फ्रेमवर्क है जो बिना किसी अनावश्यक जटिलताओं के आवश्यक सुविधाएँ प्रदान करता है। यह डेवलपर्स को सिर्फ वही फीचर्स चुनने की अनुमति देता है, जिनकी उन्हें ज़रूरत है।
5. HTTP मेथड्स का समर्थन (Support for HTTP Methods): GET, POST, PUT, DELETE जैसे HTTP मेथड्स को सपोर्ट करता है, जो RESTful APIs और वेब एप्लिकेशन बनाने के लिए महत्वपूर्ण हैं।

Express.js क्यों चुनें? (Why Choose Express.js?)

Express.js डेवलपमेंट को बेहद सरल बनाता है क्योंकि यह Node.js की सभी शक्तिशाली क्षमताओं का लाभ उठाता है, साथ ही आपको जटिल सर्वर साइड कोडिंग से बचाता है। इसका उपयोग छोटी से लेकर बड़े स्तर के एप्लिकेशंस और APIs के लिए किया जा सकता है। इसके सिंपल और स्ट्रक्चर्ड दृष्टिकोण के कारण, Express.js एक लोकप्रिय विकल्प है जब आप स्केलेबल और कुशल एप्लिकेशन बनाना चाहते हैं।

Express.js आपको वेब सर्वर बनाने, HTTP अनुरोधों को हैंडल करने, और कस्टम रूटिंग और मिडलवेयर का उपयोग करके एक बेहतर डेवलपमेंट एक्सपीरियंस प्रदान करता है। इसका उपयोग जटिल वेब एप्लिकेशंस के लिए किया जाता है, जिसमें RESTful APIs और माइक्रोसर्विस आर्किटेक्चर शामिल हैं।

एक Express.js प्रोजेक्ट सेट करना (Setting up an Express.js Project)

Express.js का उपयोग करके एक वेब सर्वर या API बनाना बहुत सरल है। इस सेक्शन में, हम Express.js को अपने Node.js प्रोजेक्ट में सेट करने के लिए आवश्यक सभी चरणों पर चर्चा करेंगे। यह आपको Express.js का उपयोग करके एक प्रोजेक्ट शुरू करने में मदद करेगा और इसके लिए आवश्यक सेटअप प्रक्रिया को विस्तार से समझाएगा।

चरण 1: Node.js और npm स्थापित करें (Install Node.js and npm)

यदि आपके सिस्टम में Node.js और npm पहले से इंस्टॉल नहीं हैं, तो Node.js की आधिकारिक वेबसाइट से इन्हें डाउनलोड और इंस्टॉल करें। Node.js के साथ npm (Node Package Manager) भी आता है, जो पैकेज मैनेजमेंट के लिए आवश्यक है।

आप टर्मिनल में निम्नलिखित कमांड्स का उपयोग करके यह सुनिश्चित कर सकते हैं कि Node.js और npm सही तरीके से इंस्टॉल हैं:

node -v
npm -v

चरण 2: नया प्रोजेक्ट बनाएँ (Create a New Project)

Express.js का उपयोग करने के लिए, सबसे पहले आपको एक नया प्रोजेक्ट बनाना होगा। एक नई डायरेक्टरी बनाएं और उसमें जाएं:

mkdir my-express-app
cd my-express-app

अब, npm का उपयोग करके package.json फाइल को इनिशियलाइज़ करें, जो आपके प्रोजेक्ट की सारी जानकारी रखेगी:

यह कमांड आपके प्रोजेक्ट के लिए एक डिफॉल्ट package.json फाइल बनाएगी, जिसमें सभी जरूरी डिटेल्स होंगी।

चरण 3: Express.js इंस्टॉल करें (Install Express.js)

अब आपको Express.js को अपने प्रोजेक्ट में इंस्टॉल करना होगा। npm का उपयोग करके Express.js को इंस्टॉल करें:

npm install express --save

यह कमांड Express.js को आपके प्रोजेक्ट में इंस्टॉल करेगा और इसे package.json फाइल में जोड़ देगा।

चरण 4: पहला Express.js सर्वर बनाएं (Create the First Express.js Server)

अब हम एक सरल Express.js सर्वर बनाएंगे। एक नई फाइल बनाएं, जैसे app.js, और इसमें निम्नलिखित कोड लिखें:

// Express.js को इंपोर्ट करें
const express = require('express');
const app = express();

// एक साधारण GET रूट सेट करें
app.get('/', (req, res) => {
    res.send('Hello, Express!');
});

// सर्वर को एक पोर्ट पर चलाएं
const port = 3000;
app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}/`);
});

यह कोड एक बेसिक Express.js सर्वर बनाता है जो “Hello, Express!” संदेश के साथ / रूट पर प्रतिक्रिया करता है।

चरण 5: सर्वर चलाएँ (Run the Server)

अब आप अपने Express.js सर्वर को Node.js का उपयोग करके चला सकते हैं। टर्मिनल में निम्नलिखित कमांड टाइप करें:

node app.js

अब आपका सर्वर पोर्ट 3000 पर चल रहा है। आप अपने ब्राउज़र में http://localhost:3000 पर जाकर इसे देख सकते हैं। आपको “Hello, Express!” संदेश दिखाई देगा।

चरण 6: फाइल संरचना (File Structure)

अब तक, आपका प्रोजेक्ट कुछ इस तरह दिखेगा:

my-express-app/
│
├── node_modules/
├── package.json
├── package-lock.json
└── app.js

• node_modules/: इसमें Express.js और इसके सभी डिपेंडेंसीज़ रहती हैं।
• package.json: यह आपके प्रोजेक्ट की सारी जानकारी और डिपेंडेंसीज़ को मैनेज करता है।
• app.js: इसमें Express.js सर्वर का मुख्य कोड है।

चरण 7: Nodemon का उपयोग (Using Nodemon for Auto-Restart)

प्रोजेक्ट डेवलपमेंट के दौरान हर बार सर्वर को मैन्युअल रूप से रीस्टार्ट करना पड़ता है। इस प्रक्रिया को आसान बनाने के लिए, आप nodemon पैकेज का उपयोग कर सकते हैं, जो कोड में बदलाव के बाद सर्वर को ऑटोमेटिकली रीस्टार्ट कर देता है।

nodemon को ग्लोबली इंस्टॉल करें:

npm install -g nodemon

अब आप अपने सर्वर को nodemon के साथ चला सकते हैं:

nodemon app.js

हर बार जब भी आप कोड में बदलाव करेंगे, nodemon ऑटोमेटिकली सर्वर को रीस्टार्ट कर देगा।

मिडलवेयर फंक्शंस (Middleware Functions)

Express.js में मिडलवेयर (Middleware) एक ऐसा फ़ंक्शन होता है जो अनुरोध (request) और उत्तर (response) के बीच में आता है और किसी विशेष कार्य को करने के लिए उपयोग किया जाता है। मिडलवेयर फंक्शंस Express.js की सबसे शक्तिशाली और लचीली विशेषताओं में से एक हैं, क्योंकि ये आपको HTTP अनुरोधों और उत्तरों के बीच में कस्टम लॉजिक जोड़ने की अनुमति देते हैं। मिडलवेयर फंक्शंस कई कार्यों को संभाल सकते हैं, जैसे अनुरोधों को लॉग करना, उपयोगकर्ता को ऑथेंटिकेट करना, अनुरोध डेटा को प्रोसेस करना, और अन्य ऑपरेशन करना।

मिडलवेयर फंक्शन क्या है? (What is a Middleware Function?)

मिडलवेयर फंक्शंस वो फंक्शंस होते हैं जो सर्वर के रिस्पॉन्स भेजने से पहले HTTP अनुरोधों पर कुछ कार्य करते हैं। Express.js में मिडलवेयर फंक्शन तीन प्रमुख पैरामीटर्स लेते हैं:

1. req (Request): क्लाइंट द्वारा भेजे गए अनुरोध का ऑब्जेक्ट।
2. res (Response): सर्वर द्वारा क्लाइंट को भेजी जाने वाली प्रतिक्रिया का ऑब्जेक्ट।
3. next: यह एक फंक्शन है जिसे कॉल करने पर अगले मिडलवेयर या रूट हैंडलर पर जाता है।

   app.use((req, res, next) => {
       // कुछ कार्य करें
       console.log('Request received');
       next(); // अगले मिडलवेयर या रूट पर जाएं
   });
   

    

मिडलवेयर फंक्शंस के प्रकार (Types of Middleware Functions)

Express.js में कई प्रकार के मिडलवेयर फंक्शंस होते हैं, जिनमें से कुछ प्रमुख निम्नलिखित हैं:

1. एप्लिकेशन-लेवल मिडलवेयर (Application-Level Middleware): ये मिडलवेयर पूरी एप्लिकेशन पर लागू होते हैं और सभी रूट्स या कुछ विशिष्ट रूट्स के लिए इस्तेमाल किए जा सकते हैं।
2. रूट-लेवल मिडलवेयर (Route-Level Middleware): ये मिडलवेयर किसी विशेष रूट या रूट्स के समूह के लिए लागू किए जाते हैं।
3. बिल्ट-इन मिडलवेयर (Built-In Middleware): Express.js में कुछ बिल्ट-इन मिडलवेयर होते हैं, जैसे कि express.json() और express.urlencoded(), जो इनकमिंग डेटा को हैंडल करते हैं।
4. थर्ड-पार्टी मिडलवेयर (Third-Party Middleware): ये npm के माध्यम से उपलब्ध होते हैं और विशेष कार्यों जैसे लॉगिंग, ऑथेंटिकेशन आदि को संभालते हैं। उदाहरण: morgan, passport, आदि।

एप्लिकेशन-लेवल मिडलवेयर (Application-Level Middleware)

एप्लिकेशन-लेवल मिडलवेयर पूरे एप्लिकेशन पर लागू होते हैं। इन्हें app.use() के माध्यम से लागू किया जाता है।

const express = require('express');
const app = express();

// एप्लिकेशन-लेवल मिडलवेयर
app.use((req, res, next) => {
    console.log('Time:', Date.now());
    next(); // अगले मिडलवेयर या रूट पर जाएं
});

app.get('/', (req, res) => {
    res.send('Home Page');
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

यह मिडलवेयर हर बार किसी भी रूट पर अनुरोध होने पर Time लॉग करता है और फिर अगले मिडलवेयर या रूट पर जाता है।

रूट-लेवल मिडलवेयर (Route-Level Middleware)

रूट-लेवल मिडलवेयर केवल किसी विशेष रूट पर लागू होता है। यह मिडलवेयर सीधे किसी विशेष रूट पर लागू होता है और उस रूट पर आने वाले अनुरोधों को हैंडल करता है।

// रूट-लेवल मिडलवेयर
app.get('/about', (req, res, next) => {
    console.log('Request URL:', req.originalUrl);
    next();
}, (req, res) => {
    res.send('About Page');
});

यह मिडलवेयर केवल /about रूट पर लागू होता है और URL को कंसोल में प्रिंट करता है, फिर प्रतिक्रिया भेजता है।

बिल्ट-इन मिडलवेयर (Built-In Middleware)

Express.js में कुछ बिल्ट-इन मिडलवेयर होते हैं, जैसे express.json() और express.urlencoded()। ये मिडलवेयर डेटा पार्सिंग के लिए उपयोग किए जाते हैं। उदाहरण के लिए, express.json() JSON डेटा को पार्स करता है, जो कि POST अनुरोधों में भेजा जाता है।

app.use(express.json());

app.post('/data', (req, res) => {
    console.log(req.body); // JSON डेटा प्राप्त करें
    res.send('Data received');
});

थर्ड-पार्टी मिडलवेयर (Third-Party Middleware)

Express.js में थर्ड-पार्टी मिडलवेयर का उपयोग करके कई प्रकार की अतिरिक्त कार्यक्षमताएँ जोड़ी जा सकती हैं। एक सामान्य उदाहरण है morgan, जो HTTP अनुरोधों को लॉग करने के लिए उपयोग किया जाता है।

npm install morgan

const morgan = require('morgan');

// थर्ड-पार्टी मिडलवेयर का उपयोग करें
app.use(morgan('dev'));

यह morgan मिडलवेयर सभी HTTP अनुरोधों के लॉग को कंसोल में दिखाएगा।

कई मिडलवेयर का उपयोग (Using Multiple Middleware Functions)

आप एक से अधिक मिडलवेयर का उपयोग कर सकते हैं, जो क्रम में एक के बाद एक चलते हैं। इसके लिए next() फंक्शन का सही उपयोग आवश्यक होता है, ताकि प्रत्येक मिडलवेयर अगले को कॉल कर सके।

app.use((req, res, next) => {
    console.log('Middleware 1');
    next();
});

app.use((req, res, next) => {
    console.log('Middleware 2');
    next();
});

app.get('/', (req, res) => {
    res.send('Hello from the Home Page');
});

इस उदाहरण में, जब कोई / रूट पर अनुरोध करता है, तो पहले “Middleware 1” और फिर “Middleware 2” कंसोल में प्रिंट होते हैं, और अंत में “Hello from the Home Page” प्रतिक्रिया के रूप में भेजा जाता है।

विभिन्न HTTP मेथड्स को संभालना और रूटिंग (Routing and Handling Different HTTP Methods)

Express.js का एक मुख्य फ़ीचर है HTTP मेथड्स और रूटिंग को आसानी से और प्रभावी तरीके से हैंडल करना। HTTP मेथड्स (जैसे GET, POST, PUT, DELETE) को हैंडल करने से आप RESTful APIs और वेब एप्लिकेशन की लॉजिकल स्ट्रक्चर को आसानी से बना सकते हैं। Express.js में आप विभिन्न HTTP मेथड्स के आधार पर अलग-अलग रूट्स और फंक्शन्स को सेट कर सकते हैं, जिससे एप्लिकेशन अधिक इंटरैक्टिव और डेटा-ड्रिवेन बनता है।

इस सेक्शन में, हम देखेंगे कि कैसे Express.js में विभिन्न HTTP मेथड्स को संभाला जाता है और रूटिंग कैसे की जाती है।

HTTP मेथड्स का परिचय (Introduction to HTTP Methods)

• GET: सर्वर से डेटा प्राप्त करने के लिए उपयोग किया जाता है। यह मेथड मुख्य रूप से डेटा या पेज को रिक्वेस्ट करने के लिए उपयोग होता है।
• POST: सर्वर पर नया डेटा भेजने या सबमिट करने के लिए उपयोग किया जाता है। इसका उपयोग अक्सर फॉर्म डेटा या JSON भेजने के लिए किया जाता है।
• PUT: सर्वर पर पहले से मौजूद डेटा को अपडेट करने के लिए उपयोग होता है।
• DELETE: सर्वर से डेटा या संसाधन को हटाने के लिए उपयोग किया जाता है।
• PATCH: यह मेथड किसी डेटा का कुछ हिस्सा अपडेट करने के लिए उपयोग होता है, जबकि PUT मेथड पूरे डेटा को अपडेट करता है।

Express.js में GET रूट्स (GET Routes in Express.js)

GET अनुरोध मुख्य रूप से डेटा को प्राप्त करने के लिए उपयोग किए जाते हैं। नीचे दिए गए उदाहरण में, हम एक साधारण GET रूट सेट कर रहे हैं:

const express = require('express');
const app = express();

app.get('/', (req, res) => {
    res.send('Welcome to the Homepage!');
});

app.get('/about', (req, res) => {
    res.send('This is the About Page');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

इस उदाहरण में:

• / रूट “Welcome to the Homepage!” संदेश के साथ प्रतिक्रिया करता है।
• /about रूट “This is the About Page” संदेश के साथ प्रतिक्रिया करता है।

Express.js में POST रूट्स (POST Routes in Express.js)

POST अनुरोध सर्वर पर डेटा भेजने के लिए उपयोग किए जाते हैं, जैसे कि फॉर्म डेटा या JSON डेटा।

app.use(express.json()); // JSON डेटा को पार्स करने के लिए मिडलवेयर

app.post('/submit', (req, res) => {
    const data = req.body; // अनुरोध के बॉडी से डेटा प्राप्त करें
    res.send(`Form data received: ${JSON.stringify(data)}`);
});

यहाँ, /submit रूट POST अनुरोध प्राप्त करता है और JSON डेटा के रूप में प्रतिक्रिया भेजता है।

Express.js में PUT रूट्स (PUT Routes in Express.js)

PUT अनुरोध का उपयोग मौजूदा डेटा को अपडेट करने के लिए किया जाता है। PUT अनुरोध के साथ हम एक संसाधन की पूरी जानकारी अपडेट करते हैं:

app.put('/update/:id', (req, res) => {
    const id = req.params.id; // URL से ID प्राप्त करें
    const updatedData = req.body; // अनुरोध के बॉडी से अपडेटेड डेटा प्राप्त करें
    res.send(`Data with ID: ${id} has been updated`);
});

इस उदाहरण में, /update/:id रूट PUT अनुरोध के साथ डेटा को अपडेट करता है और संसाधन की ID को रेस्पॉन्स में भेजता है।

Express.js में DELETE रूट्स (DELETE Routes in Express.js)

DELETE अनुरोध का उपयोग सर्वर से डेटा को हटाने के लिए किया जाता है:

app.delete('/delete/:id', (req, res) => {
    const id = req.params.id; // URL से ID प्राप्त करें
    res.send(`Data with ID: ${id} has been deleted`);
});

यहां /delete/:id रूट DELETE अनुरोध को हैंडल करता है और दिए गए ID के डेटा को हटाने की प्रक्रिया का संकेत देता है।

Express.js में PATCH रूट्स (PATCH Routes in Express.js)

PATCH अनुरोध का उपयोग किसी डेटा का कुछ हिस्सा अपडेट करने के लिए किया जाता है, जबकि PUT मेथड पूरे डेटा को अपडेट करता है।

app.patch('/modify/:id', (req, res) => {
    const id = req.params.id; // URL से ID प्राप्त करें
    const updatedFields = req.body; // केवल संशोधित फील्ड्स प्राप्त करें
    res.send(`Data with ID: ${id} has been partially updated`);
});

स रूट के माध्यम से, आप डेटा का कुछ हिस्सा अपडेट कर सकते हैं।

रूट पैरामीटर्स का उपयोग (Using Route Parameters)

Express.js में रूट पैरामीटर्स का उपयोग करके आप डायनामिक रूट्स सेट कर सकते हैं। उदाहरण के लिए, अगर आप किसी उपयोगकर्ता की जानकारी उनके ID के आधार पर प्राप्त करना चाहते हैं:

app.get('/user/:id', (req, res) => {
    const userId = req.params.id;
    res.send(`User ID: ${userId}`);
});

यह /user/:id रूट किसी भी ID को स्वीकार करेगा और उसे प्रतिक्रिया में वापस भेजेगा। उदाहरण: /user/123 पर जाने पर “User ID: 123” संदेश प्राप्त होगा।

क्वेरी स्ट्रिंग्स का उपयोग (Using Query Strings)

आप क्वेरी स्ट्रिंग्स को भी Express.js में उपयोग कर सकते हैं। उदाहरण:

app.get('/search', (req, res) => {
    const query = req.query.q; // क्वेरी पैरामीटर प्राप्त करें
    res.send(`Search results for: ${query}`);
});

यह /search?q=express जैसा URL क्वेरी स्ट्रिंग को पकड़कर प्रतिक्रिया भेजेगा।

मिडलवेयर के साथ HTTP मेथड्स (Using Middleware with HTTP Methods)

आप HTTP मेथड्स को मिडलवेयर के साथ भी कॉम्बिन कर सकते हैं ताकि विशेष रूट्स पर ऑथेंटिकेशन, लॉगिंग, और अन्य प्रक्रियाएँ जोड़ सकें। उदाहरण:

const logger = (req, res, next) => {
    console.log(`${req.method} request for ${req.url}`);
    next(); // अगले मिडलवेयर या रूट हैंडलर पर जाएं
};

app.use(logger); // मिडलवेयर को लागू करें

app.get('/', (req, res) => {
    res.send('Home Page');
});

टेम्पलेटिंग इंजन (जैसे, EJS, Pug) (Templating Engines (e.g., EJS, Pug))

Express.js में टेम्पलेटिंग इंजन का उपयोग सर्वर-साइड HTML बनाने के लिए किया जाता है। यह एक ऐसा टूल है जो HTML फाइलों को डायनामिक तरीके से बनाने में मदद करता है। जब भी आपको HTML में डेटा डालने की आवश्यकता होती है (जैसे कि यूजर डेटा, लिस्ट्स, या कोई अन्य जानकारी), तो टेम्पलेटिंग इंजन इसे सरल बनाता है। Express.js कई प्रकार के टेम्पलेटिंग इंजन का समर्थन करता है, जिनमें से सबसे लोकप्रिय हैं EJS (Embedded JavaScript) और Pug।

इस सेक्शन में, हम देखेंगे कि EJS और Pug टेम्पलेटिंग इंजन कैसे काम करते हैं, और Express.js एप्लिकेशन में इन्हें कैसे उपयोग किया जाता है।

टेम्पलेटिंग इंजन क्या है? (What is a Templating Engine?)

टेम्पलेटिंग इंजन एक टूल है जो आपको जावास्क्रिप्ट (या किसी अन्य भाषा) के डेटा को HTML में जोड़ने की अनुमति देता है। टेम्पलेटिंग इंजन का उपयोग करके आप HTML पेजों में डायनामिक कंटेंट आसानी से जोड़ सकते हैं, जिससे आपको हर पेज के लिए अलग-अलग HTML फाइल लिखने की आवश्यकता नहीं होती।

1. EJS (Embedded JavaScript)

EJS एक सरल और लोकप्रिय टेम्पलेटिंग इंजन है जो जावास्क्रिप्ट को सीधे HTML में एम्बेड करने की अनुमति देता है। आप HTML पेज के भीतर जावास्क्रिप्ट लॉजिक का उपयोग कर सकते हैं, जैसे कि लूप्स और कंडीशनल स्टेटमेंट्स।

EJS को इंस्टॉल करना (Installing EJS)

EJS का उपयोग करने के लिए, आपको इसे अपने प्रोजेक्ट में इंस्टॉल करना होगा:

npm install ejs --save

Express.js में EJS सेट करना (Setting up EJS in Express.js)

Express.js में EJS को सेट करना आसान है। आप अपने एप्लिकेशन में EJS को टेम्पलेट इंजन के रूप में सेट कर सकते हैं:

const express = require('express');
const app = express();

// EJS को टेम्पलेट इंजन के रूप में सेट करें
app.set('view engine', 'ejs');

// एक सरल GET रूट
app.get('/', (req, res) => {
    const user = { name: 'John', age: 25 };
    res.render('index', { user: user }); // 'index.ejs' फाइल में डेटा पास करें
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

EJS टेम्पलेट फाइल बनाना (Creating an EJS Template File)

अब आपको views नामक एक फोल्डर बनाना होगा और उसके अंदर एक index.ejs फाइल बनानी होगी:

<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
</head>
<body>
    <h1>Welcome, <%= user.name %>!</h1>
    <p>Your age is <%= user.age %>.</p>
</body>
</html>

इसमें <%= ... %> सिंटैक्स का उपयोग करके जावास्क्रिप्ट वैरिएबल्स को HTML में एम्बेड किया गया है। यह सर्वर से प्राप्त डेटा को HTML में दिखाने का एक तरीका है।

EJS का उपयोग करते समय (Using EJS for Rendering)

जब / रूट पर कोई अनुरोध आता है, तो Express.js index.ejs फाइल को रेंडर करता है और उसमें user डेटा एम्बेड करता है। आपको ब्राउज़र में निम्नलिखित आउटपुट दिखाई देगा:

Welcome, John!
Your age is 25.

2. Pug (पहले Jade के नाम से जाना जाता था)

Pug एक अन्य टेम्पलेटिंग इंजन है जो Express.js के साथ लोकप्रिय है। Pug HTML की तुलना में अधिक संक्षिप्त और पठनीय टेम्पलेटिंग प्रदान करता है। इसका सिंटैक्स इंडेंटेशन पर आधारित होता है, जिससे HTML को कोड करना और पढ़ना सरल हो जाता है।

Pug को इंस्टॉल करना (Installing Pug)

Pug को अपने प्रोजेक्ट में इंस्टॉल करने के लिए निम्नलिखित कमांड का उपयोग करें:

npm install pug --save

Express.js में Pug सेट करना (Setting up Pug in Express.js)

Express.js में Pug को सेट करने के लिए, आपको इसे अपने टेम्पलेट इंजन के रूप में सेट करना होगा:

const express = require('express');
const app = express();

// Pug को टेम्पलेट इंजन के रूप में सेट करें
app.set('view engine', 'pug');

// एक सरल GET रूट
app.get('/', (req, res) => {
    res.render('index', { title: 'Home Page', message: 'Welcome to Pug!' });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

Pug टेम्पलेट फाइल बनाना (Creating a Pug Template File)

अब आपको views नामक फोल्डर में index.pug फाइल बनानी होगी:

doctype html
html
    head
        title= title
    body
        h1= message
        p This is a sample Pug template.

Pug में, इंडेंटेशन के आधार पर HTML टेग्स को नेस्ट किया जाता है, और वैरिएबल्स को = के साथ एम्बेड किया जाता है। यह सिंटैक्स HTML की तुलना में अधिक संक्षिप्त होता है।

Pug का उपयोग करते समय (Using Pug for Rendering)

जब / रूट पर अनुरोध किया जाता है, तो Pug टेम्पलेट रेंडर होता है और आपको ब्राउज़र में निम्नलिखित HTML आउटपुट दिखाई देगा:

<!DOCTYPE html>
<html>
<head>
    <title>Home Page</title>
</head>
<body>
    <h1>Welcome to Pug!</h1>
    <p>This is a sample Pug template.</p>
</body>
</html>

EJS और Pug के बीच तुलना (Comparison between EJS and Pug)