---
title: ExpressJS
localeTitle: ExpressJS
---
## ExpressJS

عندما يتعلق الأمر ببناء تطبيقات الويب باستخدام Node.js ، قد يستغرق إنشاء الخادم وقتًا طويلاً. على مر السنين نضجت Node.js بما فيه الكفاية بسبب الدعم من المجتمع. يساعد استخدام Node.js كواجهة خلفية لتطبيقات الويب ومواقع الويب المطورين على البدء في العمل على تطبيقهم أو منتجهم بسرعة. في هذا البرنامج التعليمي ، سننظر في Expressjs وهو إطار عمل Node.js لتطوير الويب الذي يأتي مزودًا بميزات مثل التوجيه والتقديم ودعم واجهات برمجة تطبيقات REST.

## ما هو اكسبرس؟

Express هو إطار Node.js الأكثر شيوعًا لأنه يتطلب الحد الأدنى من الإعداد لبدء تطبيق أو API وواجهة سريعة وغير مسبوقة في نفس الوقت. وبعبارة أخرى ، فإنه لا يفرض فلسفته الخاصة التي يجب أن تبنى التطبيق أو API بطريقة معينة ، على عكس ريلز ودجانجو. يمكن حساب مرونته من خلال عدد وحدات `npm` المتوفرة مما يجعلها قابلة للتوصيل في نفس الوقت. إذا كان لديك معرفة أساسية بـ HTML و CSS و JavaScript وكيف يعمل Node.js بشكل عام ، فلن تتمكن في أي وقت من البدء مع Expressjs.

