Servir du HTML
Servir de vraies pages web depuis ton serveur
⏱ Estim. ~10 min
01 · Lire
Jusqu'ici, ton serveur a renvoyé du texte brut et du JSON. Mais quand tu visites un vrai site, tu vois des pages stylées avec des titres, des images, une mise en page — pas du texte brut.
C'est parce que les vrais serveurs web servent des fichiers HTML. HTML est le langage que les navigateurs comprennent et utilisent pour afficher du contenu formaté.
Plutôt que d'écrire du HTML directement dans le code JavaScript (ça devient vite le bazar), on va mettre les fichiers HTML dans un dossier spécial et demander à Express de les servir automatiquement. Ça s'appelle servir des fichiers statiques — des fichiers qui ne changent pas selon la requête, envoyés tels quels.
Points clés
- Les fichiers statiques sont servis directement, sans traitement
- Le dossier public/ est la convention pour les fichiers accessibles publiquement
- Express peut servir tout un dossier de fichiers statiques avec une seule ligne de code
- C'est comme ça que les vrais sites servent leur CSS, leurs images et leurs pages HTML
02 · Pratique réelle
Commence par créer un répertoire public dans ton dossier de projet. Tes fichiers statiques (HTML, CSS, images) vont vivre là.
mkdir public
03 · Pratique réelle
Crée un fichier index.html dans le dossier public. Tu peux le créer avec ton éditeur de texte — enregistre-le sous public/index.html dans ton répertoire de projet. Ce sera la page d'accueil de ton serveur.
<!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
Pourquoi met-on les fichiers HTML dans un dossier public/ plutôt que de les écrire dans le code JavaScript ?
- JavaScript ne peut pas contenir de chaînes HTML
- Pour garder de l'organisation — les fichiers HTML sont servis tels quels, sans traitement
- Le dossier public/ est plus rapide parce qu'il utilise un serveur différent
- Les navigateurs ne savent lire que les dossiers qui s'appellent 'public'
05 · Pratique réelle
Demande maintenant à Express de servir les fichiers du dossier public. Ouvre app.js et ajoute cette ligne après const app = express(); mais avant toutes tes routes app.get(). Cette seule ligne rend chaque fichier du dossier public/ accessible via ton serveur.
app.use(express.static('public'));06 · Pratique réelle
Arrête ton serveur (Ctrl+C), redémarre-le, puis visite http://localhost:3000 dans ton navigateur. Au lieu du texte brut « Hello, World ! », tu devrais maintenant voir une page HTML stylée avec un titre et des paragraphes. C'est ton index.html qui est servi !
node app.js
http://localhost:3000
07 · Compléter
Pour servir des fichiers statiques depuis un dossier appelé 'public', ajoute ce middleware : app.use(express._____('public'))
Autres leçons de ce chapitre
⚠ L'expérience interactive complète nécessite JavaScript. Active-le et recharge la page.
※ Ce site est un projet éducatif indépendant — pas un produit officiel d'Anthropic. Claude™ est une marque déposée d'Anthropic, PBC.