LU15c – Erster Express-Server mit Node.js

• Sie können einen einfachen Express-Server programmieren.
• Sie können den Server über das Terminal starten.
• Sie verstehen den Request-Response-Zyklus (app.get, res.send).
• Sie können erklären, warum dies kein klassisches Website-Frontend, sondern ein Backend-Server / API ist.
• Sie kennen nodemon und einfache npm scripts für einen komfortablen Entwicklungsablauf.

Öffnen Sie die Datei index.js und fügen Sie folgenden Code ein:

import express from 'express';
 
const app = express();
const port = 3000;
 
// Route für GET-Anfragen auf "/"
app.get('/', (req, res) => {
    res.send('Hello World');
});
 
// Server starten und auf Port 3000 auf Anfragen warten
app.listen(port, () => {
    console.log(`Example app listening on port ${port}`);
});

Was passiert in diesem Code?

• import express from 'express'; → Lädt das Express-Framework aus node_modules.
• const app = express(); → Erstellt eine neue Express-Anwendung – das ist Ihr Serverobjekt.
• const port = 3000; → Definiert den Port, auf dem der Server lauscht.
• app.get('/', (req, res) ⇒ { … }); → Definiert eine Route:
  • Wenn eine GET-Anfrage an / kommt,
  • führt Express die Callback-Funktion aus.
  • req = Request-Objekt (Infos über Anfrage),

res = Response-Objekt (Antwort, die Sie zurückschicken).

• res.send('test'); → sendet den Text Hello World als Antwort zurück an den Browser oder Postman.
• app.listen(port, () ⇒ { … }); → Startet den Server und gibt im Terminal eine kurze Meldung aus.

Das Schema zeigt, wie ein Zusammenspiel aus Anfrage (Request) und Antwort (Response) zwischen Client und Server funktioniert.

1. Öffnen Sie in WebStorm das **Terminal** (Projektordner).
2. Starten Sie den Server mit:

node index.js

3. Im Terminal sollte erscheinen:
   *''Example app listening on port 3000''*

4. Öffnen Sie Ihren Browser und geben Sie ein:
   ''http://localhost:3000/''

5. Sie sollten nur das Wort **''test''** im Browser sehen.

6. Server stoppen:
   * Im Terminal ''Strg + C'' (Windows/Linux) oder ''ctrl + C'' (macOS) drücken.

Später werden Sie:

• statt einfachem Text JSON-Daten zurückgeben,
• mehrere Routen (z.B. /api/trips, /api/books) definieren,
• und diese mit Ihrer MySQL-Datenbank verbinden.

Wenn Sie nach jeder Codeänderung den Server mit node index.js neu starten müssen, ist das mühsam. Dafür gibt es zwei Hilfsmittel:

• npm scripts in package.json
• nodemon für automatischen Neustart

Installieren Sie nodemon als Entwicklungsabhängigkeit:

npm install --save-dev nodemon

Dadurch ergänzt npm Ihre package.json um einen Eintrag unter devDependencies für nodemon.

Öffnen Sie package.json und ergänzen Sie den Abschnitt scripts wie folgt (Beispiel):

"scripts": {
  "start": "node index.js",
  "dev": "nodemon index.js"
}

Sie können dann:

• mit npm start den Server einmalig starten,
• mit npm run dev den Server im Entwicklermodus mit automatischem Neustart starten.

Wenn Sie nun in index.js etwas ändern und speichern, startet nodemon den Server automatisch neu.

• Der Ordner node_modules/ kann sehr gross werden.

Er wird von npm automatisch verwaltet und muss nicht manuell bearbeitet werden.

• Für Abgaben (z.B. in Moodle) reicht meist:
  • Quellcode-Dateien (z.B. index.js)
  • package.json (und optional package-lock.json)
• In WebStorm können Sie bei Bedarf die Inlay-Hints (kleine Typ-Hinweise) deaktivieren, wenn diese Sie stören

(Settings → Editor → Inlay Hints).

In den nächsten Learning Units werden Sie:

• weitere Routen in Ihrem Express-Server anlegen,
• Daten nicht nur zurückgeben, sondern auch annehmen (POST, PUT, DELETE),
• Ihre persönlichen Use Cases (z.B. Reisedatenbank, Lieblingsfilme, Geburtstage) mit einer echten MySQL-Datenbank verbinden

und alle CRUD-Operationen über den Backend-Server ausführen.

M290 / BZZ (adapted)