𝗗𝗶𝗮 𝟰𝟰 𝗱𝗲 𝗔𝗽𝗿𝗲𝗻𝗱𝗶𝘇𝗮𝗴𝗲𝗺 𝗱𝗮 𝗦𝘁𝗮𝗰𝗸 𝗠𝗘𝗥𝗡

Meu servidor Express.js costumava enviar apenas dados JSON. Hoje eu mudei isso.

Aprendi como servir HTML, CSS e imagens diretamente do meu backend. Isso transforma meu projeto de uma simples API em uma aplicação full-stack.

Eu segui a trilha de backend da Complete Coding para dominar o roteamento de arquivos.

Em um ambiente de produção real, você precisa de uma maneira eficiente de entregar arquivos do frontend. Você não deve escrever loops personalizados para ler arquivos.

Aqui está a configuração que usei hoje:

  • Middleware express.static() O Express inclui uma ferramenta integrada chamada express.static(). Ela permite que você escolha uma pasta, como public ou assets, para servir ao navegador.

  • path.join() Eu usei o módulo path do Node.js e a variável __dirname. Isso garante que meu servidor encontre os arquivos no Windows, Linux ou Mac sem erros.

Aqui está o código:

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

Construir esses fundamentos me ajuda a entender como a web funciona.

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