Statische Dateien

Teil des Abschnitts Express-Grundlagen der Node.js-Journey von Coddy. Lektion 11 von 23.

Ein Stylesheet oder ein Bild ändert sich nie, und für jede Datei eine Route einzurichten wäre unnötige Arbeit.

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

express.static('assets') stellt die Dateien des Ordners assets unter ihren eigenen Namen bereit: assets/logo.png beantwortet GET /logo.png. Der Ordnername ist nicht Teil der URL. Express wählt den Inhaltstyp anhand der Erweiterung: text/css für .css, image/png für .png. Ein Pfad ohne Datei wird an deine Routen weitergegeben.

app.use fügt eine Funktion hinzu, die bei jeder Anfrage ausgeführt wird; im nächsten Kapitel geht es um diese Funktionen. Dein Projekt hat jetzt einen Ordner public mit einem Stylesheet.

Aufgabe

Einfach

Recipe Box bekommt ein Stylesheet. Die Datei liegt bereits im Ordner public; dein Server muss sie nur bereitstellen.

Stelle in server.js direkt nach const app = express(); alle Dateien im Ordner public mit express.static bereit. Dann wird public/style.css unter /style.css bereitgestellt.
Sorge dafür, dass die Startseite das Stylesheet lädt: Setze <link rel="stylesheet" href="/style.css"> an den Anfang des HTML-Codes, den die Route / sendet.

Probiere es aus: Klicke auf „Spielen“ und sende /. Die Seite verwendet jetzt das Stylesheet. Sende /style.css: Status 200, den CSS-Text und einen Content-Type von text/css im Tab „Headers“. Sende /missing.css: Eine solche Datei gibt es nicht, daher wird die Anfrage an deine Routen weitergeleitet. Keine Route stimmt überein, und Express antwortet mit 404.

Probier es selbst

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') sendet reinen Text, sodass jeder Titel in einer eigenen Zeile erscheint.
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');
});