День 44 изучения MERN Stack

Раньше мой сервер Express.js отправлял только данные в формате JSON. Сегодня я это изменил.

Я научился отдавать HTML, CSS и изображения напрямую из своего бэкенда. Это превращает мой проект из простого API в полноценное full-stack приложение.

Я следовал учебному плану по бэкенду в Complete Coding, чтобы освоить маршрутизацию файлов.

В реальной рабочей среде (production) вам нужен эффективный способ доставки фронтенд-файлов. Не стоит писать собственные циклы для чтения файлов.

Вот конфигурация, которую я использовал сегодня:

  • 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