Fichiers statiques

Fait partie de la section Les bases d’Express du Journey Node.js de Coddy. Leçon 11 sur 23.

Une feuille de style ou une image ne change jamais, et créer une route pour chaque fichier serait du travail inutile.

app.use(express.static('assets'));

express.static('assets') sert les fichiers du dossier assets sous leurs propres noms : assets/logo.png répond à GET /logo.png. Le nom du dossier ne fait pas partie de l’URL. Express choisit le type de contenu en fonction de l’extension : text/css pour .css, image/png pour .png. Un chemin sans fichier continue vers vos routes.

app.use ajoute une fonction qui s’exécute pour chaque requête ; le chapitre suivant porte sur ces fonctions. Votre projet contient maintenant un dossier public avec une feuille de style.

Défi

Facile

Recipe Box se dote d’une feuille de style. Le fichier est prêt dans le dossier public ; ton serveur n’a qu’à le distribuer.

Dans server.js, juste après const app = express();, distribue tous les fichiers du dossier public avec express.static. Ainsi, public/style.css est distribué à l’adresse /style.css.
Fais en sorte que la page d’accueil la charge : place <link rel="stylesheet" href="/style.css"> au début du HTML envoyé par la route /.

Essaie : Appuie sur « Jouer » et envoie /. La page utilise maintenant la feuille de style. Envoie /style.css : statut 200, texte CSS et Content-Type défini sur text/css dans l’onglet Headers. Envoie /missing.css : ce fichier n’existe pas, donc la requête passe aux routes. Aucune ne correspond, et Express répond avec le statut 404.

Essayez vous-même

import {escapeHtml} from './html.js';
import express from 'express';
import { recipes } from './data.js';

const app = express();



app.get('/', (req, res) => {
    const items = recipes.map((r) => `<li><a href="/recipes/${r.id}">${escapeHtml(r.title)}</a></li>`);
    res.send(`<h1>Recipe Box</h1><ul>${items.join('')}</ul>`);
});

// type('text') envoie du texte brut, donc chaque titre apparaît sur sa propre ligne.
app.get('/recipes', (req, res) => {
    const { tag } = req.query;
    const list = tag ? recipes.filter((recipe) => recipe.tags.includes(tag)) : recipes;
    res.type('text').send(list.map((recipe) => recipe.title).join('\n'));
});

app.get('/recipes/:id', (req, res) => {
    const recipe = recipes.find((r) => r.id === Number(req.params.id));
    if (!recipe) {
        res.status(404).send('No such recipe');
        return;
    }
    res.send(recipe.title);
});

app.get('/api/recipes', (req, res) => {
    res.json(recipes);
});

app.get('/api/recipes/:id', (req, res) => {
    const recipe = recipes.find((r) => r.id === Number(req.params.id));
    if (!recipe) {
        res.status(404).json({ error: 'No such recipe' });
        return;
    }
    res.json(recipe);
});

app.get('/about', (req, res) => {
    res.send('Recipe Box collects family recipes.');
});

app.listen(3000, () => {
    console.log('Recipe Box is running on port 3000');
});