𝗧𝗮𝗴 𝟰𝟰 𝗯𝗲𝗶𝗺 𝗟𝗲𝗿𝗻𝗲𝗻 𝗱𝗲𝘀 𝗠𝗘𝗥𝗡-𝗦𝘁𝗮𝗰𝗸𝘀

Mein Express.js-Server hat früher nur JSON-Daten gesendet. Heute habe ich das geändert.

Ich habe gelernt, wie man HTML, CSS und Bilder direkt über mein Backend ausliefert. Das macht mein Projekt von einer einfachen API zu einer Full-Stack-Anwendung.

Ich bin dem Backend-Track von Complete Coding gefolgt, um das File-Routing zu meistern.

In einer echten Produktionsumgebung benötigt man eine effiziente Möglichkeit, Frontend-Dateien auszuliefern. Man sollte keine eigenen Schleifen schreiben, um Dateien einzulesen.

Hier ist das Setup, das ich heute verwendet habe:

  • express.static() Middleware Express enthält ein integriertes Tool namens express.static(). Damit kann man einen Ordner auswählen, wie zum Beispiel public oder assets, um ihn im Browser bereitzustellen.

  • path.join() Ich habe das Node.js path-Modul und die __dirname-Variable verwendet. Dies stellt sicher, dass mein Server Dateien unter Windows, Linux oder Mac ohne Fehler findet.

Hier ist der Code:

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}`);
});

Das Erlernen dieser Grundlagen hilft mir zu verstehen, wie das Web funktioniert.

Quelle: https://dev.to/ali_hamza_589ec7b3eb6688d/day-44-of-learning-mern-stack-3c0m