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

Mi servidor Express.js solía enviar solo datos JSON. Hoy cambié eso.

Aprendí cómo servir HTML, CSS e imágenes directamente desde mi backend. Esto transforma mi proyecto de una simple API a una aplicación full-stack.

Seguí la ruta de backend de Complete Coding para dominar el enrutamiento de archivos.

En un entorno de producción real, necesitas una forma eficiente de entregar archivos del frontend. No deberías escribir bucles personalizados para leer archivos.

Aquí está la configuración que utilicé hoy:

  • Middleware express.static() Express incluye una herramienta integrada llamada express.static(). Te permite elegir una carpeta, como public o assets, para servirla al navegador.

  • path.join() Utilicé el módulo path de Node.js y la variable __dirname. Esto asegura que mi servidor encuentre los archivos en Windows, Linux o Mac sin errores.

Aquí está el 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 estos fundamentos me ayuda a entender cómo funciona la web.

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