تم تطوير Express بواسطة TJ Holowaychuk وتمت المحافظة عليه الآن بواسطة مؤسسة Node.js ومطوري البرامج مفتوحة المصدر. لبدء التطوير باستخدام Express ، يجب أن يكون لديك Node.js و npm مثبتين. يمكنك تثبيت [Node.js](https://nodejs.org/en/) على جهازك المحلي ومعه يأتي الأمر `npm` بسطر الأوامر الذي سيساعدنا على تثبيت الإضافات أو كما يسمى التبعيات في وقت لاحق في مشروعنا.

للتحقق مما إذا كان كل شيء مثبتًا بشكل صحيح ، يرجى فتح الجهاز ونوع:

 `node --version 
 v5.0.0 
 npm --version 
 3.5.2 
` 

إذا كنت تحصل على رقم الإصدار بدلاً من خطأ ، فهذا يعني أنك قمت بتثبيت Node.js و npm بنجاح.

## لماذا استخدام Expressjs؟

قبل أن نبدأ بآلية استخدام Express كإطار للخلفية ، دعونا نستكشف أولاً لماذا يجب أن نفكر في استخدامه أو أسباب شعبيته.

*   يتيح لك Express إنشاء تطبيقات ويب وتطبيقات متعددة للهواتف المحمولة والصفحات متعددة الصفحات. استخدام الواجهة الخلفية الشائعة الأخرى هو توفير واجهة برمجة التطبيقات لعميل (سواء كان على الويب أو الجوّال).
*   يأتي مع محرك قالب افتراضي ، Jade الذي يساعد على تسهيل تدفق البيانات إلى بنية موقع ويب ويدعم محركات القوالب الأخرى.
*   وهو يدعم MVC (Model-View-Controller) ، وهي بنية شائعة جدًا لتصميم تطبيقات الويب.
*   إنها منصة مشتركة ولا تقتصر على أي نظام تشغيل معين.
*   انها تستفيد على Node.js واحد مترابطة ونموذج غير متزامن.

عندما نقوم بإنشاء مشروع باستخدام `npm` ، يجب أن يحتوي مشروعنا على ملف `package.json` .

### خلق package.json

يحتوي ملف JSON (تدوين كائن جافا سكريبت) على كل معلومات عن أي مشروع Express. عدد الوحدات النمطية المثبتة ، واسم المشروع ، والإصدار ، وغيرها من معلومات التعريف. لإضافة Expressjs كوحدة نمطية في مشروعنا ، نحتاج أولاً إلى إنشاء دليل مشروع ثم إنشاء ملف package.json.

 `mkdir express-app-example 
 cd express-app-example 
 npm init --yes 
` 

سيؤدي هذا إلى إنشاء ملف `package.json` في جذر دليل المشروع. لتثبيت أي وحدة نمطية من `npm` نحتاج إلى وجود ملف `package.json` في هذا الدليل.

 `{ 
  "name": "express-web-app", 
  "version": "0.1.0", 
  "description": "", 
  "main": "index.js", 
  "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
  }, 
  "keywords": [], 
  "license": "MIT" 
 } 
` 

### تثبيت اكسبرس

الآن لدينا ملف `package.json` ، يمكننا تثبيت Express عن طريق تشغيل الأمر:

 `npm install --save express 
` 

يمكننا التأكد من أن Express قد تم تثبيته بشكل صحيح بطريقتين. أولاً ، سيكون هناك قسم جديد في ملف `package.json` يسمى `dependencies` التي يوجد تحتها Express الخاص بنا:

 `{ 
  "name": "express-web-app", 
  "version": "0.1.0", 
  "description": "", 
  "main": "index.js", 
  "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
  }, 
  "keywords": [], 
  "license": "MIT", 
  "dependencies": { 
    "express": "4.16.0" 
  } 
 } 
` 

الطريقة الثانية هي أن مجلدًا جديدًا يسمى `node_modules` ظهر فجأة في جذر دليل مشروعنا. يخزن هذا المجلد الحزم التي نثبتها محليًا في مشروعنا.

## بناء خادم مع اكسبرس

لاستخدام حزمة التثبيت الخاصة بنا لإطار Express وإنشاء تطبيق خادم بسيط ، سنقوم بإنشاء الملف ، `index.js` ، في جذر دليل مشروعنا.

 `const express = require('express'); 
 const app = express(); 
 
 app.get('/', (req, res) => res.send('Hello World!')); 
 
 app.listen(3000, () => console.log('Example app listening on port 3000!')); 
` 

لبدء تشغيل الخادم ، انتقل إلى جهازك واكتب:

 `node index.js 
` 

هذا سيبدأ الخادم. سوف يستمع هذا التطبيق الحد الأدنى على المنفذ 3000. نحن نقدم طلبا من خلال متصفحنا على `http://localhost:3000` وسوف يستجيب الخادم الخاص بنا مع `Hello World` حيث يكون المتصفح هو العميل وستظهر الرسالة هناك.

يستخدم السطر الأول من الكود الخاص بنا الوظيفة `require` لتضمين الوحدة النمطية `express` . هذه هي الطريقة التي ندمج بها ونستخدم حزمة مثبتة من npm في أي ملف جافا سكريبت في مشروعنا. قبل أن نبدأ باستخدام Express ، نحتاج إلى تحديد مثيل منه الذي يعالج الطلب والاستجابة من الخادم إلى العميل. في حالتنا ، هو `app` المتغير.

`app.get()` هي إحدى الوظائف التي تخبر الخادم ما يجب القيام به عند استدعاء طلب `get` على المسار المحدد. يحتوي على وظيفة رد اتصال `(req, res)` التي تستمع إلى كائن `req` للطلب الوارد وتستجيب وفقًا لذلك باستخدام كائن استجابة `res` . يتم توفير كل من `req` و `res` لنا من خلال إطار Express.

يمثل الكائن `req` طلب HTTP ويحتوي على خصائص سلسلة طلب البحث والمعلمات والجسم ورؤوس HTTP. يمثل الكائن res استجابة HTTP التي يرسلها تطبيق Express عندما يتلقى طلب HTTP. في حالتنا ، نرسل رسالة نصية `Hello World` كلما تم تقديم طلب إلى الطريق `/` .

وأخيرا، `app.listen()` هي وظيفة أن يبدأ الميناء والبلد المضيف، في حالتنا `localhost` للاتصالات للاستماع إلى الطلبات الواردة من العميل. يمكننا تحديد رقم المنفذ مثل `3000` .

## تشريح تطبيق اكسبرس

من المرجح أن تحتوي البنية النموذجية لملف خادم Express على الأجزاء التالية:

**تبعيات**

استيراد التبعيات مثل التعبير عن نفسه. يتم تثبيت هذه التبعيات باستخدام `npm` كما فعلنا في المثال السابق.

**التجسيدات**

هذه هي العبارات لإنشاء كائن. لاستخدام التعبير السريع ، يتعين علينا إنشاء متغير `app` منه.

**تكوينات**

هذه العبارات هي الإعدادات المعتمدة على التطبيقات المخصصة التي يتم تحديدها بعد عمليات instantiations أو المعرفة في ملف منفصل (المزيد عند مناقشة بنية المشروع) والمطلوبة في ملف الخادم الرئيسي.

**الوسيطة**

تحدد هذه الوظائف تدفق دورة الطلب-الاستجابة. يتم تنفيذها بعد كل طلب وارد. يمكننا أيضا تحديد وظائف وسيطة مخصصة. لدينا قسم عليها أدناه.

**طرق**

هي نقاط النهاية المحددة في خادمنا والتي تساعد على تنفيذ عمليات طلب عميل معين.

**Bootstrapping الخادم**

آخر ما يتم تنفيذه في خادم Express هو الدالة `app.listen()` التي تبدأ الخادم الخاص بنا.

سنبدأ الآن في مناقشة الأقسام التي لم نناقشها من قبل.

## التوجيه

يشير التوجيه إلى كيفية استجابة تطبيق جانب الخادم لطلب العميل إلى نقطة نهاية معينة. تتكون نقطة النهاية هذه من URI (مسار مثل `/` أو `/books` ) وطريقة HTTP مثل GET و POST و PUT و DELETE وما إلى ذلك.

يمكن أن تكون المسارات إما صفحات ويب قديمة جيدة أو نقاط نهاية REST API. في كلتا الحالتين ، يمكن تعريف بناء الجملة على أنه بناء مماثل لطريق ما على النحو التالي:

 `app.METHOD(PATH, HANDLER); 
` 

تساعد أجهزة التوجيه في فصل المخاوف مثل نقاط النهاية المختلفة والحفاظ على الأجزاء ذات الصلة من شفرة المصدر معًا. يساعدون في بناء كود قابل للصيانة. يتم تعريف جميع الطرق قبل استدعاء الدالة `app.listen()` . في تطبيق Express النموذجي ، `app.listen()` آخر وظيفة يتم تنفيذها.

### طرق التوجيه

HTTP هو بروتوكول قياسي لعميل وخادم للاتصال. يوفر أساليب مختلفة للعميل لتقديم الطلب. يحتوي كل مسار على وظيفة hanlder على الأقل أو رد اتصال. تحدد وظيفة رد الاتصال هذه ما ستكون الاستجابة من الخادم لهذا المسار بعينه. على سبيل المثال ، يتم استخدام مسار `app.get()` لمعالجة طلبات GET وفي المقابل إرسال رسالة بسيطة كرد.

 `// GET method route 
 app.get('/', (req, res) => res.send('Hello World!')); 
` 

### مسارات التوجيه

مسار التوجيه هو مزيج من طريقة طلب لتعريف نقاط النهاية التي يمكن أن يقوم بها العميل بواسطة الطلبات. يمكن أن تكون مسارات المسارات عبارة عن سلاسل أو أنماط سلسلة أو تعبيرات عادية.

دعنا نحدد نقطتي نهايتين أخريين في تطبيقنا القائم على الخادم.

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

ضع في اعتبارك الشفرة الموضحة أعلاه كحد أدنى لموقع الويب الذي يحتوي على نقطتي نهايتين ، و `/about` أو `/home` و `/about` . إذا قدم العميل طلبًا للصفحة الرئيسية ، فسيتم الرد فقط مع `Home Page` وسيقوم `/about` بإرسال الاستجابة: `About Page` . نحن نستخدم وظيفة `res.send` لإرسال السلسلة مرة أخرى إلى العميل في حالة تحديد أي من الطريقتين المحددتين.

### معلمات التوجيه

تسمى معلمات المسار شرائح عناوين URL التي يتم استخدامها لالتقاط القيم المحددة في موضعها في عنوان URL. يتم استخدام كائن `req.params` في هذه الحالة لأنه لديه حق الوصول إلى جميع المعلمات التي تم تمريرها في عنوان url.

 `app.get('/books/:bookId', (req, res) => { 
  res.send(req.params); 
 }); 
` 

سيكون عنوان URL من العميل الوارد في شفرة المصدر أعلاه `http://localhost:3000/books/23` . يجب أن يتكون اسم معلمات المسار من أحرف (\[A-Za-z0-9\_\]). حالة استخدام عامة جدًا لمعلمة توجيه في طلبنا هي الحصول على مسار 404.

 `// For invalid routes 
 app.get('*', (req, res) => { 
  res.send('404! This is an invalid URL.'); 
 }); 
` 

إذا بدأنا الآن الخادم من سطر الأوامر باستخدام `node index.js` وحاول زيارة عنوان URL: `http://localhost:3000/abcd` . ردا على ذلك ، سوف نحصل على رسالة 404.

## وظائف الوسيطة

وظائف الوسيط هي الدوال التي لها حق الوصول إلى كائن الطلب ( `req` ) ، وكائن الاستجابة ( `res` ) ، والوظيفة `next` في دورة طلب-استجابة التطبيق. الهدف من هذه الوظائف هو تعديل كائنات الطلب والاستجابة للمهام مثل تحليل جهات الطلب ، وإضافة رؤوس الاستجابة ، وإجراء تغييرات أخرى على دورة الطلب-الاستجابة ، ووضع حد لدورة طلب-الاستجابة ، واستدعاء وظيفة الوسيطة التالية.

الوظيفة `next` هي وظيفة في جهاز التوجيه السريع الذي يتم استخدامه لتنفيذ وظائف وسيطة أخرى تنجح في الوسيطة الحالية. إذا كانت وظيفة الوسيطة تتضمن `next()` فهذا يعني أن دورة طلب الرد منتهية هناك. إن اسم الوظيفة `next()` هنا هو نظام تحكيم تمامًا ويمكنك تسمية أي شيء تريده ولكن من المهم الالتزام بأفضل الممارسات ومحاولة اتباع بعض الاتفاقيات ، خاصةً إذا كنت تعمل مع مطورين آخرين.

أيضا ، عند كتابة البرامج الوسيطة المخصصة لا تنس أن تضيف الدالة `next()` إليها. إذا كنت لا أذكر `next()` فإن دورة الطلب-الاستجابة ستعلق في أي مكان من أي مكان وقد تتسبب servr في إراحة العميل.

دعونا نستخدم أداة وسيطة مخصصة لفهم فهم هذا المفهوم. خذ هذا الرمز على سبيل المثال:

 `const express = require('express'); 
 const app = express(); 
 
 // Simple request time logger 
 app.use((req, res, next) => { 
   console.log("A new request received at " + Date.now()); 
 
   // This function call tells that more processing is 
   // required for the current request and is in the next middleware 
   function/route handler. 
   next(); 
 }); 
 
 app.get('/home', (req, res) => { 
  res.send('Home Page'); 
 }); 
 
 app.get('/about', (req, res) => { 
  res.send('About Page'); 
 }); 
 
 app.listen(3000, () => console.log('Example app listening on port 3000!')); 
` 

لإعداد أي برامج وسيطة ، سواء كانت مخصصة أو متوفرة كوحدة نمطية في npm ، نستخدم وظيفة `app.use()` . إنها كقاعدة معلمة اختيارية واحدة واستدعاء واحد للمعلمة الإلزامية. في حالتنا ، نحن لا نستخدم مسار paramaeter اختياري.

 `app.use((req, res, next) => { 
  console.log('A new request received at ' + Date.now()); 
  next(); 
 }); 
` 

يتم استدعاء الدالة الوسيطة أعلاه لكل طلب يقدمه العميل. عند تشغيل الخادم ، ستلاحظ أنه بالنسبة لكل طلب متصفح في نقطة النهاية `/` ، ستتم مطالبتك برسالة في جهازك:

 `A new request received at 1467267512545 
` 

يمكن استخدام وظائف الوسيطيات لمسار معين. انظر المثال أدناه:

 `const express = require('express'); 
 const app = express(); 
 
 //Simple request time logger for a specific route 
 app.use('/home', (req, res, next) => { 
  console.log('A new request received at ' + Date.now()); 
  next(); 
 }); 
 
 app.get('/home', (req, res) => { 
  res.send('Home Page'); 
 }); 
 
 app.get('/about', (req, res) => { 
  res.send('About Page'); 
 }); 
 
 app.listen(3000, () => console.log('Example app listening on port 3000!')); 
` 

في هذه المرة ، سترى مطالبة مشابهة فقط عندما يطلب العميل نقطة النهاية `/home` منذ الإشارة إلى المسار في `app.use()` . لن يتم عرض أي شيء في المحطة عندما يطلب العميل نقطة النهاية `/about` .

يعد ترتيب وظائف الوسيط أمرًا هامًا حيث إنها تحدد وقت استدعاء الوظيفة الوسيطة. في المثال أعلاه ، إذا قمنا بتعريف مسار `app.get('/home')...` قبل `app.use('/home')...` الوسيطة `app.use('/home')...` ، فلن يتم استدعاء وظيفة الوسيطة.

### وظائف الوسيط الخارجية للطرف الثالث

وظائف الوسيط هي نمط مفيد يسمح للمطورين بإعادة استخدام الكود داخل تطبيقاتهم وحتى مشاركتها مع الآخرين في شكل وحدات ذاكرة حديثة. التعريف الأساسي للوسيط هو دالة ذات ثلاث حجج: طلب (أو req) ، استجابة (res) ، وبعد ذلك نحن المراقب في القسم السابق.

في كثير من الأحيان في تطبيق الخادم المعتمد لدينا ، سنستخدم وظائف وسيطة من طرف ثالث. يتم توفير هذه الوظائف بواسطة Express نفسها. فهي مثل الإضافات التي يمكن تثبيتها باستخدام npm وهذا هو السبب في أن Express هي مرنة.

بعض وظائف الوسيطة الأكثر شيوعًا في تطبيق Express هي:

#### bodyParser

يسمح للمطورين بمعالجة البيانات الواردة ، مثل حمولة الجسم. الحمولة هي البيانات التي نتلقاها من العميل حتى تتم معالجتها. الأكثر فائدة مع طرق POST. يتم تثبيته باستخدام:

 `npm install --save body-parser 
` 

الاستعمال:

 `const bodyParser = require('body-parser'); 
 
 // To parse URL encoded data 
 app.use(bodyParser.urlencoded({ extended: false })); 
 
 // To parse json data 
 app.use(bodyParser.json()); 
` 

من المحتمل أنها واحدة من أكثر استخدامات الوسيطة من طرف ثالث في أي تطبيق اكسبرس.

#### cookieParser

يوزع رأس ملف تعريف الارتباط `req.cookies` مع كائن مرتبط بأسماء ملفات تعريف الارتباط. لتثبيته ،

 `$ npm install --save cookie-parser 
` 

 `const cookieParser = require('cookie-parser'); 
 app.use(cookieParser()); 
` 

#### جلسة

تقوم وظيفة الوسيطة هذه بإنشاء وسيط جلسة مع خيارات محددة. غالبًا ما يتم استخدام جلسة في تطبيقات مثل تسجيل الدخول / التسجيل.

 `$ npm install --save session 
` 

 `app.use( 
  session({ 
    secret: 'arbitary-string', 
    resave: false, 
    saveUninitialized: true, 
    cookie: { secure: true } 
  }) 
 ); 
` 

### مورغان

يقوم البرنامج الوسيط مورغان بتتبع جميع الطلبات وغيرها من المعلومات المهمة اعتمادًا على تنسيق الإخراج المحدد.

 `npm install --save morgan 
` 

 `const logger = require('morgan'); 
 // ... Configurations 
 app.use(logger('common')); 
` 

`common` هو حالة تنسيق مسبق يمكن استخدامها في التطبيق. هناك تنسيقات أخرى محددة مسبقًا مثل صغيرة ومبتكر ، ولكن يمكنك تحديد أنك تملك تنسيقًا مخصصًا أيضًا باستخدام معلمات السلسلة المتوفرة لنا من قِبل morgan.

تتوفر قائمة بالوظائف الوسيطة الأكثر استخدامًا على هذا [الرابط](https://expressjs.com/en/resources/middleware.html) .

## خدمة الملفات الثابتة

لتقديم ملفات ثابتة مثل صفحات الأنماط CSS ، والصور ، إلخ. يوفر Express وظيفة `express.static` في البرامج الوسيطة `express.static` . الملفات الثابتة هي تلك الملفات التي يقوم العميل بتنزيلها من الخادم.

هي وظيفة الوسيطة الوحيدة التي تأتي مع إطار Express ويمكننا استخدامها مباشرة في طلبنا. جميع الوسطاء الآخرين هم طرف ثالث.

بشكل افتراضي ، لا يسمح Express بخدمة الملفات الثابتة. علينا استخدام هذه الوظيفة الوسيطة. من الممارسات الشائعة في تطوير تطبيق الويب هو تخزين جميع الملفات الثابتة تحت الدليل "العام" في جذر المشروع. يمكننا تقديم هذا المجلد لخدمة ملفات ثابتة تتضمن الكتابة في ملف `index.js` :

 `app.use(express.static('public')); 
` 

الآن ، سيتم تحميل الملفات الثابتة في دليلنا العام.

 `http://localhost:3000/css/style.css 
 http://localhost:3000/images/logo.png 
 http://localhost:3000/images/bg.png 
 http://localhost:3000/index.html 
` 

### أدلة ثابتة متعددة

لاستخدام العديد من دلائل الأصول الثابتة ، اتصل بوظيفة الوسيطة `express.static` عدة مرات:

 `app.use(express.static('public')); 
 app.use(express.static('files')); 
` 

### المسار الافتراضي البادئة

يمكن أيضًا توفير بادئة مسار الإصلاح كوسيطة أولى للدالة الوسيطة `express.static` . يُعرف هذا _بادئة مسار افتراضي_ لأن المسار الفعلي غير موجود في المشروع.

 `app.use('/static', express.static('public')); 
` 

إذا حاولنا الآن تحميل الملفات:

 `http://localhost:3000/static/css/style.css 
 http://localhost:3000/static/images/logo.png 
 http://localhost:3000/static/images/bg.png 
 http://localhost:3000/static/index.html 
` 

هذه التقنية تأتي في متناول اليدين عند توفير أدلة متعددة لخدمة ملفات ثابتة. يتم استخدام البادئات للمساعدة في التمييز بين الدلائل المتعددة.

## محركات قالب

محركات القوالب هي مكتبات تسمح لنا باستخدام لغات القوالب المختلفة. لغة القالب هي مجموعة خاصة من التعليمات (بناء الجملة وهياكل التحكم) التي توجه المحرك إلى كيفية معالجة البيانات. استخدام محرك قالب سهل مع Express. محركات القوالب الشعبية مثل Pug و EJS و Swig و Handlebars متوافقة مع Express. ومع ذلك ، Express يأتي بمحرك قالب افتراضي ، Jade ، وهو الإصدار الأول من Pug.

لشرح كيفية استخدام "محرك القوالب" ، سنستخدم Pug. إنه محرك قالب قوي يوفر ميزات مثل الفلاتر ، ويشمل ، الاستيفاء ، وما إلى ذلك. لاستخدامها ، يجب علينا أولاً تثبيت كوحدة نمطية في مشروعنا باستخدام `npm` .

 `npm install --save pug 
` 

سيقوم هذا الأمر بتثبيت الصلصة وللتحقق من تثبيتها بشكل صحيح ، فقط ألقي نظرة على ملف `package.json` . لاستخدامه مع تطبيقنا أولاً ، يجب علينا تعيينه كمحرك قالب وإنشاء دليل جديد ".views" حيث سنقوم بتخزين كافة الملفات المتعلقة بمحرك القالب الخاص بنا.

 `app.set('view engine', 'pug'); 
 app.set('views', './views'); 
` 

بما أننا نستخدم `app.set()` الذي يشير إلى التكوين داخل ملف الخادم الخاص بنا ، يجب أن `app.set()` قبل تحديد أي مسار أو وظيفة وسيطة.

في direcotry `views` ، قم بإنشاء ملف يسمى `index.pug` .

 `doctype html 
  html 
    head 
      tite="Hello from Pug" 
    body 
      p.greetings Hello World! 
` 

لتشغيل هذه الصفحة ، سنقوم بإضافة الطريق التالي إلى طلبنا.

 `app.get('/hello', (req, res) => { 
  res.render('index'); 
 }); 
` 

نظرًا لأننا قمنا بالفعل بتعيين `res.render` كمحرك القالب الخاص بنا ، فإننا في `res.render` لا نحتاج إلى توفير ملحق `.pug` . تعرض هذه الوظيفة الكود في أي ملف `.pug` إلى HTML `.pug` العميل. يمكن للمتصفحات تقديم ملفات HTML فقط. إذا قمت بتشغيل الخادم الآن ، وقمت بزيارة المسار `http://localhost:3000/hello` فسوف تشاهد إخراج `Hello World` بشكل صحيح.

في Pug ، يجب أن تلاحظ أننا لا نحتاج إلى كتابة علامات الإغلاق إلى العناصر كما نفعل في HTML. سيتم تقديم الكود السابق في HTML على النحو التالي:

 `
<!DOCTYPE html> 
 <html> 
   <head> 
      <title>Hello from Pug</title> 
   </head> 
 
   <body> 
      <p class = "greetings">Hello World!</p> 
   </body> 
 </html> 
` 

ميزة استخدام "محرك القوالب" على ملفات HTML الخام هو أنها توفر الدعم لتنفيذ المهام عبر البيانات. لا يمكن لـ HTML تقديم البيانات مباشرة. تشترك الأطر مثل Angular و React في هذا السلوك مع محركات القوالب.

يمكنك أيضًا تمرير القيم إلى محرك القالب مباشرةً من وظيفة معالج التوجيه.

 `app.get('/', (req, res) => { 
  res.render('index', { title: 'Hello from Pug', message: 'Hello World!' }); 
 }); 
` 

للحالة أعلاه ، سيتم كتابة ملف `index.pug` بنا على النحو التالي:

 `doctype html 
  html 
    head 
      title= title 
    body 
      h1= message 
` 

سيكون الإخراج نفس الحالة السابقة.

## هيكل المشروع لتطبيق Express

نظرًا لأن Express لا يفرض الكثير على مطور البرامج الذي يستخدمه ، فإنه في بعض الأحيان يمكن أن يتغلب على هيكل المشروع الذي يجب أن يتبعه المرء. ليس له بنية محددة بشكل رسمي ولكن حالة الاستخدام الأكثر شيوعًا التي يتبعها أي تطبيق يستند إلى Node.js هي فصل المهام المختلفة في وحدات مختلفة. هذا يعني أن يكون لديك ملفات JavaScript منفصلة.

دعونا نذهب من خلال strucutre نموذجي لتطبيق ويب عبر الإنترنت.

 `project-root/ 
   node_modules/          // This is where the packages installed are stored 
   config/ 
      db.js                // Database connection and configuration 
      credentials.js       // Passwords/API keys for external services used by your app 
      config.js            // Environment variables 
   models/                 // For mongoose schemas 
      books.js 
      things.js 
   routes/                 // All routes for different entities in different files 
      books.js 
      things.js 
   views/ 
      index.pug 
      404.pug 
        ... 
   public/                 // All static files 
      images/ 
      css/ 
      javascript/ 
   app.js 
   routes.js               // Require all routes in this and then require this file in 
   app.js 
   package.json 
` 

هذا هو النمط المعروف باسم MVC ، عارض عرض نموذج. ببساطة لأن نموذج قاعدة البيانات ، واجهة المستخدم الخاصة بالتطبيق ووحدات التحكم (في حالتنا ، الطرق) مكتوبة ومحفوظة في ملفات منفصلة. نمط التصميم هذا الذي يجعل أي تطبيق ويب سهل القياس إذا كنت ترغب في تقديم المزيد من المسارات أو الملفات الثابتة في المستقبل والرمز قابل للصيانة.