Servire HTML
Servire vere pagine web dal tuo server
⏱ Stima ~10 min
01 · Leggi
Finora il tuo server ha restituito testo semplice e JSON. Ma quando visiti un sito reale, vedi pagine con stili, titoli, immagini e layout — non testo grezzo.
È perché i server web reali servono file HTML. L'HTML è il linguaggio che il browser capisce e usa per visualizzare contenuto ricco e formattato.
Invece di scrivere HTML nel codice JavaScript (che diventa disordinato rapidamente), mettiamo i file HTML in una cartella speciale e diciamo a Express di servirli automaticamente. Si chiama servire file statici — file che non cambiano in base alla richiesta, vengono inviati così come sono.
Punti chiave
- I file statici vengono serviti direttamente, senza nessuna elaborazione
- La cartella public/ è la convenzione per i file accessibili al browser
- Express serve un'intera cartella di file statici con una riga di codice
- È così che i siti reali servono CSS, immagini e pagine HTML
02 · Pratica reale
Per prima cosa crea una directory public nella tua cartella di progetto. I tuoi file statici (HTML, CSS, immagini) andranno qui.
mkdir public
03 · Pratica reale
Crea un file index.html nella cartella public. Puoi crearlo con un editor di testo — salvalo come public/index.html nella directory del tuo progetto. Sarà la homepage del tuo server.
<!DOCTYPE html>
<html>
<head>
<title>My First Server</title>
<style>
body { font-family: sans-serif; max-width: 600px; margin: 50px auto; }
h1 { color: #333; }
</style>
</head>
<body>
<h1>Welcome to My Server</h1>
<p>This page is being served by Node.js and Express.</p>
<p>I built this myself.</p>
</body>
</html>04 · Quiz
Perché mettiamo i file HTML nella cartella public/ invece di scriverli nel codice JavaScript?
- JavaScript non può contenere stringhe HTML
- Mantiene tutto ordinato — i file HTML vengono serviti così come sono, senza elaborazione
- La cartella public/ è più veloce perché usa un server diverso
- Il browser può leggere solo cartelle chiamate 'public'
05 · Pratica reale
Ora di' a Express di servire i file dalla cartella public. Apri app.js e aggiungi questa riga dopo const app = express(); e prima di tutte le route app.get(). Questa riga rende disponibili tramite il tuo server tutti i file nella cartella public/.
app.use(express.static('public'));06 · Pratica reale
Ferma il server (Ctrl+C), riavvialo, poi visita http://localhost:3000 nel browser. Invece del testo semplice "Hello, World!", ora dovresti vedere una pagina HTML con stili, con un titolo e paragrafi. Stai vedendo il tuo index.html servito!
node app.js
http://localhost:3000
07 · Completa
Per servire file statici da una cartella chiamata 'public', aggiungi questo middleware: app.use(express._____('public'))
Altre lezioni di questo capitolo
⚠ L'esperienza interattiva completa richiede JavaScript. Attivalo e ricarica la pagina.
※ Questo è un progetto educativo indipendente — non è un prodotto ufficiale di Anthropic. Claude™ è un marchio di Anthropic, PBC.