درس پانزدهم: ترکیب Webpack و ExpressJS

به فصل جدید خوش آمدید! در این فصل قصد داریم فریم ورک ها و کتابخانه های مختلف را با webpack ترکیب کنیم. این جلسه مخصوص به فریم ورک Express.js است. در این جلسه می خواهیم یک سرور مجازی را با کمک Node.js و Express.js راه بیندازیم تا زمانی که کاربر برنامه ما را باز کرد، محتوا به صورت پویا به او نمایش داده شود. کدهای شروع این جلسه همان کدهای قدیمی ما هستند و می توانید آن ها را از این لینک دانلود کنید.

در این جلسه کمی کدنویسی node.js و Express.js را خواهیم داشت بنابراین این قسمت تقریبا مخصوص افرادی است که با این فریم ورک و زبان برنامه نویسی کار می کنند. در مرحله اول درون پوشه Src یک فایل به نام server.js ایجاد کنید. در ابتدا باید express را درون این فایل صدا بزنیم:

const express = require('express');

حالا یک نمونه از کلاس Express را ایجاد می کنیم:

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

سپس باید یک مسیر (مثل URL) را مشخص کنیم که برنامه ما درون آن اجرا شود. من مسیر ساده / را انتخاب می کنم. منظور از / همان مسیر root یا اصلی است که روی سیستم ما می شود همان localhost:

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

app.get('/', function (req, res) {
    res.send('Some dummy content');
});

کسانی که با Express کار کرده اند می دانند که هر بار مرورگر کاربر به آدرس / برود، تابع پاس داده شده به Get اجرا خواهد شد. Res نیز همان response ما است و با متد send نتیجه را به کاربر ارسال می کند. در نهایت باید سرور خود را اجرا کنیم تا کاربر بتواند برنامه ما را اجرا کند:

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

app.get('/', function (req, res) {
    res.send('Some dummy content');
});

app.listen(3000, function () {
    console.log('Application is running on http://localhost:3000');
});

برای listen ابتدا باید port خاصی را مشخص کنید تا برنامه روی آن قرار بگیرد (من 3000 را انتخاب کرده ام). برای پارامتر دوم نیز باید تابعی پاس بدهید که هنگام اجرا شدن سرور، اجرا شود. من فعلا یک پیام ساده را در  کنسول مرورگر چاپ می کنم. حالا که سرور ما تعریف شده است باید express را نصب کنیم تا بتوانیم از آن استفاده کنیم بنابراین به ترمینال خودتان رفته و دستور زیر را اجرا کنید:

npm install express --save

حالا برای اجرا کردن سرور خودمان باید یک اسکریپت جدید در package.json تعریف کنیم:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.production.config.js",
    "dev": "webpack-dev-server --config webpack.dev.config.js --hot",
    "start": "node src/server.js"
  },

اسکریپت جدید من start است که سرور ما را اجرا خواهد کرد. اگر به ترمینال بروید و دستور npm start را اجرا کنید پیام زیر به ما نشان داده می شود:

Application is running on http://localhost:3000

این همان پیامی است که خودمان نوشته بودیم. به آدرس http://localhost:3000 بروید تا عبارت some dummy content را مشاهده کنید. این عبارت نیز توسط خود ما تعریف شده بود. بر این اساس می توان گفت که سرور ما به خوبی کار می کند.

مرحله بعدی کار ما ویرایش backend برای نمایش یک صفحه HTML به جای عبارت ساده some dummy content است. من از Express استفاده خواهم کرد بنابراین باید کار با Express را یاد داشته باشید.

به صفحه server.js بروید و به جای some dummy content می گوییم:

app.get('/', function (req, res) {
    const pathToHtmlFile = path.resolve(__dirname, '../dist/index.html');
});

اگر یادتان باشد قبلا از resolve استفاده کرده بودیم. Dirname همان دیرکتوری فعلی ما است و پارامتر دوم نیز یک آدرس نسبی به فایل index.html است. با این کار آدرس فایل HTML را به دست می آوریم. برای استفاده از path باید آن را وارد node.js کنیم بنابراین در ابتدای این فایل آن را require کنید:

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

app.get('/', function (req, res) {
    const pathToHtmlFile = path.resolve(__dirname, '../dist/index.html');
});

حالا که آدرس فایل index.html را داریم باید محتوای آن را بخوانیم. برای این کار ماژول دیگری به نام fs وجود دارد که باید درون این صفحه require شود:

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

سپس می توانیم از آن به شکل زیر استفاده کنیم:

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

app.get('/', function (req, res) {
    const pathToHtmlFile = path.resolve(__dirname, '../dist/index.html');
    const contentFromHtmlFile = fs.readFileSync(pathToHtmlFile, 'utf-8');
    res.send(contentFromHtmlFile);
});

به زبان ساده readFileSync محتوای فایل ما را به صورت synchronously (همگام) می خواند و آن را در متغیر contentFromHtmlFile ذخیره می کند. پارامتر اول این تابع آدرس فایل مورد نظر است و در پارامتر دوم نیز باید encoding خواندن فایل را مشخص کنید که utf8 معمولا بهترین گزینه است. در نهایت نیز با استفاده از send محتوای فایل خود را ارسال کرده ایم.

حالا کدها را ذخیره کرده و در ترمینال دستور npm run build را اجرا کنید. سپس دستور npm start را اجرا کرده و به آدرس http://localhost:3000 بروید. احتمالا شما هم با یک صفحه خالی روبرو شده اید! هیچ چیزی در صفحه ما نمایش داده نمی شود. چرا؟ اگر به کنسول مرورگر بروید (از سمت Dev tools – معمولا کلید f12 در مرورگر) پاسخ را پیدا می کنید. در واقع مرورگر به شما می گوید که من نمی دانم چطور جاوا اسکریپت و CSS پاس داده شده را بارگذاری کنم. Express تمام کدهای ما را به صورت یک رشته متنی ساده پاس داده است بنابراین مرورگر می گوید من نمی توانم فایل های جاوا اسکریپت را با MIME type رشته ای قبول کنم. این فایل ها کد هستند و باید به صورت کد اجرا شوند.

برای حل این مشکل باید به Express یاد بدهیم که چطور محتوای جاوا اسکریپت و CSS را بارگذاری کند (در حال حاضر Express فقط می داند که چطور فایل های HTML را ارسال نماید). در قسمت بعد این مورد را بررسی خواهیم کرد.