𝗛𝗮𝗿𝗶 𝟰𝟰 𝗕𝗲𝗹𝗮𝗷𝗮𝗿 𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸
Pelayan Express.js saya sebelum ini hanya menghantar data JSON. Hari ini, saya telah mengubahnya.
Saya belajar cara untuk menghantar HTML, CSS, dan imej secara terus daripada backend saya. Ini mengubah projek saya daripada sekadar API ringkas kepada aplikasi full-stack.
Saya mengikuti trek backend Complete Coding untuk menguasai penghalaan fail (file routing).
Dalam persekitaran pengeluaran (production) yang sebenar, anda memerlukan cara yang cekap untuk menghantar fail frontend. Anda tidak sepatutnya menulis gelung (loop) tersuai untuk membaca fail.
Berikut adalah tetapan yang saya gunakan hari ini:
Middleware express.static() Express menyertakan alat terbina dalam yang dipanggil express.static(). Ia membolehkan anda memilih folder, seperti public atau assets, untuk dihantar ke pelayar.
path.join() Saya menggunakan modul path Node.js dan pemboleh ubah __dirname. Ini memastikan pelayan saya menemui fail pada Windows, Linux, atau Mac tanpa sebarang ralat.
Berikut adalah kodnya:
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});
});
Membina asas-asas ini membantu saya memahami cara web berfungsi.
Source: https://dev.to/ali_hamza_589ec7b3eb6688d/day-44-of-learning-mern-stack-3c0m