𝗚𝗶𝗼𝗿𝗻𝗼 𝟰𝟰 𝗱𝗶 𝗔𝗽𝗽𝗿𝗲𝗻𝗱𝗶𝘀𝘁𝗮𝗴𝗴𝗶𝗼 𝗱𝗲𝗹𝗹𝗼 𝗦𝘁𝗮𝗰𝗸 𝗠𝗘𝗥𝗡

Il mio server Express.js prima inviava solo dati JSON. Oggi ho cambiato le cose.

Ho imparato come servire HTML, CSS e immagini direttamente dal mio backend. Questo trasforma il mio progetto da una semplice API a un'applicazione full-stack.

Ho seguito il percorso backend di Complete Coding per padroneggiare il routing dei file.

In un vero ambiente di produzione, è necessario un modo efficiente per fornire i file frontend. Non dovresti scrivere loop personalizzati per leggere i file.

Ecco la configurazione che ho usato oggi:

  • Middleware express.static() Express include uno strumento integrato chiamato express.static(). Ti permette di scegliere una cartella, come public o assets, da servire al browser.

  • path.join() Ho usato il modulo path di Node.js e la variabile __dirname. Questo assicura che il mio server trovi i file su Windows, Linux o Mac senza errori.

Ecco il codice:

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

Costruire queste basi mi aiuta a capire come funziona il web.

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