Node.js اور Express.js ہینڈ بک برائے ابتدائیہ – سرورز، روٹس، روٹرز، اور ویوز کی وضاحت

Node.js جاوا اسکرپٹ کو ویب براؤزر سے باہر چلانے کے لیے رن ٹائم ماحول ہے۔ چھوٹے اسکرپٹ سے لے کر بڑی بیک اینڈ ایپلی کیشنز تک، Node.js APIs اور ٹولز فراہم کرتا ہے جن کی آپ کو مختلف قسم کے ماحول کے لیے JavaScript ایپلیکیشنز بنانے کی ضرورت ہوتی ہے۔

لیکن Node.js سیکھنا مشکل ہو سکتا ہے۔ یہ سمجھنے کے لیے بہت سارے APIs، پیکجز، ٹولز اور تصورات ہیں کہ اسے کھونا آسان ہے۔

اسی لیے یہ کتاب Node.js کے ان بنیادی تصورات پر توجہ مرکوز کرتی ہے جن کی آپ کو غیر ضروری خلفشار کے بغیر عملی ایپلی کیشنز بنانے کی ضرورت ہے۔ آپ سیکھیں گے کہ Node.js کیسے کام کرتا ہے، اس کے بلٹ ان APIs کا استعمال کیسے کیا جاتا ہے، اور ایسی ایپلی کیشنز کیسے بنائی جاتی ہیں جو فائلوں، URLs، ایونٹس، HTTP درخواستوں اور مزید کے ساتھ تعامل کریں۔

آپ یہ بھی سیکھیں گے کہ کس طرح Express.js بہت سے عام سرور سائیڈ کاموں کو آسان بناتا ہے۔ ہم روٹس، راؤٹرز، کنٹرولرز، ویوز، اور دوسرے تصورات کو دیکھیں گے جو ویب ایپلیکیشنز کو زیادہ مؤثر طریقے سے ترتیب دینے اور بنانے میں آپ کی مدد کر سکتے ہیں۔

اگر آپ پہلی بار بیک اینڈ ڈیولپمنٹ سیکھ رہے ہیں یا اپنی JavaScript کی مہارت کو براؤزر سے آگے بڑھا رہے ہیں، تو یہ گائیڈ آپ کو Node.js اور Express.js کے ساتھ تعمیر کرنے کے لیے ایک واضح، عملی بنیاد فراہم کرنے کے لیے ڈیزائن کیا گیا ہے۔

انڈیکس

جو آپ کو پہلے ہی جاننے کی ضرورت ہے۔

یہ گائیڈ ان قارئین کے لیے ہے جو بنیادی JavaScript جانتے ہیں اور Node.js اور Express.js کا استعمال کرتے ہوئے ویب ایپلیکیشنز بنانا شروع کرنا چاہتے ہیں۔ اگر آپ درج ذیل سے واقف ہیں تو آپ کو سب سے زیادہ قیمت ملے گی۔

• JavaScript کی بنیادی باتیں، بشمول متغیرات، فنکشنز، صفوں اور اشیاء۔

• مقامی غیر مطابقت پذیر JavaScript، بشمول کال بیکس، وعدے، اور دیگر خصوصیات async/await.

• بنیادی HTML، بشمول لنکس، فارمز، اور ان پٹ عناصر۔

• فولڈرز کو نیویگیٹ کرنے اور کمانڈ چلانے کے لیے ٹرمینل کا استعمال کریں۔

Node.js یا Express.js کے ساتھ کسی سابقہ ​​تجربے کی ضرورت نہیں ہے۔ اگر آپ npm پیکجز کو انسٹال کرنے سے واقف ہیں تو یہ مددگار ہے، لیکن مثالیں آپ کو مطلوبہ کمانڈز کے ذریعے رہنمائی کرتی ہیں۔

شروع کرنے سے پہلے، آپ کے پاس کوڈ ایڈیٹر، ایک ویب براؤزر، اور درج ذیل انسٹال ہونا ضروری ہے:

انسٹال ورژن کو چلا کر چیک کریں:

node --version && npm --version

Node.js میں npm شامل ہے، لیکن بنڈل ورژن یہاں درج ورژن سے پرانا ہو سکتا ہے۔ دونوں ورژن چیک کریں اور اگر ضروری ہو تو الگ سے این پی ایم کو اپ ڈیٹ کریں۔ CodeSweetly Package Manager Guide ان ٹولز کو انسٹال، اپ ڈیٹ اور تصدیق کرنے کا طریقہ بتاتی ہے۔

فائل تخلیق کمانڈ مندرجہ ذیل ماحول کو فرض کرتی ہے: mkdir اور touch مثال کے طور پر، آپ macOS یا Linux پر Bash یا zsh، Windows پر Git Bash، یا WSL (Windows Subsystem for Linux) کے ذریعے لینکس شیل استعمال کر سکتے ہیں۔ آپ ایڈیٹر میں براہ راست فائلیں اور فولڈر بھی بنا سکتے ہیں۔

آئیے Node.js کے ساتھ شروع کرتے ہیں۔

Node.js بالکل کیا ہے؟

Node.js کوئی فریم ورک یا زبان نہیں ہے۔ اس کے بجائے، یہ ایک متضاد، واقعہ سے چلنے والا ماحول ہے جس میں ٹولز شامل ہیں جیسے:

• جاوا اسکرپٹ انجن (گوگل V8)

• ماڈیول سسٹم (CommonJS اور ES ماڈیولز)

• آپریٹنگ سسٹم API (os)

• فائل سسٹم تک رسائی (fs)

• نیٹ ورک سرور (http، net، https)

• میموری مینجمنٹ ٹولز

• ایونٹ لوپ

یہ اجزاء Node.js کا بنیادی ڈھانچہ بناتے ہیں، جس سے JavaScript براؤزر سے باہر چل سکتا ہے۔

اوپر کی تصویر Node.js کو ایک اچھی طرح سے لیس رن ٹائم ماحول کے طور پر دکھاتی ہے جو براؤزر سے باہر کسی بھی سائز کی JavaScript ایپلی کیشنز بنانے اور چلانے کے لیے بنیادی ڈھانچہ فراہم کرتا ہے، بشمول سرورز، CLI، اسکرپٹس، اور مکمل اسٹیک ایپلی کیشنز۔

آئیے Node.js اور Express.js کے ساتھ ایک ایپلیکیشن بنا کر تصویر میں نمایاں کیے گئے نکات پر بات کریں۔ شروع کرنے کے لیے، ایک پروجیکٹ ڈائرکٹری بنائیں۔

اپنے پروجیکٹ کے لیے ایک نئی ڈائرکٹری بنائیں

استعمال کریں mkdir ایک نئی پروجیکٹ ڈائرکٹری بنانے کے لیے CLI کمانڈ مندرجہ ذیل ہے:

mkdir codesweetly-nodejs-app-001

میمو: آپ جو بھی نام چاہیں استعمال کر سکتے ہیں۔ اس گائیڈ میں codesweetly-nodejs-app-001 صرف مظاہرے کے مقاصد کے لیے۔

پھر اپنی پروجیکٹ ڈائرکٹری میں جانے کے لیے کمانڈ لائن کا استعمال کریں۔

cd codesweetly-nodejs-app-001

بنانا package.json فائل

این پی ایم کا استعمال شروع کریں۔ package.json پروجیکٹ ڈائرکٹری پر جائیں اور فائل تلاش کریں۔

npm init -y

پھر درج ذیل کمانڈ کا استعمال کرتے ہوئے انتخاب کو حذف کریں: main میدان کے package.json:

npm pkg delete main

ٹپ: کہ main میدان package.json جب کوئی دوسرا پروگرام پیکج کو لوڈ کرتا ہے تو پیکج کے انٹری پوائنٹ کی نشاندہی کرتا ہے۔ اس پروجیکٹ کے لیے آپ کو اس کی ضرورت نہیں ہوگی کیونکہ آپ اسکرپٹ کو براہ راست چلا رہے ہوں گے۔ اسے ویسے ہی چھوڑ دینا بھی بے ضرر ہے۔

Node.js کیوں؟

JavaScript اصل میں ویب براؤزرز کے لیے بنایا گیا تھا، لیکن اسے دوسرے ماحول میں بھی چلانے کے لیے بنیادی ڈھانچہ فراہم کرتا ہے۔

نوڈ کی 2009 کی ریلیز نے ویب براؤزر سے باہر جاوا اسکرپٹ چلانے کے لیے ایک ماحول فراہم کیا۔ مثال کے طور پر، آئیے سسٹم ٹرمینل میں چلانے کے لیے ایک اسکرپٹ بنائیں۔

1. JavaScript فائل بنائیں

نوڈ کو چلانے کے لیے جاوا اسکرپٹ فائل بنائیں۔

تائید شدہ خولوں میں touchBash یا zsh جیسی چیزوں کے لیے، درج ذیل کمانڈ کا استعمال کریں: بصورت دیگر، آپ کا کوڈ ایڈیٹر فائل بناتا ہے۔

touch console.js

2. جاوا اسکرپٹ پروگرام لکھیں۔

نئی بنائی گئی JavaScript فائل کھولیں اور اپنا پروگرام لکھیں۔

console.log("=== Hello from the CodeSweetly Team! ===");
console.log("We hope you have fun Coding Sweetly with Node.js.");
console.log("Thank you for being part of the CodeSweetly community.");
console.log("=== Keep coding. Keep creating. Keep shipping. ===");

3. جاوا اسکرپٹ پروگرام چلائیں۔

اگر آپ Node.js انسٹال کرتے ہیں۔ node کمانڈ جو آپ کمانڈ لائن سے نوڈ ایپلی کیشنز کو چلانے کے لیے استعمال کر سکتے ہیں۔

node console.js

آپ کمانڈز بھی شامل کر سکتے ہیں۔ "scripts" پروجیکٹ کا میدان package.json فائل:

{
  "scripts": {
    "start": "node console.js",
    "test": "echo "Error: no test specified" && exit 1"
  }
}

یہ اسکرپٹ آپ کو ٹرمینل میں جاوا اسکرپٹ پروگرام اس طرح چلانے کی اجازت دیتا ہے:

npm run start

جب آپ اسکرپٹ چلاتے ہیں، نوڈ فائل کے آؤٹ پٹ کو آپ کے ٹرمینل پر پرنٹ کرتا ہے۔ یہ اس طرح نظر آئے گا:

$ npm run start

> codesweetly-nodejs-app-001@1.0.0 start
> node console.js

=== Hello from the CodeSweetly Team! ===
We hope you have fun Coding Sweetly with Node.js.
Thank you for being part of the CodeSweetly community.
=== Keep coding. Keep creating. Keep shipping. ===

جیسا کہ آپ دیکھ سکتے ہیں، آپ نے اپنے ویب براؤزر سے باہر جاوا اسکرپٹ کو کامیابی سے چلایا ہے۔ یہ وہ چیز ہے جس میں Node.js ہماری مدد کرتا ہے۔ ویب براؤزر سے باہر جاوا اسکرپٹ کوڈ کو چلانے کے لیے ایک غیر مطابقت پذیر، ایونٹ سے چلنے والا رن ٹائم ماحول۔ آپ پروگرام کو دوبارہ چلانے کو بھی خودکار کر سکتے ہیں۔ آئیے بحث کرتے ہیں کہ کیسے۔

4. خودکار طور پر جاوا اسکرپٹ پروگرام کو دوبارہ چلائیں۔

پہلے سے طے شدہ طور پر، Node.js آپ سے ہر بار تبدیلی کرنے پر جاوا اسکرپٹ فائلوں کو دستی طور پر دوبارہ چلانے کا تقاضا کرتا ہے۔

تبدیلیاں لاگو کرتے وقت درخواست چلانے کے دستی عمل کو دہرانا بوجھل ہو سکتا ہے۔ خوش قسمتی سے، نوڈ فراہم کرتا ہے: --watch عمل آٹومیشن کے لیے جھنڈے:

node --watch filename.extension

اوپر کا ٹکڑا ہے۔ --watch Node.js کو واچ موڈ میں شروع کرنے کے لیے جھنڈا لگائیں۔ اس کی وجہ سے نوڈ مخصوص اسکرپٹ کو ہر بار دوبارہ چلانے کا سبب بنتا ہے جب یہ انحصار گراف میں فائل کو اپ ڈیٹ کرتا ہے۔

• node: Node.js اسکرپٹ یا REPL چلانے کے لیے کمانڈ۔

