Statische Dateien bereitstellen

Oft möchten Sie mit Ihrem Express-Server nicht nur dynamische Antworten schicken, sondern auch sogenannte statische Dateien bereitstellen. Dazu zählen zum Beispiel:

• Bilder (PNG, JPG, SVG)
• CSS-Dateien
• JavaScript-Dateien für das Frontend
• HTML-Dateien

Express macht dies mit nur einer Programmzeile möglich. Sie benötigen lediglich einen öffentlichen Ordner, in den Sie Ihre Dateien legen.

Schritt 1: Einen Ordner für statische Dateien anlegen

Legen Sie in Ihrem Projektverzeichnis einen neuen Ordner an, beispielsweise mit dem Namen public.

mkdir public

Legen Sie dort beliebige Dateien ab, z. B. bild.png, style.css oder index.html.

Schritt 2: Statische Dateien bereitstellen

Fügen Sie in Ihre Express-App folgende Zeile ein:

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

Das bedeutet: Alles, was im public-Ordner liegt, kann direkt im Browser abgerufen werden.

Beispiel

Angenommen, Sie legen die Datei logo.png in public ab. Dann ist sie erreichbar unter:

http://localhost:3000/logo.png

Das funktioniert mit allen Dateien in diesem Ordner – auch mit Unterordnern.

Hinweis:
Stellen Sie statische Dateien immer nur aus Ihrem vorgesehenen öffentlichen Ordner bereit, damit keine sensiblen Dateien an die Öffentlichkeit gelangen.

---

Aufgabe

Übung: Eigene statische Datei bereitstellen

1. Legen Sie in Ihrem Express-Projekt einen öffentlichen Ordner (public) an.
2. Platzieren Sie dort z. B. ein Bild, eine kleine HTML-Datei oder eine CSS-Datei.
3. Fügen Sie in Ihre Express-App die Zeile app.use(express.static('public')) ein.
4. Starten Sie den Server und rufen Sie die statische Datei im Browser auf. Probieren Sie verschiedene Dateitypen aus (z. B. Bild oder HTML).

Optional: Erstellen Sie eine kleine Startseite (index.html) im public-Ordner und lassen Sie diese automatisch ausliefern.