اليوم ٤٤ من تعلم MERN Stack

كان خادم Express.js الخاص بي يرسل بيانات JSON فقط. اليوم قمت بتغيير ذلك.

تعلمت كيفية تقديم ملفات HTML و CSS والصور مباشرة من الـ backend الخاص بي. هذا ينقل مشروعي من مجرد API بسيط إلى تطبيق full-stack.

لقد اتبعت مسار الـ backend في Complete Coding لإتقان الـ file routing.

في بيئة الإنتاج الحقيقية، تحتاج إلى طريقة فعالة لتقديم ملفات الـ frontend. لا ينبغي عليك كتابة loops مخصصة لقراءة الملفات.

إليك الإعداد الذي استخدمته اليوم:

  • Middleware الخاص بـ express.static() يتضمن Express أداة مدمجة تسمى express.static(). تتيح لك اختيار مجلد، مثل public أو assets لتقديمه للمتصفح.

  • path.join() استخدمت وحدة path في Node.js والمتغير __dirname. يضمن ذلك عثور الخادم الخاص بي على الملفات في أنظمة Windows أو Linux أو Mac دون أخطاء.

إليك الكود:

const express = require("express");
const path = require("path");
const app = express();
const PORT = 8000;

app.use(express.static(path.join(__dirname, "public")));

app.get("/", (req, res) => {
    res.sendFile(path.join(__dirname, "public", "index.html"));
});

app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
});

بناء هذه الأساسيات يساعدني على فهم كيفية عمل الويب.

المصدر: https://dev.to/ali_hamza_589ec7b3eb6688d/day-44-of-learning-mern-stack-3c0m