• --watch: نوڈ کے مانیٹرنگ موڈ کو چالو کرنے کے لیے جھنڈا لگائیں۔

• filename.extension: اسکرپٹ جسے آپ نوڈ چلانا چاہتے ہیں۔

ٹپ: اس کا استعمال کرتے ہوئے چلنے والے عمل کو روکیں: Ctrl + C ونڈوز، میک او ایس یا لینکس پر۔

کہ --watch جھنڈا بنیادی طور پر انٹری پوائنٹ اور اس پر منحصر تمام ماڈیولز کو دیکھتا ہے۔ اس کا مطلب ہے کہ جب آپ واچ کمانڈ استعمال کرتے ہیں، نوڈ مانیٹر کرے گا:

• آئٹم فائل (filename.extension)

• تمام فائلیں بطور آئٹم فائلز درآمد کی گئیں۔

• اس درآمد کے ذریعہ درآمد کردہ تمام فائلیں۔

• پورے انحصار گراف کے ذریعے، اور اسی طرح.

نوڈ کا ڈیفالٹ واچ موڈ بیرونی فائلوں کو نہیں دیکھتا ہے۔ اگر آپ چاہتے ہیں کہ نوڈ دوسری فائل دیکھے، تو استعمال کریں: --watch-path پرچم:

node --watch-path=./src --watch-path=./tests filename.extension

کہ --watch-path اوپر کے ٹکڑوں میں جھنڈا نوڈ کو مندرجہ ذیل تمام فائلوں کو دیکھنے کے لیے کہتا ہے۔ src اور tests ایک ڈائریکٹری (چاہے یہ انٹری پوائنٹ کے انحصار گراف میں نہ ہو)۔

• node: Node.js اسکرپٹ یا REPL چلانے کے لیے کمانڈ۔

• --watch-path: اس راستے کی وضاحت کرنے کے لیے جھنڈا لگائیں جہاں نوڈ تبدیلیوں کی نگرانی کرے گا۔

• filename.extension: اسکرپٹ جسے آپ نوڈ چلانا چاہتے ہیں۔

ٹپ:

• کہ --watch-path جھنڈا انحصار گراف میں ماڈیولز کو نظر انداز کرنے کا سبب بنتا ہے جب تک کہ نوڈ انحصار گراف کا حصہ نہ ہو۔ --watch-path. اس کے بجائے، Node.js صرف وہی راستہ دیکھتا ہے جو آپ نے بیان کیا ہے اور کوئی دوسرا راستہ نہیں۔

• --watch-path گھڑی کے چہرے کو خود چالو کرتا ہے۔ اگر تم بھی پاس ہو جاؤ --watchنوڈس اب بھی صرف مخصوص راستے دیکھتے ہیں۔

• --watch-path میکوس اور ونڈوز پر تعاون یافتہ، لیکن لینکس پر نہیں۔ لینکس پر، استعمال کریں: --watch آئٹم فائلوں اور ان کے انحصار کی نگرانی کریں۔

• واچ کمانڈ خود بخود براؤزر کو دوبارہ لوڈ نہیں کرتی ہے۔ یہ آسانی سے فائل کی تبدیلیوں کا پتہ لگاتا ہے، لہذا نوڈ آپ کے بیان کردہ پروگرام کو دوبارہ چلاتا ہے۔ لہذا، اگر آپ کا پروگرام آپ کے براؤزر کو ڈیٹا بھیجتا ہے، تو آپ کو خود براؤزر کو ریفریش کرنا ہوگا یا خودکار دوبارہ لوڈنگ کے لیے فریق ثالث کا ٹول استعمال کرنا ہوگا۔

Node.js دو ماڈیول سسٹمز کو سپورٹ کرتا ہے: آئیے ان کے بارے میں معلوم کریں۔

نوڈ ماڈیول سپورٹ

Node.js CommonJS کی حمایت کرتا ہے (.cjs) اور ECMAScript(.mjs) ماڈیول۔ یہ آپ کو اپنے پسندیدہ ماڈیول کی قسم کا استعمال کرتے ہوئے Node.js ایپلی کیشنز بنانے کی اجازت دیتا ہے۔

مثال کے طور پر، نیچے script.mjs جاوا اسکرپٹ فائل۔ نوڈ اسے ECMAScript ماڈیول کے طور پر دیکھتا ہے۔ .mjs فائل کی توسیع۔

script.mjs

import http from "node:http";

دوسری طرف، نوڈ غور کرے گا: script.cjs نیچے دی گئی JavaScript فائل CommonJS ماڈیول ہے۔ .cjs فائل کی توسیع۔

script.cjs

const http = require("node:http");

ہم کہتے ہیں کہ آپ ماڈیول کی قسم بتانا چاہتے ہیں۔ .js پروجیکٹ میں فائلیں۔ اس صورت میں، وضاحت کریں: type آپ کا میدان package.json فائلیں ہیں:

package.json

{
  "scripts": {
    "start": "node console.js",
    "test": "echo "Error: no test specified" && exit 1"
  },
  "type": "module",
  "license": "ISC"
}

کہ "type": "module" نوڈ کو اوپر کے ٹکڑوں میں فیلڈز کو ہینڈل کرنے دیں۔ .js اس کے ذریعے منظم فائلز package.json ES ماڈیول۔ گھوںسلا package.json اپنا دائرہ کار خود طے کریں۔ .mjs اور .cjs فائل اپنے ماڈیول کی قسم کو برقرار رکھتی ہے۔

ترتیب "type" میدان "commonjs" اس بات کا یقین کرنے کے لئے کہ نوڈ علاج حاصل کرتا ہے .js وضاحت کرتا ہے کہ اس دائرہ کار میں فائلیں CommonJS ہیں۔

چند نوٹ:

• ES ماڈیول سسٹم جاوا اسکرپٹ کا سرکاری معیار ہے۔

• کیون ڈانگور نے اس پروجیکٹ کو شروع کیا جو جنوری 2009 میں CommonJS بن گیا، اس سے پہلے کہ JavaScript میں سرکاری معیاری ماڈیول سسٹم موجود تھا۔

• ES ماڈیولز 2015 میں ECMAScript معیار کا حصہ بن گئے۔ Node.js میں CommonJS کی حمایت جاری ہے۔

ES ماڈیول جاوا اسکرپٹ میں معیاری ماڈیول سسٹم ہیں، لہذا یہ گائیڈ بنیادی طور پر ES ماڈیولز کے ساتھ Node.js کا استعمال کرتا ہے۔ مثال پر عمل کرنے کے لیے دیکھیں: "type" آپ کا میدان package.json فائل اس پر سیٹ ہے: "module". بس اپنی پروجیکٹ ڈائرکٹری سے درج ذیل کمانڈ چلائیں:

npm pkg set type=module

جہاں متعلقہ ہو، آئیے CommonJS نحو کا موازنہ کریں:

اب ہم اس بات پر تبادلہ خیال کریں گے کہ Node.js کو ایک ویب سرور بنانے کے لیے کیسے استعمال کیا جائے جو براؤزر سے درخواستیں وصول کرتا ہے اور ان کا جواب دیتا ہے۔

Node.js کے ساتھ ایک HTTP سرور بنانا

ایک HTTP سرور JavaScript ایپلی کیشنز کو کلائنٹس کی درخواستوں پر کارروائی کرنے کی اجازت دیتا ہے، جیسے براؤزر، اور جوابات بھیجیں۔

آپ کے ایپ کے HTTP سرور کو ترتیب دینے کے لیے تین اہم اقدامات ہیں:

1. HTTP کی ایک نئی مثال بناتا ہے۔ Server اعتراض

2. سسٹم پورٹ کی وضاحت کرتا ہے جس پر سرور چلے گا۔

3. وضاحت کرتا ہے کہ سرور کلائنٹ کی درخواستوں کا کیسے جواب دیتا ہے۔

آئیے تین مراحل پر تفصیل سے بات کریں۔ شروع کرنے کے لیے، اپنے پروجیکٹ کے لیے ایک ES ماڈیول بنائیں۔

touch server.js

پھر نئے بنائے گئے ماڈیول کو کھولیں اور HTTP کی ایک نئی مثال شروع کریں۔ Server اعتراض

HTTP کی ایک نئی مثال شروع کرنا Server اعتراض

نوڈ فراہم کرتا ہے: createServer HTTP مثال کیسے بنائیں Server اعتراض (http.Server)۔

آپ اسے نوڈ سے درآمد کرسکتے ہیں اور اسے اپنے پروجیکٹ میں استعمال کرسکتے ہیں۔ http ماڈیولز ہیں:

server.js

import { createServer } from "node:http";

const server = createServer();

یہاں کیا ہو رہا ہے:

CommonJS متبادل میں شامل ہیں:

server.cjs

const http = require("node:http");

const server = http.createServer();

مقامی HTTP بنانے کے بعد Server آبجیکٹ میں سرور کی بندرگاہ کی وضاحت کرتا ہے۔

سسٹم پورٹ کو کنفیگر کریں جس پر سرور کو چلنا چاہیے۔

HTTP Server اعتراض ہے۔ listen() ان بندرگاہوں کو کیسے ترتیب دیا جائے جس پر سرور کو چلنا چاہیے اور کلائنٹ کی درخواستوں کو قبول کرنا چاہیے۔

نحو

import { createServer } from "node:http";

const server = createServer();

server.listen(port, hostname, backlog, callback);

اس فارم کے listen() طریقہ درج ذیل دلائل کو قبول کرتا ہے:

• port: (نمبر) وہ پورٹ نمبر جس پر سرور کو کلائنٹ کی درخواستوں پر عملدرآمد اور سننا چاہئے۔ اگر چھوڑ دیا جائے تو آپریٹنگ سسٹم ایک غیر استعمال شدہ پورٹ مختص کرے گا۔ آپ استعمال کر سکتے ہیں server.address().port سرور کے کلائنٹ کنکشن کے لیے سننا شروع کرنے کے بعد، یہ ان پورٹس کو تلاش کرتا ہے جن پر وہ سن رہا ہے۔

• hostname: (string) وہ میزبان نام یا IP پتہ جس سے سرور کو کلائنٹ کے کنکشنز کو قبول کرنا چاہیے۔ اگر چھوڑ دیا جائے تو، سرور ایک غیر متعینہ IPv6 پر ڈیفالٹ ہو جاتا ہے (::) پتہ یا IPv4 (0.0.0.0) پتہ۔ یہ غیر متعین پتے اس ایڈریس فیملی کے تمام نیٹ ورک انٹرفیس کے پابند ہیں۔ آپ استعمال کر سکتے ہیں server.address().address جب یہ کلائنٹ کنکشن کے لیے سننا شروع کرتا ہے، تو یہ پابند IP ایڈریس بازیافت کرتا ہے۔

• backlog: (نمبر) زیر التواء کنکشن قطار کی زیادہ سے زیادہ لمبائی۔ 511 پہلے سے طے شدہ ہے۔

• callback: (فنکشن) یہ فنکشن اس وقت انجام پاتا ہے جب سرور کلائنٹ کی درخواستیں وصول کرنا شروع کرتا ہے۔

ہاں

server.js

import { createServer } from "node:http";

const server = createServer();

server.listen(3000, "127.0.0.1", 511, () => {
  const info = server.address();
  console.log(`Server running at http://${info.address}:
${info.port}/`);
});

یہاں کیا ہو رہا ہے:

• import سوال: درج ذیل لائیں: createServer نوڈ کا API http لائبریری کو server.js ES ماڈیول۔

• server: HTTP ذخیرہ کرنے کے لیے متغیر Server میں خلاف ہوں۔ createServer() فنکشن آؤٹ پٹ۔

• server.listen(): کلائنٹ کنکشن سننے کے لیے ایک سرور شروع کرتا ہے۔ (ٹپ: یہ طریقہ listening جب سرور کامیابی سے شروع ہوتا ہے تو ایک واقعہ اٹھایا جاتا ہے۔)

CommonJS متبادل میں شامل ہیں:

server.cjs

const http = require("node:http");

const server = http.createServer();

server.listen(3000, "127.0.0.1", 511, () => {
  const info = server.address();
  console.log(`Server running at http://${info.address}:
${info.port}/`);
});

یہ کیا ہے؟ 127.0.0.1 پتہ؟

