יום 44 של למידת MERN Stack

שרת ה-Express.js שלי נהג לשלוח רק נתוני JSON. היום שיניתי את זה.

למדתי איך להגיש HTML, CSS ותמונות ישירות מה-backend שלי. זה מעביר את הפרויקט שלי מ-API פשוט לאפליקציית full-stack.

עקבתי אחרי מסלול ה-backend של Complete Coding כדי לשלוט בניתוב קבצים (file routing).

בסביבת production אמיתית, צריך דרך יעילה לספק קבצי frontend. לא כדאי לכתוב לולאות מותאמות אישית כדי לקרוא קבצים.

הנה ה-setup שבו השתמשתי היום:

  • 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