LEZIONE 17 · Express e API

Servire file statici

Prima di iniziare: le parole della lezione

File statico e directory pubblica: Un file statico viene inviato senza generare il contenuto da un template a ogni richiesta. La directory pubblica contiene i file che scegli di rendere raggiungibili dai client.
Mount path e sendFile: Il mount path è il prefisso URL a cui colleghi un middleware. res.sendFile invia uno specifico file, normalmente indicato con percorso assoluto o con una directory root.
HTML, CSS e JavaScript client: HTML descrive la struttura della pagina; CSS il suo aspetto; il JavaScript client viene eseguito dal browser dopo il caricamento.

I file statici (HTML, CSS, immagini e JavaScript client) possono essere serviti direttamente da una directory con express.static.

// server.cjs
const express = require('express');
const path = require('node:path');
const app = express();
app.use(express.static(path.join(__dirname, 'public')));
app.listen(3000);

<!-- public/index.html -->
<!doctype html><html lang="it"><meta charset="utf-8">
<title>Demo</title><h1>Benvenuto nel sito statico</h1></html>

Esempio aggiuntivo: creando public/stile.css il file diventa recuperabile con /stile.css. Nota: l'esempio usa CommonJS e quindi __dirname. Evita di mettere nella cartella pubblica credenziali o file sensibili.

Chi fa cosa, e perché

express.static restituisce un middleware: Express lo esegue sulle richieste che arrivano a quel punto. Con app.use(express.static(...)), un file public/stile.css si richiede come /stile.css, senza scrivere public nell’URL. Un index.html può essere servito automaticamente per la directory.

Il corso usa anche homepage.html, about.html, contatti.html e una pagina 404 con sendFile. La cartella fisica e il percorso web non devono coincidere: puoi esporre i file sotto /assets. “Statico” riguarda come il server produce la risposta: un file JavaScript statico può comunque rendere interattiva la pagina.

Un altro esempio guidato

// Dentro l'app Express CommonJS, prima della 404 finale
const path = require('node:path');
const cartella = path.join(__dirname, 'public');
app.use('/assets', express.static(cartella));
app.get('/about', (req, res, next) => {
  res.sendFile(path.join(cartella, 'about.html'), errore => {
    if (errore) next(errore);
  });
});

Come leggerlo e risultato atteso. Crea public/about.html con un titolo e un paragrafo. /about invia quel file; un eventuale public/stile.css è raggiungibile a /assets/stile.css. next(errore) passa un errore di invio alla gestione degli errori.

Prova tu. Collega un foglio CSS da about.html con href="/assets/stile.css". Crea anche una 404 e inviala con res.status(404).sendFile(...), gestendo gli errori di invio.

Torna all’indice ↑