Ein kleiner Server mit Express

Baue deinen eigenen Server in Node.js und Express. Deine erste API beantwortet ihre erste Anfrage.

Zeig mir das: Server einrichten

Express ist das beliebteste Paket zum Bauen von Servern in Node.js – es macht aus der Aufgabe nur wenige Zeilen. Ein Server ist ein eigenes Projekt, getrennt von der React-App (denk dran: Frontend und Backend sind zwei Hälften). Im Terminal:

cd Desktop
mkdir my-server
cd my-server
npm init -y
npm install express

mkdir erstellt einen Ordner (make directory),
npm init -y richtet ein neues Node.js-Projekt ein (erstellt package.json),
npm install express lädt Express herunter.

Öffne den Ordner in VS Code und erstelle eine Datei server.js:

const express = require("express");
const app = express();

// When someone sends a GET to /api/hello, respond
app.get("/api/hello", (request, response) => {
  response.json({ message: "Hi! This is your own server. 🎉" });
});

app.listen(3900, () => {
  console.log("Server running at http://localhost:3900");
});

Starte ihn:

node server.js

Und öffne http://localhost:3900/api/hello im Browser. Siehst du die JSON-Antwort? Du hast gerade einen Server gebaut. Keine Magie – 10 Zeilen.

Was im Code passiert:

require("express") – ein Paket ausleihen (die Server-Version von import).
app.get("/api/hello", ...) – „antworte auf GET-Anfragen an diese Adresse.” Dieses Paar aus Adresse + Antwort heißt Endpoint.
response.json({...}) – JSON zurückschicken.
app.listen(3900) – lausche auf Port 3900. (Vite läuft auf 3901, der Server auf 3900 – zwei Programme können nicht denselben Port nutzen.)

Du stoppst den Server mit Ctrl+C. Und Achtung: Nach jeder Code-Änderung musst du stoppen und neu starten – ein Server ist kein Vite, er aktualisiert sich nicht von selbst.

Zeig mir das: ein Server mit Daten

Ein Server liefert meist Daten aus. Füge einen zweiten Endpoint über listen hinzu:

const results = [
  { opponent: "Lakeside", score: "3:1", home: true },
  { opponent: "Northgate", score: "2:2", home: false },
  { opponent: "Elmwood", score: "4:0", home: true },
];

app.get("/api/results", (request, response) => {
  response.json(results);
});

Starte den Server neu und öffne http://localhost:3900/api/results – deine Daten, ausgeliefert über eine API. Genau so funktioniert jede große Website (nur mit Datenbank statt Array).

Jetzt du 💪

Bringe einen Server nach der Anleitung zum Laufen.
Füge einen Endpoint mit Daten aus deinem Projekt hinzu: 🏫 /api/menu (Array mit Essen der Woche) · 🙋 /api/favorites (deine Top-Spiele/Bücher) · 🌍 /api/trips (Reiseliste) · ⚽ /api/results (Spielergebnisse).
Füge einen spielerischen Endpoint /api/random hinzu, der jedes Mal eine andere Nachricht zurückgibt:

const messages = ["We're winning today!", "Practice at 5 PM!", "Let's go, Eagles!"];

app.get("/api/random", (request, response) => {
  const random = messages[Math.floor(Math.random() * messages.length)];
  response.json({ message: random });
});

Probiere alle Endpoints im Browser – und rufe einen mit fetch() aus der Konsole auf, wie in der letzten Lektion.

⚠️

„Cannot GET /api/…” heißt, der Endpoint existiert nicht – prüfe Tippfehler in der Adresse und ob du den Server nach der Änderung neu gestartet hast. „EADDRINUSE” heißt, Port 3900 ist belegt – wahrscheinlich läuft noch ein alter Server in einem anderen Terminal; finde ihn und stoppe ihn (Ctrl+C).

✅

Kontrolliere dich selbst: Dein Server läuft auf Port 3900 und antwortet auf mehreren Endpoints mit deinen eigenen JSON-Daten. Du kennst das Frontend, du startest ins Backend – es fehlt nur noch die Verbindung. Genau das machen wir in der nächsten Lektion mit einem Gästebuch.

Das nimmst du aus dieser Lektion mit

Ein Server in Express: npm init -y, npm install express, node server.js, stoppen mit Ctrl+C, nach jeder Änderung neu starten.
Ein Endpoint = eine Adresse + eine Antwort: app.get("/api/something", (request, response) => response.json(...)).
Frontend (3901) und Backend (3900) sind zwei Programme auf zwei Ports.