วันที่ 44 ของการเรียนรู้ MERN Stack

เดิมที Express.js server ของผมส่งแค่ข้อมูล JSON เท่านั้น แต่วันนี้ผมเปลี่ยนมันแล้ว

ผมได้เรียนรู้วิธีการส่งไฟล์ HTML, CSS และรูปภาพโดยตรงจาก backend ซึ่งช่วยยกระดับโปรเจกต์ของผมจากแค่ API ธรรมดา ให้กลายเป็น full-stack application

ผมได้เรียนตาม track backend ของ Complete Coding เพื่อฝึกฝนเรื่อง file routing ให้เชี่ยวชาญ

ในสภาพแวดล้อมการทำงานจริง (production environment) คุณจำเป็นต้องมีวิธีที่มีประสิทธิภาพในการส่งไฟล์ frontend และไม่ควรเขียน loop ขึ้นมาเองเพื่ออ่านไฟล์

นี่คือการตั้งค่าที่ผมใช้ในวันนี้:

  • Middleware express.static() Express มีเครื่องมือในตัวที่เรียกว่า express.static() ซึ่งช่วยให้คุณเลือกโฟลเดอร์ เช่น public หรือ assets เพื่อส่งไปยัง browser ได้

  • path.join() ผมใช้ path module ของ Node.js และตัวแปร __dirname เพื่อให้มั่นใจว่า server จะสามารถค้นหาไฟล์บน 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}`);
});

การสร้างพื้นฐานเหล่านี้ช่วยให้ผมเข้าใจการทำงานของเว็บได้ดียิ่งขึ้น

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