کہ 127.0.0.1 ایڈریس IPv4 لوپ بیک ایڈریس ہے جو مقامی کمپیوٹر سے مراد ہے۔ میزبان نام localhost یہ مقامی کمپیوٹر کا حوالہ دے سکتا ہے، لیکن اس کی تشریح اس طرح بھی کی جا سکتی ہے: 127.0.0.1 یا IPv6 لوپ بیک ایڈریس، ::1. آپ اسے اس طرح استعمال کر سکتے ہیں:

server.js

import { createServer } from "node:http";

const server = createServer();

server.listen(3000, "localhost", 511, () => {
  console.log("Server running at http://localhost:3000/");
});

جب آپ اس سرور کو چلاتے ہیں اور اس ویب ایڈریس پر جاتے ہیں، تو آپ کا براؤزر جواب کا انتظار کرے گا کیونکہ آپ نے ابھی تک کوئی درخواست ہینڈلر ترتیب نہیں دیا ہے۔ اب اسے کنفیگر کرتے ہیں۔

کلائنٹ کی درخواستوں کا جواب دینے کے لیے سرور کو کنفیگر کریں۔

کہ createServer() طریقہ یہ ہے۔ requestListener ایک کال بیک جو سرور کو جب بھی HTTP درخواست موصول ہوتی ہے تو خود بخود کال کی جاتی ہے۔ نوڈ آپ کو اس کال بیک کا استعمال کرتے ہوئے درخواستوں کا جواب دینے کی اجازت دیتا ہے۔

نحو

کہ createServer() طریقہ دو اختیاری دلائل کو قبول کرتا ہے۔ نحو ہے:

import { createServer } from "node:http";

const server = createServer(options, callback);

• options: سرور کے رویے کو حسب ضرورت بنانے کے لیے ایک چیز۔

• callback: requestListener کلائنٹ کی درخواستوں پر کارروائی اور جواب دینے کی صلاحیت۔ یہ دو پیرامیٹرز کو قبول کرتا ہے:

import { createServer } from "node:http";

const server = createServer(options, function (request, response) {
  // the requestListener function's body
});

پیشکش requestListener کال بیک فنکشن createServerدوسری دلیل Node.js کو خود بخود اسے سننے والے کے طور پر رجسٹر کرنے کو کہتی ہے۔ "request" واقعہ تو مندرجہ بالا نحو اس کے برابر ہے:

import { createServer } from "node:http";

const server = createServer(options);

server.on("request", function (request, response) {
  // the requestListener function's body
});

server.on("request", callback) سرور کو درخواست کے واقعات سننے اور ان واقعات کے لیے کال بیکس پر عمل کرنے کی ہدایت کرتا ہے۔

ہاں

server.js

// Add the Node.js HTTP module
import { createServer } from "node:http";

// Specify the hostname and port to run the server
const hostname = "localhost";
const port = 3000;

// Create a new Server instance with a requestListener callback
const server = createServer((req, res) => {
  res.statusCode = 200; // Set an OK success (200) response status code
  res.setHeader("Content-Type", "text/plain"); // Define the media type of the response data
  res.end("Hello World!"); // Specify the response data and close the response stream
});

// Run the server on the specified port and hostname
server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:
${port}/`);
});

اوپر کے ٹکڑوں میں: requestListener کلائنٹ کی درخواستوں کا جواب دینے کے لیے سرور کو ترتیب دینے کے لیے کال بیک فنکشن کا رسپانس پیرامیٹر استعمال کریں۔ یہاں server.on("request", callback) متبادل منصوبہ:

server.js

// Add the Node.js HTTP module
import { createServer } from "node:http";

// Specify the hostname and port to run the server
const hostname = "localhost";
const port = 3000;

// Create a new Server instance
const server = createServer();

// Listen for a request event and execute the requestListener callback
server.on("request", (req, res) => {
  res.statusCode = 200; // Set an OK success (200) response status code
  res.setHeader("Content-Type", "text/plain"); // Define the media type of the response data
  res.end("Hello World!"); // Specify the response data and close the response stream
});

// Run the server on the specified port and hostname
server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:
${port}/`);
});

اب جب کہ آپ کا سرور ترتیب دیا گیا ہے اور بندرگاہیں ترتیب دی گئی ہیں، آپ اپنی درخواست چلا سکتے ہیں۔

node server.js

سرور کے چلنے کے دوران، اگر کوئی صارف سرور کے ویب ایڈریس پر آپ کی ایپ سے وسائل کی درخواست کرتا ہے، تو وہ اس طرح کا پیغام دیکھیں گے: Hello World! جواب دیں جیسا کہ درج ذیل تصویر میں دکھایا گیا ہے۔

ٹپ: اس کا استعمال کرتے ہوئے چلنے والے عمل کو روکیں: Ctrl + C ونڈوز، میک او ایس یا لینکس پر۔

اگرچہ node:http چونکہ HTTP درخواستوں کو سنبھالنے کے لیے ماڈیولز Node.js میں بنیادی API ہیں، اس لیے ڈویلپرز عام طور پر اس عمل کو آسان بنانے کے لیے فریم ورک استعمال کرتے ہیں۔ مقبول Node.js ویب فریم ورک میں Express.js، Fastify، اور Koa.js شامل ہیں۔ آئیے Express.js کو ایک مثال کے طور پر لیتے ہیں اور دیکھتے ہیں کہ کس طرح فریم ورک Node.js میں HTTP درخواست کو سنبھالنے کو آسان بنا سکتا ہے۔

Express.js بالکل کیا ہے؟

Express.js ایک ویب فریم ورک ہے جو Node.js میں سرور سائیڈ HTTP درخواست کی کارروائی کو آسان بناتا ہے۔ یہ روٹنگ اور مڈل ویئر جیسی بلٹ ان خصوصیات کے ساتھ نوڈ کے ایچ ٹی ٹی پی ماڈیول کو بڑھاتا ہے، جس سے ڈویلپرز کو بار بار کوڈ کے بغیر ویب ایپلیکیشنز اور APIs کو مؤثر طریقے سے بنانے میں مدد ملتی ہے۔ اسے اپنے Node.js پروجیکٹ میں استعمال کرنے کا طریقہ یہ ہے:

1. ایکسپریس انسٹالیشن

npm install express@5.2.1

2. Express.js کا استعمال کرتے ہوئے اپنے پروجیکٹ کے لیے Node.js ویب سرور کو کنفیگر کریں۔

JavaScript سرور فائل کھولیں اور Express.js کا استعمال کرتے ہوئے ایک ویب سرور ترتیب دیں۔

server.js

// Add the Express module
import express from "express";

// Create a new Express application instance
const app = express();

// Set the port number where the server will run and listen for requests
const port = 3000;

// Create a route handler for GET requests to the "https://www.freecodecamp.org/" path
app.get("https://www.freecodecamp.org/", (req, res) => res.send("Hello, world!"));

// Run the server on the specified port
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

مندرجہ بالا کوڈ کیا کرتا ہے یہاں ہے:

• ایکسپریس APIs جیسے راؤٹرز اور مڈل ویئر تک رسائی کے لیے ایکسپریس ایپلیکیشن مثالیں بنا کر Node.js میں HTTP درخواست کی کارروائی کو آسان بنائیں۔

• میں ایکسپریس استعمال کرتا ہوں۔ app.get() اس کی وضاحت کیسے کی جائے کہ سرور HTTP GET کی درخواستوں کو کیسے ہینڈل کرتا ہے۔ / راستہ

• میں ایکسپریس استعمال کرتا ہوں۔ res.send() وہ طریقہ جو HTTP جواب بھیجتا ہے اور فراہم کردہ ڈیٹا کی قسم کی بنیاد پر خود بخود مناسب ہیڈر سیٹ کرتا ہے۔

• میں ایکسپریس استعمال کرتا ہوں۔ app.listen() وہ طریقہ جو ایک مخصوص پورٹ پر Node.js HTTP سرور کو شروع کرتا ہے اور جب سرور کلائنٹ کی درخواستوں کو سننا شروع کرتا ہے تو کال بیک کو انجام دیتا ہے۔

ٹپ:

• بیان سے app.get("https://www.freecodecamp.org/", (req, res) => res.send("Hello, world!"))،

  • app.get() یہ ایکسپریس روٹنگ کا طریقہ ہے۔

  • "https://www.freecodecamp.org/" راستہ ہی راستہ ہے۔

  • (req, res) => ... یہ ایک روٹ ہینڈلر فنکشن ہے۔

  • پورا بیان ایک راستہ ہے (یا راستے کی تعریف)۔

• آبجیکٹ کو ایکسپریس روٹ ہینڈلر کے پیرامیٹر پر منتقل کیا گیا (req اور res) نوڈ کا ایک بہتر ورژن ہے۔ http.IncomingMessage اور http.ServerResponse اشیاء ایکسپریس HTTP درخواست اور رسپانس پروسیسنگ کو آسان بنانے کے لیے خصوصیات اور مددگار طریقے شامل کرتا ہے۔

• راستے کی تعریف کی ترتیب اہم ہے۔ ایکسپریس پراسیس مماثل راستوں کو اس ترتیب میں بیان کرتا ہے جس ترتیب سے ان کی وضاحت کی گئی ہے۔ ایک ہینڈلر جواب کو ختم کر سکتا ہے یا دوسرے ہینڈلر کو یہ استعمال کر کے کنٹرول پاس کر سکتا ہے: next().

3. Express.js ویب سرور چلائیں۔

استعمال کریں node Node.js اسکرپٹ کو چلانے کے لیے، بشمول HTTP درخواستوں کو ہینڈل کرنے کے لیے Express.js استعمال کرنے والے، کمانڈ کے بعد اسکرپٹ کے فائل کا نام آتا ہے۔

node server.js

کھلا http://localhost:3000 اپنے براؤزر میں چیک کریں۔ Hello, world!.

ٹپ: استعمال کرتے ہوئے سرور کو روکیں: Ctrl + C ونڈوز پر یا Control + C macOS پر۔

خام Node.js کوڈ کا Express.js کوڈ سے موازنہ کرنا

آپ ویب درخواستوں کو ہینڈل کرنے کے لیے نوڈ کا مقامی HTTP API استعمال کر سکتے ہیں، لیکن اس کے لیے دستی ترتیب کی ضرورت ہوتی ہے، بشمول ہر درخواست کے طریقہ کار اور URL کا معائنہ کرنا، رسپانس ہیڈر سیٹ کرنا، اور اشیاء کو JSON میں تبدیل کرنا۔

ایکسپریس اعلانیہ انداز میں تکراری درخواست کی پروسیسنگ منطق کو خلاصہ کرکے Node.js ویب سرور کی ترقی کو آسان بناتا ہے۔

ذیل میں نوڈ ڈاٹ جے ایس ویب سرور کوڈ کا موازنہ کرنے والی دو مثالیں ہیں جو مقامی HTTP ماڈیول اور ایکسپریس طریقوں کا استعمال کرتے ہوئے لکھے گئے ہیں۔

مثال 1: مقامی Node.js کا استعمال کرتے ہوئے ویب درخواستوں پر کارروائی کرنا

درج ذیل ویب سرور نوڈ کے بلٹ ان HTTP ماڈیول کو دو اختتامی نقطے بنانے کے لیے استعمال کرتا ہے: home(/) اور کتابیں (/books) – مماثل درخواستوں کے لیے 404 جواب دیتا ہے۔

server.js

import { createServer } from "node:http";
const port = 3000;

const server = createServer((req, res) => {
  if (req.method === "GET" && req.url === "https://www.freecodecamp.org/") {
    res.writeHead(200, { "Content-Type": "text/plain" });
    res.end("Welcome to the homepage!");
  } else if (req.method === "GET" && req.url === "/books") {
    const books = [
      { id: 1, name: "Code React Sweetly" },
      { id: 2, name: "Creating NPM Package" },
    ];
    res.writeHead(200, { "Content-Type": "application/json" });
    res.end(JSON.stringify(books));
  } else {
    res.writeHead(404, { "Content-Type": "text/plain" });
    res.end("Page not found");
  }
});

server.listen(port, () => {
  console.log(`Raw Node server running at http://localhost:${port}`);
});

مذکورہ بالا ٹکڑا نوڈ کا مقامی استعمال کرتا ہے۔ http ایک ماڈیول جو ایک ویب سرور بناتا ہے جو براؤزر کنکشن کو قبول کرتا ہے اور اس کا جواب دیتا ہے۔ یہ خام Node.js مثال درج ذیل کاموں کو دستی طور پر ہینڈل کرتی ہے۔

• درست اختتامی نقطہ کا راستہ: if (req.method === "..." && req.url === "...")

• جوابی ہیڈر ترتیب دیں: res.writeHead(...)

