File statici

Fa parte della sezione Fondamenti di Express del percorso Node.js di Coddy. Lezione 11 di 23.

Un foglio di stile o un'immagine non cambia mai, e creare una route per ogni file sarebbe un lavoro inutile.

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

express.static('assets') serve i file della cartella assets con i loro nomi: assets/logo.png risponde a GET /logo.png. Il nome della cartella non fa parte dell'URL. Express sceglie il tipo di contenuto in base all'estensione: text/css per .css, image/png per .png. Un percorso senza file prosegue verso le tue route.

app.use aggiunge una funzione che viene eseguita per ogni richiesta; il prossimo capitolo tratta proprio queste funzioni. Ora il tuo progetto ha una cartella public con un foglio di stile.

Sfida

Facile

Recipe Box ora ha un foglio di stile. Il file è pronto nella cartella public; il tuo server deve solo fornirlo.

In server.js, subito dopo const app = express();, servi tutti i file nella cartella public con express.static. A quel punto public/style.css viene fornito all’indirizzo /style.css.
Fai in modo che la pagina iniziale lo carichi: inserisci <link rel="stylesheet" href="/style.css"> all’inizio dell’HTML inviato dalla route /.

Prova: premi Run e invia /. Ora la pagina usa il foglio di stile. Invia /style.css: stato 200, il testo CSS e un Content-Type di text/css nella scheda Headers. Invia /missing.css: il file non esiste, quindi la richiesta prosegue verso le tue route. Nessuna corrisponde e Express risponde con 404.

Provalo tu

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') invia testo semplice, quindi ogni titolo compare su una riga a sé.
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');
});