HTML ausliefern

Echte Webseiten von deinem Server aus ausliefern

⏱ ca. ~10 Min

01 · Lesen

Bis jetzt hat dein Server Klartext und JSON zurückgegeben. Aber wenn du echte Websites besuchst, siehst du gestylte Seiten mit Titeln, Bildern und Layout — keinen rohen Text.

Das liegt daran, dass echte Webserver HTML-Dateien ausliefern. HTML ist die Sprache, die Browser verstehen und mit der sie reich formatierten Inhalt anzeigen.

Statt HTML mitten in den JavaScript-Code zu schreiben (was schnell unübersichtlich wird), legen wir HTML-Dateien in einen besonderen Ordner und lassen Express sie automatisch ausliefern. Das nennt man statische Dateien ausliefern — Dateien, die sich nicht je nach Anfrage ändern, werden einfach so verschickt, wie sie sind.

Kernpunkte

Statische Dateien werden direkt ausgeliefert, ohne Verarbeitung
Der Ordner public/ ist die Konvention für Dateien, die öffentlich vom Browser erreichbar sind
Express kann mit einer Codezeile einen ganzen Ordner mit statischen Dateien ausliefern
So liefern echte Websites CSS, Bilder und HTML-Seiten aus

02 · Echte Übung

Leg zuerst in deinem Projektordner ein Verzeichnis public an. Deine statischen Dateien (HTML, CSS, Bilder) leben hier drin.

mkdir public

03 · Echte Übung

Erstell im Ordner public eine Datei index.html. Du kannst sie mit einem Texteditor anlegen — speicher als public/index.html in deinem Projektverzeichnis. Das wird die Startseite deines Servers.

<!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

Warum legen wir HTML-Dateien in den Ordner public/, statt sie in den JavaScript-Code zu schreiben?

JavaScript darf keine HTML-Strings enthalten
Damit die Sachen ordentlich bleiben — HTML-Dateien werden so ausgeliefert, wie sie sind, ohne Verarbeitung
Der Ordner public/ ist schneller, weil ein anderer Server benutzt wird
Browser können nur Ordner mit dem Namen ‚public‘ lesen

05 · Echte Übung

Jetzt sag Express, dass es die Dateien im Ordner public ausliefern soll. Öffne app.js und füg diese Zeile nach const app = express(); und vor allen app.get()-Routes ein. Diese eine Zeile macht jede Datei im Ordner public/ über deinen Server erreichbar.

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

06 · Echte Übung

Stopp deinen Server (Ctrl+C) und starte ihn neu, dann ruf im Browser http://localhost:3000 auf. Statt des Klartextes „Hello, World!“ solltest du jetzt eine gestylte HTML-Seite mit Überschriften und Absätzen sehen. Das ist deine index.html, die ausgeliefert wird!

node app.js

http://localhost:3000

07 · Ausfüllen

Um statische Dateien aus einem Ordner namens ‚public‘ auszuliefern, füg diese Middleware ein: app.use(express._____('public'))

Andere Lektionen aus diesem Kapitel

⚠ Das volle interaktive Erlebnis braucht JavaScript. Bitte aktiviere es und lade die Seite neu.

※ Diese Seite ist ein unabhängiges Bildungsprojekt — kein offizielles Anthropic-Produkt. Claude™ ist eine eingetragene Marke von Anthropic, PBC.