• JSON فارمیٹ: JSON.stringify(...)

اب دیکھتے ہیں کہ ایکسپریس کا استعمال کرتے ہوئے اسی طرح کا ویب سرور کیسے بنایا جائے۔ اس مثال کو ایک وقت میں چلائیں۔ server.js سرور کو دوبارہ شروع کریں۔

مثال 2: Express.js کا استعمال کرتے ہوئے ویب درخواستوں کو ہینڈل کرنا

مندرجہ ذیل ویب سرور ایکسپریس روٹ کو دو اینڈ پوائنٹس کو جوڑنے کے لیے استعمال کرتا ہے (ہوم(/) اور کتابیں (/books) – مماثل درخواستوں کے لیے 404 جواب دیتا ہے۔

server.js

import express from "express";
const app = express();
const port = 3000;

app.get("https://www.freecodecamp.org/", (req, res) => {
  res.send("Welcome to the homepage!");
});

app.get("/books", (req, res) => {
  const books = [
    { id: 1, name: "Code React Sweetly" },
    { id: 2, name: "Creating NPM Package" },
  ];
  res.json(books);
});

app.use((req, res) => {
  res.status(404).send("Page not found");
});

app.listen(port, () => {
  console.log(`Express server running at http://localhost:${port}`);
});

مندرجہ بالا کوڈ کا ٹکڑا ایک ویب سرور بنانے کے لیے Express.js کا استعمال کرتا ہے جو براؤزر کنکشن کو قبول کرتا ہے اور اس کا جواب دیتا ہے۔ ایکسپریس آسان بناتا ہے:

• روٹنگ منطق: Express.js اس طرح ایک آسان روٹ ڈیکلریشن فراہم کرتا ہے: app.get()، app.post()اور app.delete()پیچیدہ مشروط منطق کو چیک کرنے کی ضرورت نہیں ہے۔ req.url اور req.method ہر راستے کے لیے۔

• جوابی ہیڈر ترتیب دیں: اظہار res.send() یہ طریقہ خود بخود جوابی جسم کی بنیاد پر مناسب جوابی ہیڈرز سیٹ کرتا ہے۔ استعمال کریں res.status() جب آپ کو اسٹیٹس کوڈ سیٹ کرنے کی ضرورت ہو، جیسا کہ اوپر 404 ہینڈلر میں ہے۔

• JSON فارمیٹ: اظہار res.json() یہ طریقہ خود کار طریقے سے جاوا اسکرپٹ آبجیکٹ کو ایک درست JSON جواب میں تبدیل کرتا ہے، سیریلائزیشن اور ہیڈر کو سنبھالتا ہے۔

Node.js میں Express.js ویب سرور بنانے کے بارے میں جاننے کے لیے اہم چیزیں

اپنے Node.js پروجیکٹ میں Express.js سرور بناتے وقت، درج ذیل اہم نکات کو ذہن میں رکھیں:

پکارنا عام ہے۔ app.listen() آخری

پکارنا عام ہے۔ app.listen() یہ Express.js ایپس کی آخری ہے۔ یہ سرور کو درخواستیں موصول ہونے سے پہلے تمام راستے، مڈل ویئر، اور ایرر ہینڈلرز کو ترتیب دے گا۔

آپ ماحولیاتی متغیر کا استعمال کرتے ہوئے پورٹ نمبر سیٹ کر سکتے ہیں۔

ماحولیاتی متغیر سے پورٹ نمبر پڑھنے کے لیے، موجودہ استعمال کریں۔ port اس کا اعلان اس طرح کریں:

const port = process.env.PORT || 3000;

مندرجہ بالا ٹکڑا نوڈ کو استعمال کرنے کی ہدایت کرتا ہے: PORT ماحولیاتی متغیرات کی قدریں یا پہلے سے طے شدہ اقدار 3000 اگر سیٹ نہیں ہے یا خالی ہے۔ باش نما شیل میں، درج ذیل کمانڈ کو سیٹ کیا جائے گا: PORT کو 8000 اس سرور کو چلانے کے لیے:

PORT=8000 node server.js

عام Express.js جوابی طریقے

Express.js میں استعمال کرنے کے لیے کچھ عام جوابی طریقے یہ ہیں:

• res.send(): کلائنٹ کو ایک HTTP جواب بھیجتا ہے اور طریقہ کار کے دلائل کے طور پر فراہم کردہ ڈیٹا کی قسموں کی بنیاد پر خود بخود مناسب جوابی ہیڈرز سیٹ کرتا ہے۔

• res.json(): کلائنٹ کو JSON جواب بھیجیں اور جواب کی ترتیبات خود بخود سیٹ کریں۔ Content-Type ہیڈر application/json.

• res.redirect(): کلائنٹ کی درخواست کو ایک مختلف URL پر بھیجیں۔

• res.render(): ٹیمپلیٹ انجن میں منظر پیش کریں اور نتیجے میں HTML سٹرنگ کلائنٹ کو بھیجیں۔

• res.status(): درخواست کے جواب کے چکر کو ختم کیے بغیر جواب کا HTTP اسٹیٹس کوڈ سیٹ کرتا ہے۔ مثال کے طور پر، آپ مختلف جوابی طریقوں کو جوڑ سکتے ہیں۔ res.status(404).send("404 Error: Page not found"). ڈیفالٹ اسٹیٹس کوڈ استعمال کرنے کے لیے آپ کو اس طریقے کو کال کرنے کی ضرورت نہیں ہے۔ 200.

• res.end(): جواب ختم کرتا ہے۔ اگر ڈیٹا کی دلیل کے بغیر کال کی جاتی ہے، تو کوئی اضافی جوابی باڈی ڈیٹا نہیں بھیجا جاتا ہے۔ آپ جواب کو ختم کرنے سے پہلے بھیجے جانے والے ڈیٹا کو بھی قبول کر سکتے ہیں۔

ایکسپریس کا جوابی طریقہ HTTP درخواست ہینڈلر کے عمل کو ختم نہیں کرتا ہے۔

درج ذیل جوابی طریقہ استعمال کرتے ہوئے: res.send() HTTP درخواست کے جواب کے چکر کو بند کرنے سے روٹ ہینڈلر فنکشن کا عمل ختم نہیں ہوتا ہے۔

مثالوں میں شامل ہیں:

app.get("https://www.freecodecamp.org/", (req, res) => {
  // This sends a text response to the client and ends the request-response cycle, but does not end the route handler's execution
  res.send("Hello, client!");

  // This logs the string to the console because the function is still running
  console.log("Hello, devs!");

  // This will cause an error because the request-response cycle is closed, so you cannot send additional responses to the client during the callback's execution
  res.send("Hello, client again!");
});

کہ console.log() مندرجہ بالا مثال میں بیان کام کرتا ہے کیونکہ درخواست ہینڈلر ابھی بھی چل رہا ہے۔ کہ res.send("Hello, client!") لائن اس درخواست کے جواب کو ختم کرتی ہے۔ کال بیک ایگزیکیوشن میں رکاوٹ نہیں ہے۔

حوالہ app.get(...) اوپر دیے گئے کوڈ کو ایکسپریس روٹ کہا جاتا ہے۔ تو Express.js میں راستہ کیا ہے؟ آئیے اب اس پر بحث کرتے ہیں۔

Express.js میں راستہ کیا ہے؟

Express.js میں روٹ HTTP طریقوں، URL پاتھز، اور اینڈ پوائنٹس کے لیے کلائنٹ کی درخواستوں کو ہینڈل کرنے کے لیے ایک یا زیادہ مڈل ویئر فنکشنز کی ایک زنجیر پر مشتمل ہوتا ہے۔

ٹپ:

• ایک اختتامی نقطہ HTTP طریقہ اور URL پاتھ پر مشتمل ہوتا ہے۔ (اینڈ پوائنٹ = HTTP طریقہ + URL پاتھ)

• روٹ میں HTTP طریقے، یو آر ایل کے راستے، اور سرور سائڈ منطق شامل ہے جو کلائنٹ کی درخواستوں کو ہینڈل کرتی ہے۔ (راستہ = سرور HTTP طریقہ + سرور URL پاتھ + ہینڈلر فنکشن)

ایکسپریس میں روٹ نحو

app.METHOD(PATH, HANDLER);

• app: ایک ایکسپریس ایپلیکیشن مثال جو ایکسپریس API تک رسائی فراہم کرتی ہے، بشمول طریقوں اور مڈل ویئر، Node.js میں HTTP درخواست کی پروسیسنگ کو آسان بنانے کے لیے۔

• METHOD: یہ ایک چھوٹے کیس HTTP درخواست کا طریقہ ہے: get، postیا delete.

• PATH:پاتھ یو آر ایل کا راستہ ہے جس پر کارروائی کی جائے گی۔ یہ ایک تار یا باقاعدہ اظہار ہوسکتا ہے۔ ایکسپریس 4 ایکسپریس 5 سے مختلف نحو کے ساتھ سٹرنگ پیٹرن کو بھی سپورٹ کرتا ہے۔

• HANDLER: ایک کال بیک (یا مڈل ویئر) فنکشن جو کہ ایکسپریس اینڈ پوائنٹ اور روٹ اینڈ پوائنٹ کے میچ ہونے پر عمل میں لاتا ہے۔ ہینڈلر ہو سکتے ہیں:

ٹپ:

• آپ استعمال کر سکتے ہیں app.all() ایک ہینڈلر فنکشن سیٹ کرنے کا طریقہ جو کسی خاص سسٹم پر تعاون یافتہ HTTP درخواست کے تمام طریقوں کے لیے چلتا ہے۔ PATH.

• کہ app.use() طریقے آپ کو مڈل ویئر کے فنکشنز ترتیب دینے کی اجازت دیتے ہیں جو کہ درخواست کے آنے پر HTTP درخواست کے تمام طریقوں اور راستوں کے لیے عمل میں لایا جا سکتا ہے۔ راستے کی دلیل کی وضاحت کرتے وقت app.use() اس راستے اور اس کے ذیلی راستے سے میل کھاتا ہے۔ مثال کے طور پر /book میچز /book، /book/dashboardاور /book/dashboard/author/202605.

مڈل ویئر اور روٹ ہینڈلرز

ڈویلپرز اکثر "روٹ ہینڈلر” کی اصطلاح استعمال کرتے ہیں حتمی فنکشن کو بیان کرنے کے لیے جو درخواست کو حل کرتا ہے اور جواب بھیجتا ہے۔ دوسری طرف، پرانے دوبارہ قابل استعمال افعال کو "مڈل ویئر” کہا جاتا ہے۔

app.METHOD(PATH, MIDDLEWARE1, MIDDLEWARE2, HANDLER);

میمو: ایکسپریس کو روٹ سے وابستہ فنکشنز کے لیے منفرد ناموں یا زمروں کی ضرورت نہیں ہے۔ ایکسپریس کے نقطہ نظر سے، یہ تمام ہینڈلر کے افعال ہیں۔ next() ایک سے دوسرے کو کنٹرول منتقل کرنا۔ تاہم، ڈویلپر اکثر کوڈ کی تنظیم، پڑھنے کی اہلیت، اور مواصلات کو بہتر بنانے کے لیے مڈل ویئر اور روٹ ہینڈلرز کے درمیان فرق کرتے ہیں۔

• مڈل ویئر کے افعال اکثر ہوتے ہیں۔ /middlewares ڈائرکٹری ایک افادیت کے جزو کے طور پر کام کرتی ہے جو کراس ٹاسک یا اسٹیجنگ کے کام انجام دیتی ہے جیسے کہ تصدیق، توثیق، لاگنگ، اور ڈیٹا لوڈنگ۔ یہ افعال اکثر دوبارہ قابل استعمال ہوتے ہیں اور عام طور پر کہلاتے ہیں۔ next() درج ذیل فنکشن پر کنٹرول پاس کریں:

• روٹ ہینڈلرز، بعض اوقات کنٹرولرز پر مشتمل ہوتے ہیں۔ /controllers ڈائریکٹری کاروباری منطق پر مشتمل ہے جو اختتامی پوائنٹس سے درج ذیل ڈیفالٹ جوابات تیار کرتی ہے۔ getUserProfile، createBlogPostیا deleteAccount. یہ افعال راستے کے لحاظ سے مختلف ہو سکتے ہیں، اور عام طور پر مندرجہ ذیل طریقہ کو کال کرکے درخواست کے جواب کے چکر کو ختم کرتے ہیں۔ res.send() یا res.json().

Express.js میں روٹ کی مثال

Express.js میں روٹس کی کچھ مثالیں یہ ہیں:

واحد ہینڈلر کی فعالیت کے ساتھ ایکسپریس روٹ

app.get("/single/handler", (req, res) => {
  res.send("Request handled with a single handler function!");
});

مندرجہ بالا مثال GET درخواست کو ہینڈل کرنے کے لیے ایک کال بیک فنکشن کا استعمال کرتی ہے۔ GET /single/handler اختتامی نقطہ اس صورت میں، ہینڈلر فنکشن ایک ان لائن کنٹرولر ہے۔ ایک عام نقطہ نظر کنٹرولر کا استعمال کرنا ہے۔ controllers ڈائریکٹری یہ آپ کے روٹ کی تعریفوں کو پڑھنے کے قابل رکھتے ہوئے آپ کے کوڈ کو جانچنا اور برقرار رکھنا آسان بناتا ہے۔

مثالوں میں شامل ہیں:

مندرجہ ذیل مثال میں: GET /single/handler ماڈیولر کنٹرولرز کا استعمال کرتے ہوئے روٹنگ کو ان کے اپنے ماڈیولز میں منتقل کیا گیا (controllers/single-handler.js)۔ یہ نقطہ نظر راستے کی تعریف کو درخواست کی پروسیسنگ منطق سے الگ کرتا ہے جو اختتامی نقطہ کا ردعمل پیدا کرتا ہے۔

import express from "express";
import * as controller from "./controllers/single-handler.js";

const app = express();
const port = 3000;

app.get("/single/handler", controller.singleHandler);

app.listen(port, () => {
  console.log(`Express server running at http://localhost:${port}`);
});

ذیل میں ایک کنٹرولر فائل کی ایک مثال ہے جس میں صرف کنٹرولر فائل ہے: singleHandler ہینڈلر فنکشن۔

controllers/single-handler.js

function singleHandler(req, res) {
  res.send("Request handled with a single handler function!");
}

export { singleHandler };

ٹپ: کنٹرولر ایک روٹ ہینڈلر یا ہینڈلرز کا گروپ ہوتا ہے جو ایک مخصوص اختتامی نقطہ پر درخواستوں کا انتظام کرتا ہے۔ کوڈ کی تنظیم کو بہتر بنانے اور خدشات کی واضح علیحدگی فراہم کرنے کے لیے کنٹرولرز کو اکثر الگ الگ ماڈیولز میں رکھا جاتا ہے۔

مڈل ویئر کے مختلف افعال کے ساتھ ایکسپریس روٹ

app.get(
  "/multiple/middleware",
  (req, res, next) => {
    console.log("First callback: passing control to the next middleware >");
    next();
  },
  (req, res, next) => {
    console.log("Second callback: passing control to the next middleware >");
    next();
  },
  (req, res) => {
    res.send("Request handled with multiple middleware functions!");
  },
);

مندرجہ بالا مثال GET درخواست کو ہینڈل کرنے کے لئے متعدد مڈل ویئر فنکشنز کا استعمال کرتی ہے۔ /multiple/middleware سڑک

مڈل ویئر کے مختلف افعال کے ساتھ ایکسپریس روٹ

const arrayOfCallbacks = [
  function callback1(req, res, next) {
    console.log("First callback: passing control to the next middleware >");
    next();
  },
  function callback2(req, res, next) {
    console.log("Second callback: passing control to the next middleware >");
    next();
  },
  function callback3(req, res) {
    res.send("Request handled with an array of middleware functions!");
  },
];

app.get("/array/middleware", arrayOfCallbacks);

مندرجہ بالا مثال GET درخواست پر کارروائی کرنے کے لیے کال بیک فنکشنز کی ایک صف کا استعمال کرتی ہے۔ GET /array/middleware اختتامی نقطہ

ایکسپریس روٹ مختلف مڈل ویئر فنکشنز اور انفرادی کال بیکس کو یکجا کرتا ہے۔

const arrayOfCallbacks = [
  function callback1(req, res, next) {
    console.log("First callback: passing control to the next middleware >");
    next();
  },
  function callback2(req, res, next) {
    console.log("Second callback: passing control to the next middleware >");
    next();
  },
];

app.get(
  "/mix/middleware",
  arrayOfCallbacks,
  (req, res, next) => {
    console.log("Third callback: passing control to the next middleware >");
    next();
  },
  (req, res, next) => {
    console.log("Fourth callback: passing control to the next middleware >");
    next();
  },
  (req, res) => {
    res.send(
      "Request handled with a combination of an array of middleware functions and independent callback arguments!",
    );
  },
);

مندرجہ بالا مثال ایک GET درخواست پر کارروائی کرنے کے لیے کال بیکس اور انفرادی فنکشن دلائل دونوں کا استعمال کرتی ہے۔ /mix/middleware سڑک

جاننے کے لیے اہم چیزیں: next پیرامیٹر

• next() اسٹیک میں اگلے مڈل ویئر فنکشن پر کنٹرول پاس کرتا ہے۔

• next("route") موجودہ روٹ کے لیے بقیہ ہینڈلرز کو چھوڑ دیتا ہے اور مماثل راستوں کی تلاش جاری رکھتا ہے۔ مماثلت درخواست کے طریقہ کار اور راستے دونوں کو مدنظر رکھتی ہے۔ یہ صرف مڈل ویئر کے افعال کے اندر موثر ہے جس کی وضاحت کی گئی ہے: app.METHOD() یا router.METHOD().

• next(new Error(value)) مڈل ویئر کو سنبھالنے والے درج ذیل ایرر پر کنٹرول پاس کریں:

• اگر فی الحال چل رہا مڈل ویئر درخواست کے جواب کے چکر کو ختم نہیں کرتا ہے۔ next آپ پیرامیٹرز کی وضاحت کرکے اور اسے کال بیک میں کال کرکے اگلے مڈل ویئر کو کنٹرول منتقل کرتے ہیں۔ بصورت دیگر، کلائنٹ کی درخواست زیر التوا رہے گی۔

Express.js میں مڈل ویئر کیٹیگری

ایکسپریس مڈل ویئر کو پانچ اہم زمروں میں درجہ بندی کیا جا سکتا ہے:

• درخواست کی سطح

• روٹر کی سطح

• ہینڈلنگ میں خرابی

• اندرونی سجاوٹ

• تیسری پارٹی

یہ زمرے بیان کرتے ہیں کہ مڈل ویئر کہاں نصب ہے، یہ کیسے کام کرتا ہے، یا کس ذریعہ سے۔

ایپلیکیشن لیول مڈل ویئر

اس قسم کا مڈل ویئر ایکسپریس ایپلیکیشن مثالوں کی حمایت کرتا ہے (app)۔

ہاں:

import express from "express";
const app = express();

app.get("/profile", (req, res, next) => {
  console.log("Hi, there!");
  next();
});

راؤٹر لیول مڈل ویئر

یہ مڈل ویئر ایکسپریس راؤٹر مثالوں پر چلتا ہے (router)۔ یہ ایپلیکیشن لیول مڈل ویئر کی طرح کام کرتا ہے، لیکن ایپلی کیشن کے بجائے روٹر پر نصب ہوتا ہے۔

ہاں:

import express from "express";
const router = express.Router();

router.get("/profile", (req, res, next) => {
  console.log("Hi, there!");
  next();
});

مڈل ویئر کو سنبھالنے میں خرابی۔

یہ مڈل ویئر درخواست کی کارروائی کے دوران غلطیوں کو سنبھالتا ہے اور اس کی شناخت چار پیرامیٹر کے دستخط سے ہوتی ہے۔

import express from "express";
const app = express();

app.use((err, req, res, next) => {
  console.error(err);
  res.status(500).send("Error 500: Encountered an unexpected error");
});

میمو:

• تمام چار پیرامیٹرز کا موجود ہونا ضروری ہے، چاہے کچھ پیرامیٹرز استعمال نہ ہوں۔ بصورت دیگر ایکسپریس اس فنکشن کو ایرر ہینڈلنگ مڈل ویئر کے طور پر تسلیم نہیں کرے گا۔ ایکسپریس اپنے مڈل ویئر کی شناخت کے لیے نام کے بجائے اعلان کردہ پیرامیٹرز کی تعداد کا استعمال کرتا ہے۔

• پاتھ اور مڈل ویئر کے بعد مڈل ویئر کو ہینڈل کرنے والی غلطی کی وضاحت کریں جو غلطیوں کو ہینڈل کرے۔ یہ انتظام ہمیں پچھلے مڈل ویئر فنکشنز سے پھیلائی گئی غلطیوں کو سنبھالنے کی اجازت دیتا ہے۔

بلٹ ان مڈل ویئر

یہ مڈل ویئر خصوصیات ایکسپریس میں شامل ہیں اور اضافی پیکجز کو انسٹال کیے بغیر مقامی طور پر دستیاب ہیں۔

ہاں:

import express from "express";

express.static("public");
express.json();
express.urlencoded();

تھرڈ پارٹی مڈل ویئر

یہ مڈل ویئر فنکشنز وسیع تر ایکسپریس کمیونٹی کے تیار کردہ اور اشتراک کردہ بیرونی پیکیجز کے ذریعے فراہم کیے جاتے ہیں۔ مثالوں میں کور، مورگن اور ہیلمٹ شامل ہیں۔

import express from "express";
import cors from "cors";

const app = express();
app.use(cors());

نوٹ: ایکسپریس میں مڈل ویئر کے زمرے باہمی طور پر خصوصی نہیں ہیں۔

مثال 1:

import express from "express";

const app = express();
app.use(express.json());

کہ express.json() اوپر کے ٹکڑوں میں مڈل ویئر دونوں ہیں۔

• کیونکہ یہ درخواست کی سطح سے منسلک ہے۔ app مثال

• یہ اس لیے بنایا گیا ہے کیونکہ ایکسپریس اسے فراہم کرتا ہے۔

مثال 2:

import express from "express";
import cors from "cors";

const router = express.Router();
router.use(cors());

کہ cors() اوپر کے ٹکڑوں میں مڈل ویئر دونوں ہیں۔

• کیونکہ یہ روٹر کی سطح پر جڑا ہوا ہے۔ router مثال

• فریق ثالث (کیونکہ یہ ایک ایکسپریس بیرونی پیکیج کے ذریعہ فراہم کیا گیا تھا)

یہ کیا ہے، آپ پوچھتے ہیں؟ express.Router() مندرجہ بالا مثال میں طریقہ کیا ہے؟ آئیے اس کے بارے میں بات کرتے ہیں۔

یہ کیا ہے؟ express.Router() طریقہ؟

کہ express.Router() یہ طریقہ ایک روٹر آبجیکٹ بناتا ہے جو راستوں اور مڈل ویئر سے متعلق گروپ کرتا ہے۔ آپ اس راؤٹر کو ایکسپریس ایپلیکیشن سے یا کسی دوسرے راؤٹر سے یہ استعمال کر کے منسلک کر سکتے ہیں: app.use() یا router.use().

جیسا کہ آپ اوپر کی تصویر میں دیکھ سکتے ہیں، راؤٹرز کو اکثر منی ایپس کہا جاتا ہے کیونکہ وہ ایک مکمل مڈل ویئر اور روٹنگ سسٹم فراہم کرتے ہیں۔ یہ آپ کو ایک جگہ پر متعلقہ راستوں کی وضاحت کرنے اور انہیں اپنی مقامی ایکسپریس ایپلی کیشن میں ماؤنٹ کرنے کی اجازت دے کر اپنی ایپلی کیشنز کو منظم کرنے میں مدد کرتا ہے۔ مثال کے طور پر، ہم کہتے ہیں کہ آپ کی ایکسپریس ایپلیکیشن کو روٹس اور مڈل ویئر کی درج ذیل اقسام کو ہینڈل کرنے کی ضرورت ہے:

• اشاریہ: انڈیکس سے متعلقہ راستوں اور مڈل ویئر کے لیے۔

• کتابیں: کتاب سے متعلقہ راستوں اور مڈل ویئر کے لیے۔

• ویڈیو: ویڈیو سے متعلقہ راستوں اور مڈل ویئر کے لیے۔

اس صورت حال میں آپ استعمال کر سکتے ہیں: express.Router() متعلقہ راستوں اور مڈل ویئر کو گروپ کرنے کا ایک طریقہ۔ اس سے آپ کو اپنے آئٹمز کو منظم رکھنے اور ہر گروپ کو منظم کرنے اور دوبارہ استعمال کرنے میں مدد ملے گی۔

اگرچہ آپ تمام راؤٹرز اور ایپ کی مثالیں ایک فائل میں بنا سکتے ہیں، لیکن ڈویلپرز عام طور پر بہتر ترتیب اور دیکھ بھال کے لیے راؤٹرز کو الگ فائلوں میں رکھتے ہیں۔ ہم ہر راستے اور مڈل ویئر کے زمرے کے لیے الگ الگ فائلیں بنا کر اس نقطہ نظر کی پیروی کریں گے۔

روٹر کے لیے ڈائرکٹری بنائیں

بنانا routes اپنی تمام ایپس کے راؤٹرز کو اسٹور کرنے کے لیے، انہیں اپنے پروجیکٹ کے روٹ میں موجود ڈائرکٹری میں محفوظ کریں۔

mkdir routes

میمو: آپ اس فولڈر کو جو چاہیں نام دے سکتے ہیں، لیکن routes یہ ایک عام نام ہے کیونکہ اس میں ایک فائل ہے جو ایپ کے راستے (URL اینڈ پوائنٹ) کی وضاحت کرتی ہے۔ کہ express.Router() ایک طریقہ صرف ایک ٹول ہے جو ایکسپریس اس راستے کو منظم کرنے کے لیے فراہم کرتا ہے۔

روٹ فائل بنائیں

روٹ فائل ایک ماڈیول ہے جو متعلقہ راستوں کی وضاحت کرتا ہے اور ایکسپریس راؤٹر اشیاء کو برآمد کرتا ہے۔ ہر فائل عام طور پر کسی وسائل یا فنکشن کی نمائندگی کرتی ہے، جیسے صارف، کتاب، یا سرٹیفکیٹ۔

روٹ فائل بنائیں۔ routes ڈائریکٹری

touch routes/index.js routes/books.js routes/videos.js

کتاب سے متعلق راستوں اور مڈل ویئر کے لیے منی ایپس بنائیں

افتتاحی books.js فائل کا استعمال کریں express.Router() ایک مثال جو کسی کتاب سے وابستہ تمام راستوں اور مڈل ویئر کو گروپ کرتی ہے۔

routes/books.js

// Import the Router function from Express
import { Router } from "express";

// Create a new Express router instance
const bookRouter = Router();

// Define middleware specific to this router instance
bookRouter.use((req, res, next) => {
  console.log("Book route accessed at: ", Date.now());
  next();
});

// Define routes specific to this router instance:

bookRouter.get("https://www.freecodecamp.org/", (req, res) => {
  res.send("");
});

bookRouter.get("/:id", (req, res) => {
  res.type("text/plain").send(`Details for book ${req.params.id}`);
});

bookRouter.get("/:id/draft", (req, res) => {
  // Escape the ID before inserting it into HTML text
  const bookId = req.params.id
    .replaceAll("&", "&")
    .replaceAll("<", "<")
    .replaceAll(">", ">");
  res.send(``);
});

export { bookRouter };

مندرجہ بالا کوڈ کیا کرتا ہے یہاں ہے:

• نسل bookRouter درج ذیل ایکسپریس APIs تک رسائی کی مثالیں: .get()، .post()، .use()اور .route().

• میں ایکسپریس استعمال کرتا ہوں۔ router.use() مڈل ویئر کو کیسے ماؤنٹ کریں۔ bookRouter مثال

• میں ایکسپریس استعمال کرتا ہوں۔ router.get() یہ بتانے کا ایک طریقہ کہ سرور HTTP GET کی درخواستوں کو کیسے ہینڈل کرتا ہے۔

• میں ایکسپریس استعمال کرتا ہوں۔ res.send() وہ طریقہ جو HTTP جواب بھیجتا ہے اور فراہم کردہ ڈیٹا کی قسم کی بنیاد پر خود بخود مناسب ہیڈر سیٹ کرتا ہے۔ کہ /:id ہینڈلر واضح طور پر جواب کی قسم کو سادہ متن پر سیٹ کرتا ہے، لیکن /:id/draft ہینڈلر ID سے بچ جاتا ہے اور اسے HTML میں داخل کرنے سے پہلے متن کے طور پر دکھاتا ہے۔

• استعمال کریں export یہ بیان ایپلی کیشن کو جب بھی ضرورت ہو راؤٹر آبجیکٹ حاصل کرنے کی اجازت دیتا ہے۔

راؤٹر لیب کا وقت

اب وقت آگیا ہے کہ آپ نے ایکسپریس راؤٹر کے بارے میں جو کچھ سیکھا ہے اسے جانچیں۔

اس مشق کے لیے، ہم پروجیکٹ کے انڈیکس، ویڈیو سے متعلقہ راستے، اور مڈل ویئر کے لیے ایک منی ایپ بنائیں گے۔ کو برآمد کریں۔ indexRouter سے routes/index.js اور videoRouter سے routes/videos.js یقینی بنائیں کہ یہ اگلے حصے میں درآمدات سے میل کھاتا ہے۔

ایک لمحہ نکالیں اور آگے بڑھنے سے پہلے اسے اپنے لیے آزمائیں۔ اگر آپ کو مدد کی ضرورت ہے، تو براہ کرم جائزہ لیں: books.js فائل مشق آپ کو بہتر طور پر سمجھنے میں مدد کرے گی۔

ورزش مکمل کرنے کے بعد، پہلے سے طے شدہ ایکسپریس ایپ کی ترتیبات پر جائیں۔

مقامی ایکسپریس ایپلی کیشنز کو اپ ڈیٹ کریں۔

اپنا پروجیکٹ کھولیں۔ server.js ایک فائل بنائیں اور اپنے راؤٹر کو ڈیفالٹ ایکسپریس ایپلیکیشن سے جوڑیں۔

server.js

// Add the Express module
import express from "express";

// Import the routers from their separate files
import { indexRouter } from "./routes/index.js";
import { bookRouter } from "./routes/books.js";
import { videoRouter } from "./routes/videos.js";

// Create a new Express application instance
const app = express();

// Specify the host and port to receive requests
const host = "localhost";
const port = 3000;

// Mount the routers to specific paths:

// Mount indexRouter at /
app.use("https://www.freecodecamp.org/", indexRouter);

// Mount bookRouter at /books and its subpaths
app.use("/books", bookRouter);

// Mount videoRouter at /videos and its subpaths
app.use("/videos", videoRouter);

// Run the server on the specified port and host
app.listen(port, host, () => {
  console.log(`Server running live at http://${host}:
${port}!`);
});

مندرجہ بالا کوڈ کیا کرتا ہے یہاں ہے:

• ایکسپریس APIs جیسے راؤٹرز اور مڈل ویئر تک رسائی کے لیے ایک ایکسپریس ایپلیکیشن مثال بنائیں جو Node.js میں HTTP درخواست کی پروسیسنگ کو آسان بناتے ہیں۔

• میں ایکسپریس استعمال کرتا ہوں۔ app.use() اپنی بنیادی ایکسپریس ایپلیکیشن میں منی ایپ کو شامل کرنے کا طریقہ یہاں ہے۔

• میں ایکسپریس استعمال کرتا ہوں۔ app.listen() وہ طریقہ جو ایک مخصوص پورٹ پر Node.js HTTP سرور کو شروع کرتا ہے اور جب سرور کلائنٹ کی درخواستوں کو سننا شروع کرتا ہے تو کال بیک کو انجام دیتا ہے۔

میمو: کہ app.use() طریقہ کار میں راستہ روٹر کے پہلے سے طے شدہ راستے یا ماؤنٹ پاتھ کے طور پر کام کرتا ہے۔ روٹر پر متعین راستے اس ماؤنٹ پاتھ سے مماثل ہیں۔ مثال کے طور پر:

• bookRouterایس / روٹ ملاپ کی درخواستیں۔ /books.

• bookRouterایس /:id روٹ ملاپ کی درخواستیں۔ /books/:id.

• bookRouterایس /:id/draft روٹ ملاپ کی درخواستیں۔ /books/:id/draft.

Express.js ایپلیکیشن چل رہا ہے۔

اپنا راؤٹر سیٹ کرنے کے بعد، اپنی ایپ کو چلانے کے لیے Node.js کے ساتھ سرور فائل شروع کریں۔

node --watch server.js

پھر اپنی ایپ کو مخصوص اختتامی نقطہ پر حقیقی وقت میں چلتے ہوئے دیکھیں۔ مثال کے طور پر http://localhost:3000/books.

ٹپ: اس کا استعمال کرتے ہوئے چلنے والے عمل کو روکیں: Ctrl + C ونڈوز، میک او ایس یا لینکس پر۔

ایکسپریس راؤٹر کے بارے میں جاننے کے لیے اہم چیزیں

اپنا ایکسپریس راؤٹر استعمال کرتے وقت کچھ اہم چیزیں یاد رکھیں:

راؤٹرز بطور ڈیفالٹ پیرنٹ روٹ پیرامیٹرز کے وارث نہیں ہوتے ہیں۔

پہلے سے طے شدہ طور پر، ایکسپریس روٹر کے ماؤنٹ پاتھ سے اس روٹر کے اندرونی راستوں تک پیرامیٹرز کو منتقل نہیں کرتا ہے۔

ہاں:

// Add the Express module
import express from "express";

// Create a new Express application instance
const app = express();

// Create a new Express router instance
const bookRouter = express.Router();

// Define a sub-route
bookRouter.get("/books/:bookId", (req, res) => {
  const topic = req.params.topic; // undefined by default
  const bookId = req.params.bookId;
  res.json({ topic, bookId });
});

// Define a parent route
app.use("/codesweetly/:topic", bookRouter);

// Run the server on the specified port and host
const server = app.listen(3000, "127.0.0.1", () => {
  const { address, port } = server.address();
  console.log(`Server running live at http://${address}:
${port}!`);
});

اوپر کی مثال میں، اگر آپ ویب سرور چلاتے ہیں اور اپنے براؤزر میں درج ذیل یو آر ایل درج کرتے ہیں:

http://127.0.0.1:3000/codesweetly/CSS/books/91827

کہ req.params.topic پیرامیٹرز ہیں۔ undefined اس کی وجہ یہ ہے کہ چائلڈ پاتھز کو بطور ڈیفالٹ اپنے پیرنٹ پاتھ کے پاتھ پیرامیٹرز تک رسائی حاصل نہیں ہوتی ہے۔ تو سرور {"bookId":"91827"} کلائنٹ کا جواب۔

چائلڈ پاتھ کو پیرنٹ پاتھ پیرامیٹرز تک رسائی کی اجازت دینے کے لیے، درج ذیل سیٹ کریں: mergeParams کو true روٹر بناتے وقت۔

ہاں:

// Add the Express module
import express from "express";

// Create a new Express application instance
const app = express();

// Create a new Express router instance
const bookRouter = express.Router({ mergeParams: true });

// Define a sub-route
bookRouter.get("/books/:bookId", (req, res) => {
  const topic = req.params.topic; // "CSS" for the URL below
  const bookId = req.params.bookId;
  res.json({ topic, bookId });
});

// Define a parent route
app.use("/codesweetly/:topic", bookRouter);

// Run the server on the specified port and host
const server = app.listen(3000, "127.0.0.1", () => {
  const { address, port } = server.address();
  console.log(`Server running live at http://${address}:
${port}!`);
});

اوپر کی مثال میں، اگر آپ ویب سرور چلاتے ہیں اور اپنے براؤزر میں درج ذیل یو آر ایل درج کرتے ہیں:

http://127.0.0.1:3000/codesweetly/CSS/books/91827

کہ req.params.topic پیرامیٹرز ہیں۔ CSS کیونکہ mergeParams: true چائلڈ پاتھ کو پیرنٹ پاتھ پیرامیٹرز تک رسائی کی اجازت دیتا ہے۔ تو سرور بھیجتا ہے: {"topic":"CSS","bookId":"91827"} کلائنٹ کا جواب۔

ٹپ:

• لائن const { address, port } = server.address() آبجیکٹ ڈیسٹرکچرنگ کا استعمال address اور port کی قدر server.address() اعتراض

• کہ app.listen() طریقہ ڈیفالٹ Node.js واپس کرتا ہے۔ http.Server مثال کے طور پر، درج ذیل بنیادی سرور APIs تک رسائی کی اجازت دیتا ہے: .address()، .on()اور .maxHeadersCount.

• 127.0.0.1 IPv4 لوپ بیک ایڈریس۔ localhost ہو سکتا ہے حل ہو جائے۔ 127.0.0.1 یا IPv6 لوپ بیک ایڈریس ::1. استعمال کریں http://127.0.0.1:3000 اس کی وجہ یہ ہے کہ ان مثالوں میں سرور واضح طور پر اپنے IPv4 ایڈریس کو سنتا ہے۔

ایک راؤٹر کو دوسرے راؤٹر پر لگایا جا سکتا ہے۔

آپ ایک ایکسپریس راؤٹر کو دوسرے ایکسپریس راؤٹر سے جوڑ سکتے ہیں۔

ہاں:

// Add the Express module
import express from "express";

// Create a new Express application instance
const app = express();

// Create two Express router instances
const htmlRouter = express.Router();
const bookRouter = express.Router();

// Define a sub-route
bookRouter.get("/:bookId", (req, res) => {
  res
    .type("text/plain")
    .send(`Details for the HTML book with ID ${req.params.bookId}`);
});

// Mount bookRouter on htmlRouter's /books path
htmlRouter.use("/books", bookRouter);

// Mount htmlRouter at /html and its subpaths
app.use("/html", htmlRouter);

// Run the server on the specified port and host
const server = app.listen(3000, "127.0.0.1", () => {
  const { address, port } = server.address();
  console.log(`Server running live at http://${address}:
${port}!`);
});

کہ bookRouterایس GET /:bookId روٹ ملاپ کی درخواستیں۔ GET /html/books/:bookId کیونکہ اس مثال میں بک روٹر اس سے منسلک ہے: htmlRouter.

لہذا، اوپر کی مثال میں، اگر آپ ویب سرور چلاتے ہیں اور اپنے براؤزر میں درج ذیل یو آر ایل درج کرتے ہیں:

http://127.0.0.1:3000/html/books/91827

سرور کلائنٹ کو جواب "ایچ ٹی ایم ایل کتاب کی تفصیلات ID 91827 کے ساتھ” بھیجتا ہے۔

اب جب کہ آپ جانتے ہیں کہ روٹر کیا ہے، آئیے اس پر بات کرتے ہیں کہ آپ ویب صفحہ کے مواد اور ساخت کی وضاحت کے لیے کس طرح آراء استعمال کرسکتے ہیں جسے آپ کی Express.js ایپ صارف کو واپس کرتی ہے۔

Express.js میں کیا خیالات ہیں؟

ایک منظر ایک ٹیمپلیٹ یا دستاویز ہے جو ویب صفحہ کے مواد اور ساخت کی وضاحت کرتا ہے جسے آپ کی Express.js ایپلیکیشن صارف کو واپس کرتی ہے۔ یہ ایک جامد HTML فائل یا ایک متحرک ٹیمپلیٹ ہو سکتا ہے جو ٹیمپلیٹ انجن کے ذریعے رن ٹائم پر HTML میں پیش کیا جاتا ہے۔

یہ گائیڈ دو قسم کے خیالات کا استعمال کرتا ہے:

• جامد نقطہ نظر

• متحرک نظارہ

Express.js میں جامد نظارے کیا ہیں؟

جامد نظارے میں حتمی HTML ہوتا ہے جسے سرور براؤزر کو بھیجتا ہے۔ مثال کے طور پر، چار جامد نظارے فراہم کرنے کے لیے ایک Express.js ایپلیکیشن ترتیب دیں۔

ایک جامد منظر بنائیں

بنانا index.html، about.html، contact.htmlاور 404.html یہ فائل پروجیکٹ کی روٹ ڈائرکٹری میں واقع ہے۔

touch index.html about.html contact.html 404.html

ہر منظر کو کھولیں اور درج ذیل HTML مواد شامل کریں:

index.html (ہوم ​​پیج)

  
    
    
    
  
  
    
    
Site's pages:
    
  

about.html (صفحہ کے بارے میں)

  
    
    
    
  
  
    
    

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero soluta
      voluptas reprehenderit minus veniam! Corrupti a esse quidem nostrum harum,
      explicabo tempore tempora aut, sint et voluptatem magni ea vel?
    
    
  

contact.html (رابطہ کا صفحہ)

404.html (خرابی صفحہ)

  
    
    
    
  
  
    
    
Sorry, we couldn't find that page
    
  

اگلا، براؤزر کنکشن کو ہینڈل کرنے کے لیے اپنے پروجیکٹ کو ترتیب دیں۔

جامد نظارے پیش کرنے کے لیے اپنے پروجیکٹ کے ویب سرور کو کنفیگر کریں۔

منصوبے کے server.js ایک ماڈیول بنائیں اور درخواستوں کے جواب میں ایک مناسب جامد HTML منظر پیش کرنے کے لیے اپنے ویب سرور کو ترتیب دیں۔

// Add the required modules
import express from "express";
import { dirname, join } from "node:path";
import { fileURLToPath } from "node:url";

// Create a new Express application instance
const app = express();

// Specify the hostname and port to receive requests
const host = "localhost";
const port = 3000;

// Get the directory name of the current file's path
const __dirname = dirname(fileURLToPath(import.meta.url));

// Use the index.html static view as a response to 'GET /' requests
app.get("https://www.freecodecamp.org/", (req, res) => res.sendFile(join(__dirname, "index.html")));

// Use the about.html static view as a response to 'GET /about' requests
app.get("https://www.freecodecamp.org/about", (req, res) => {
  res.sendFile(join(__dirname, "about.html"));
});

// Use the contact.html static view as a response to 'GET /contact' requests
app.get("/contact", (req, res) => {
  res.sendFile(join(__dirname, "contact.html"));
});

// Use the 404.html static view as a response to unmatched requests
app.use((req, res) => {
  res.status(404).sendFile(join(__dirname, "404.html"));
});

// Run the server on the specified port and hostname
app.listen(port, host, () => {
  console.log(`Server running live at http://${host}:
${port}`);
});

اہم کام جو اوپر کا ٹکڑا انجام دیتا ہے وہ ہیں:

• ایکسپریس APIs جیسے راؤٹرز اور مڈل ویئر تک رسائی کے لیے ایک ایکسپریس ایپلیکیشن مثال بنائیں جو Node.js میں HTTP درخواست کی پروسیسنگ کو آسان بناتے ہیں۔

• موجودہ فائل پاتھ کا ڈائریکٹری نام حاصل کرتا ہے۔

  • dirname() راستے کی ڈائریکٹری کا نام لوٹاتا ہے۔

  • fileURLToPath() URL کو ایک درست پاتھ سٹرنگ میں تبدیل کرتا ہے۔

  • import.meta.url موجودہ فائل کا مطلق URL لوٹاتا ہے۔

• کلائنٹس سے درخواستیں وصول کرنے اور ان کا جواب دینے کے لیے ایک راستہ بنائیں۔

  • app ایکسپریس درخواست کی مثال۔

  • کہ app.get() طریقہ اس بات کی وضاحت کرتا ہے کہ سرور کس طرح مخصوص راستے (طریقہ کی پہلی دلیل) کے لیے HTTP GET درخواست کو ہینڈل کرتا ہے۔

  • کہ res.sendFile() یہ طریقہ سرور سے کلائنٹ کو فائل بھیجتا ہے۔

  • join() موجودہ آپریٹنگ سسٹم کے پاتھ سیپریٹر کا استعمال کرتے ہوئے متعدد پاتھ سیگمنٹس کو ایک واحد، مکمل طور پر اہل پاتھ سٹرنگ میں جوڑتا ہے۔

  • کہ app.use() طریقے آپ کو ایک ہینڈلر فنکشن سیٹ کرنے کی اجازت دیتے ہیں جو ایکسپریس HTTP درخواست کے تمام طریقوں اور روٹس کے لیے انجام دیتا ہے۔ راستے کی دلیل کی وضاحت کرتے وقت app.use() مماثل راستے کے سابقہ ​​کے طور پر سمجھا جاتا ہے۔ مثال کے طور پر /book میچز /book، /book/dashboardاور /book/dashboard/author/202605.

  • res.status(404) HTTP اسٹیٹس کوڈ کو ان درخواستوں کے لیے 404 پر سیٹ کرتا ہے جو جواب موصول کیے بغیر اس حتمی ہینڈلر تک پہنچ جاتی ہیں۔

• براہ کرم ایکسپریس استعمال کریں۔ app.listen() وہ طریقہ جو ایک مخصوص پورٹ پر Node.js HTTP سرور کو شروع کرتا ہے اور جب سرور کلائنٹ کی درخواستوں کو سننا شروع کرتا ہے تو کال بیک کو انجام دیتا ہے۔

Express.js ایپلیکیشن چل رہا ہے۔

سرور قائم کرنے کے بعد، اسے Node.js سے چلائیں۔

node --watch server.js

پھر، اپنی ایپس کو حقیقی وقت میں چلتے ہوئے دیکھیں۔ http://localhost:3000.

ٹپ: اس کا استعمال کرتے ہوئے چلنے والے عمل کو روکیں: Ctrl + C ونڈوز، میک او ایس یا لینکس پر۔

چیزوں کو منظم رکھنے کے لیے، تمام جامد نظارے ہٹا دیں۔ public ڈائریکٹری یہ عام رواج ہے۔

جامد نظارے کے لیے ایک ڈائرکٹری بنائیں

بنانا public تمام سٹیٹک ویوز کو محفوظ کرنے کے لیے، انہیں اپنے پروجیکٹ کی روٹ میں موجود ڈائرکٹری میں محفوظ کریں۔

mkdir public

میمو: آپ اس فولڈر کو جو چاہیں نام دے سکتے ہیں، لیکن public اس بات کی نشاندہی کرنے کے لیے ایک عام انتخاب کہ فائل (HTML، CSS، کلائنٹ سائیڈ JavaScript، تصاویر) کلائنٹ کو پیش کرنے کا ارادہ رکھتی ہے۔ آپ کسی فولڈر کے مواد تک اس کے نام سے رسائی حاصل نہیں کر سکتے۔ یہ فراہم کرنے کے لیے سرور کو کنفیگر کیا جانا چاہیے۔ حساس معلومات شامل نہ کریں۔

تمام جامد نظارے۔ public فولڈر

mv index.html about.html contact.html 404.html public/

سرور سے جامد نظارے حاصل کرنے کے لیے اپنے سرور کو اپ ڈیٹ کریں۔ public فولڈر

server.js

import express from "express";
import { dirname, join } from "node:path";
import { fileURLToPath } from "node:url";

const app = express();
const host = "localhost";
const port = 3000;
const __dirname = dirname(fileURLToPath(import.meta.url));

// Serve static assets (HTML, CSS, images) from the 'public' folder
app.use(express.static(join(__dirname, "public")));

// Use the index.html static view as a response to 'GET /' requests
app.get("https://www.freecodecamp.org/", (req, res) => {
  res.sendFile(join(__dirname, "/public/index.html"));
});

// Use the about.html static view as a response to 'GET /about' requests
app.get("https://www.freecodecamp.org/about", (req, res) => {
  res.sendFile(join(__dirname, "/public/about.html"));
});

// Use the contact.html static view as a response to 'GET /contact' requests
app.get("/contact", (req, res) => {
  res.sendFile(join(__dirname, "/public/contact.html"));
});

// Use the 404.html static view as a response to unmatched requests
app.use((req, res) => {
  res.status(404).sendFile(join(__dirname, "/public/404.html"));
});

// Run the server on the specified port and hostname:
app.listen(port, host, () => {
  console.log(`Server running live at http://${host}:
${port}`);
});

میمو کہ app.use(express.static(join(__dirname, 'public'))) لائن ایکسپریس سے کہتی ہے کہ پہلے جامد اثاثہ کی درخواستوں کے لیے عوامی فولڈر کو چیک کریں۔ جب اسے وہاں کوئی فائل ملتی ہے، تو یہ اسے فوری طور پر براؤزر میں پیش کرتا ہے اور درخواست کے جواب کے چکر کو روک دیتا ہے۔

ہاں:

• اگر صارف درخواست کرتا ہے۔ localhost:3000/about.html، express.static تصدیق کریں۔ public فولڈر about.html فائل جب مل جاتا ہے، ایکسپریس خود بخود روٹ ہینڈلر بھیجتا ہے جو جامد مڈل ویئر پر عمل کیے بغیر اس کی پیروی کرتا ہے۔

• اگر صارف درخواست کرتا ہے۔ localhost:3000/about، express.static تصدیق کریں۔ public فولڈر about یہ ایک فائل ہے (کوئی توسیع نہیں)۔ جب یہ پایا جاتا ہے about اس کے بجائے، آپ کو ایک ڈائریکٹری میں بھیج دیا جائے گا۔ /about/اسے کہاں تلاش کرنا ہے index.html بنیادی طور پر۔ اس گائیڈ میں بنائی گئی فائلوں کا استعمال کرتے ہوئے، آپ کر سکتے ہیں۔ about فائل یا about چونکہ ڈائریکٹری موجود ہے، ایکسپریس استعمال کرتا ہے: GET /about درخواستوں کو ہینڈل کرنے کے لیے حسب ضرورت راستہ۔

اب آئیے متحرک خیالات پر بات کرتے ہیں۔

Express.js میں متحرک نظارے کیا ہیں؟

ڈائنامک ویوز میں پلیس ہولڈرز ہوتے ہیں جو ٹیمپلیٹ انجن، جیسے EJS، رن ٹائم کے وقت ڈیٹا سے بدل دیتے ہیں۔

Express.js ٹیمپلیٹ انجنوں جیسے EJS، Pug، اور Handlebars کو سپورٹ کرتا ہے۔ اس بات پر بحث کرنے کے لیے کہ متحرک خیالات کیسے کام کرتے ہیں، آئیے EJS کو بطور مثال لیں۔

EJS کیا ہے؟

ایمبیڈڈ JavaScript ٹیمپلیٹ (EJS) ایک ٹیمپلیٹ لینگویج ہے جو آپ کو ٹیمپلیٹ ٹیگز کا استعمال کرتے ہوئے HTML ٹیمپلیٹ میں JavaScript کوڈ داخل کرکے متحرک HTML ویوز بنانے کی اجازت دیتی ہے۔

جب سرور ٹیمپلیٹ پیش کرتا ہے، EJS انجن ایمبیڈڈ JavaScript کو چلاتا ہے اور حتمی HTML تیار کرتا ہے جو کلائنٹ کو بھیجا جاتا ہے۔

مثال کے طور پر، درج ذیل کوڈ پر غور کریں: اگلا، EJS انسٹال کریں۔ npm install ejs اس مثال کو چلانے سے پہلے:

// Add the Express and EJS modules
import express from "express";
import ejs from "ejs";

// Create a new Express application instance
const app = express();

// Specify the host and port to receive requests
const host = "localhost";
const port = 8000;

// Define the data object
const friendsArray = ["Sarah", "Abraham", "Mary"];
const replacementObject = { friends: friendsArray };

// Use backticks to define a template string with embedded JavaScript
const templateString = `
  
  
Welcome to CodeSweetly.
`;

// Compile and render the template string to HTML (the rendered view)
const html = ejs.render(templateString, replacementObject);

// Use the dynamic view as a response to 'GET /' requests
app.get("https://www.freecodecamp.org/", (req, res) => res.send(html));

// Run the server on the specified port and hostname
app.listen(port, host, () => {
  console.log(`Server running live at http://${host}:
${port}!`);
});

مندرجہ بالا ٹکڑا ایکسپریس کو ہدایت کرتا ہے کہ پیش کردہ منظر کلائنٹ کو بھیجے جب صارف اس کی درخواست کرے۔ / سڑک

رن ٹائم پر، EJS تشخیص کرتا ہے: friends.join(", ") منظور شدہ صف کا استعمال کرتے ہوئے friends نتیجہ داخل کریں، Sarah, Abraham, MaryHTML میں۔ یہاں رینڈرنگ اس وقت ہوتی ہے جب اسکرپٹ شروع ہوتا ہے۔ ہر درخواست کو ایک ہی پیش کردہ HTML موصول ہوتا ہے۔

EJS ٹیمپلیٹ ٹیگز کیا ہیں؟

EJS ٹیمپلیٹ ٹیگز خاص ٹیگ ہیں جو استعمال کرتے ہوئے لکھے گئے ہیں: <% ... %> نحو یہ آپ کو اپنے EJS ویو ٹیمپلیٹ میں JavaScript کوڈ اور اقدار کو شامل کرنے کی اجازت دیتا ہے۔

جب EJS ٹیمپلیٹ پیش کرتا ہے، تو اسکرپٹ لیٹ ٹیگز جاوا اسکرپٹ کو چلاتے ہیں، آؤٹ پٹ ٹیگز ویلیو داخل کرتے ہیں، اور تبصرہ ٹیگز کو نظر انداز کر دیا جاتا ہے۔

مثال کے طور پر <%= %> نیچے دیے گئے ٹیگز آپ کو JavaScript داخل کرنے کی اجازت دیتے ہیں۔ friend ویو ٹیمپلیٹ میں متغیرات شامل کریں۔

میمو: آؤٹ پٹ ٹیگز اس طرح: <%= %> ایک درست JavaScript اظہار پر مشتمل ہونا چاہیے۔ اسکرپٹ لیٹ ٹیگز جاوا اسکرپٹ کے بیانات اور کنٹرول فلو ڈھانچے کے حصے پر مشتمل ہوسکتے ہیں، اور تبصرہ ٹیگز میں تبصرے ہوسکتے ہیں۔

ہاں:

• <%=

  I love CodeSweetly

  %> ایک خرابی ہوتی ہے کیونکہ

  I love CodeSweetly

  یہ HTML ہے، جاوا اسکرپٹ نہیں۔

• <%= "

  I love CodeSweetly

  " %> یہ درست ہے کیونکہ "

  I love CodeSweetly

  " JavaScript سٹرنگ ڈیٹا کی قسم کے طور پر شامل ہے۔

EJS ٹیمپلیٹ ٹیگ کی اقسام

نو EJS ٹیگ فارمیٹس کا احاطہ کیا گیا ہے:

ٹپ: جاوا اسکرپٹ کوڈ کو EJS ٹیگز میں لپیٹیں تاکہ اسے آس پاس کے ٹیمپلیٹ مواد سے ممتاز کیا جا سکے۔ ایک واحد ٹیگ جوڑا جاوا اسکرپٹ کی متعدد لائنوں پر مشتمل ہوسکتا ہے۔

اختتامی ٹیگ (%>)

EJS ٹیگ کو ختم کرنے کے لیے، کلوزنگ ٹیگ استعمال کریں۔ اس کا بذات خود کوئی خاص رویہ نہیں ہے۔

اسکرپٹ ٹیگ (<%)

جاوا اسکرپٹ کوڈ کو چلانے کے لیے اسکرپٹ ٹیگ کا استعمال کریں بغیر پیدا کردہ HTML میں کچھ بھی آؤٹ پٹ کیے۔ یہ ٹیگ عام طور پر درج ذیل کنٹرول فلوز میں استعمال ہوتا ہے۔ if، forاور forEach منطق

  <% friends.forEach(function () { %>
  
My friend
  <% }) %>

اوپر کا ٹکڑا اس طرح لگتا ہے: <% %> JavaScript کوڈ کو EJS کو بتانے کے لیے کنٹرول فلو سٹیٹمنٹس کے ارد گرد نشان زد کیا گیا ہے کہ یہ صرف منطق کے استعمال کے لیے ہے اور اسے تیار کردہ HTML میں پیش نہیں کیا جانا چاہیے۔

فرار شدہ آؤٹ پٹ ٹیگز (<%=)

escaped output tags کا استعمال کرتے ہوئے JavaScript اظہار کا اندازہ کرتا ہے اور HTML حروف سے بچنے کے دوران نتیجے کو پیدا کردہ HTML کے طور پر نکالتا ہے۔ یہ ٹیگ ایچ ٹی ایم ایل انجیکشن کو روکنے میں مدد کرتا ہے۔

<%= 100 + 200 %>

اوپر کا ٹکڑا اس طرح لگتا ہے: <%= %> ہم EJS کو کوڈ کی قدروں کو تیار کردہ HTML میں رینڈر کرنے کے لیے ریاضی کے تاثرات کا استعمال کرتے ہیں۔

میمو: اگر ایکسپریشن HTML پر مشتمل اسٹرنگ کا اندازہ کرتا ہے، <%= %> براؤزر میں متن کے طور پر ظاہر کرنے کے لیے HTML نحو سے بچ جاتا ہے۔ مثال کے طور پر <%= "" %> پیش کرے گا as text, not an actual element.

<%- "" %>

<%% "
Name: Oluwatobi
" %>

<% "
Name: Oluwatobi
" %>

  <% friends.forEach(function (friend) { %>
  
<%= friend -%>
  <% }) %>

  <%_ friends.forEach(function (friend) { %>
  
<%= friend %>
  <%_ }) %>

  <% friends.forEach(function (friend) { _%>
  
<%= friend %>
  <% }) _%>

  <%# Loop through the friends array %>
  <% friends.forEach(function (friend) { _%>
  
<%= friend %>
  <% }) _%>

npm install ejs@6.0.1

// Add the Express and EJS modules
import express from "express";
import ejs from "ejs";

// Create a new Express application instance
const app = express();

// Specify the host and port to receive requests
const host = "localhost";
const port = 8000;

// Define the data object
const friendsData = {
  bestFriend: "Sarah",
  codingFriend: "Abraham",
  dreamFriend: "Mary",
};
const replacementObject = { friends: friendsData };

// Use backticks to define a template string with embedded JavaScript
const templateString = `

  
    
    

    <%# Loop through the friends object %>
    <% for (const eachFriend in friends) { -%>
      
<%= friends[eachFriend] %> is my <%= eachFriend %>
    <% } -%>
    
  

`;

// Compile and render the template string to HTML (the rendered view)
const htmlData = ejs.render(templateString, replacementObject);

// Use the dynamic view as a response to 'GET /' requests
app.get("https://www.freecodecamp.org/", (req, res) => res.send(htmlData));

// Run the server on the specified port and hostname
app.listen(port, host, () => {
  console.log(`Server running live at http://${host}:
${port}!`);
});

node --watch server.js

mkdir views

touch views/index.ejs

  
    
    

      <%# Loop through the friends object %>
      <% for (const eachFriend in friends) { -%>
      
<%= friends[eachFriend] %> is my <%= eachFriend %>
      <% } -%>
    
  

import express from "express";
import { dirname, join } from "node:path";
import { fileURLToPath } from "node:url";

const app = express();
const host = "localhost";
const port = 8000;
const __dirname = dirname(fileURLToPath(import.meta.url));

// Specify the app's views directory
app.set("views", join(__dirname, "views"));

// Specify the app's view engine
app.set("view engine", "ejs");

// Define the data object
const friendsData = {
  bestFriend: "Sarah",
  codingFriend: "Abraham",
  dreamFriend: "Mary",
};
const replacementObject = { friends: friendsData };

// Compile and render the index view template to HTML and use it as a response to 'GET /' requests
app.get("https://www.freecodecamp.org/", (req, res) => {
  res.render("index", replacementObject);
});

// Run the server on the specified port and hostname
app.listen(port, host, () => {
  console.log(`Server running live at http://${host}:
${port}`);
});

app.get("https://www.freecodecamp.org/", (req, res) => {
  res.render("index.ejs", replacementObject);
});

app.set("my name", "Oluwatobi");

const bio = app.get("my name");

console.log(bio); // Outputs: "Oluwatobi"

<%- include("path/to/partial", data) %>

import express from "express";
import { dirname, join } from "node:path";
import { fileURLToPath } from "node:url";

const app = express();
const host = "localhost";
const port = 8080;
const __dirname = dirname(fileURLToPath(import.meta.url));

app.set("views", join(__dirname, "views"));
app.set("view engine", "ejs");

const friendsData = {
  bestFriend: "Sarah",
  codingFriend: "Abraham",
  dreamFriend: "Mary",
};
const replacementObject = { friends: friendsData };

app.get("https://www.freecodecamp.org/", (req, res) => {
  res.render("index", replacementObject);
});

app.listen(port, host, () => {
  console.log(`Server running live at http://${host}:
${port}`);
});

  
    
    

    <%# Loop through the friends object %>
    <% for (const eachFriend in friends) { -%>
      
<%= friends[eachFriend] %> is my <%= eachFriend %>
    <% } -%>
    
  

mkdir views/partials

touch views/partials/friendLi.ejs

<%= friend %> is my <%= friendType %>

  
    
    

    <%# Loop through the friends object %>
    <% for (const eachFriend in friends) { -%>
      <%- include("partials/friendLi", { friend: friends[eachFriend], friendType: eachFriend }) %>
    <% } -%>
    
  

node --watch server.js