Javascript Node.js Express

Express ist ein Standard-Modul für Node.js, auch wenn es bei der Installtion nicht mitgeliefert, sondern mit npm installiert wird.

Node.js

Projekt mit Express anlegen

Express ist – wie die Startseite des Express-Projekts betont – ein schnelles, unkompliziertes Framework für Node.js. Ein guter Einstieg in die Hintergründe von Express ist der Guide zum Routing.

Initialisieren – package.json im Projektordner mit npm init anlegen.

npm init -y 

Das erzeugt die Datei package.json im Node-Ordner. Server in index.js (default) oder server.js (in package.json einsetzen) erzeugen

Express installieren

npm install express

Bislang wurde meist nodemon installiert, um den Server nicht nach jeder Änderungen neu starten zu müssen.

npm install nodemon --save-dev

Stattdessen kann heute watch eingesetzt werden – nur eine Änderung an den npm-Scripts in der Datei package.json:

"scripts": {
	"start": "node server",
	"dev": "node --watch server"
},

Mit npm run dev in der Konsole startet der Server und erkennt Änderungen beim Speichern automatisch.

Einfache Routes, HTML und JSON ohne stringify

Kein Content-Type muss angegeben werden, HTML wird geparst, selbst JSON-Daten können versendet werden, und zwar ohne stringify.

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

// Ganz einfache Weiterleitung mit Endpunkt /
app.get("/", (req, res) => {  
	res.send("<h1>Hallo Welt</h1>");
})

app.listen(3000, () => console.log("Server running on port 3000"));

localhost:5000 im Browser eingeben, und schon steht eine HTML-Seite mit Lametta.

<html>
	<head>
	</head>
	<body>
		<h1>Hallo Welt</h1>
	</body>
</html>

Anstelle von <h1>Hallo Welt</h1> könnte auch direkt ein JSON-Objekt stehen.

res.send({ autor: "Douglas Adams"});

Am Rande: Traditionell werden Module mit require geladen, seit ES6 (ab Node v15 – 2020) auch mit der import()-Funktion. import() gibt ein Promise zurück.

Routes – Weiterleitungen

Eine Route oder Weiterleitung bestimmt, wie eine Anwendung auf einen Client-Request an einem bestimmten Endpunkt antwortet – Route Handler sind Code-Blöcke, die die Logik der Query Strings abhandeln.

Route parameters – Weiterleitungs-Parameter – sind URL-Segmente mit Namen, die auf eine spezielle Position der URL abzielen.

Route path: /users/:userId/books/:bookId
Request URL: http://localhost:3000/users/34/books/8989
req.params: { "userId": "34", "bookId": "8989" }
app.get('/users/:userId/books/:bookId', (req, res) => {
  res.send(req.params)
})

Quelle: Express

Mit einem einfachen Callback

// GET mit Routing-Parametern
app.get("/class/:id", (request, response) => {
    //console.log (request.params);
    const studentId = Number(request.params.id);
    const student = data.filter((student) => student.id === studentId);
    response.send(student);
});

Aufrufen mit

http://localhost:3000/class/26

Express Static Middleware

Statt jetzt für jeden Endpunkt der Anwendung ein app.get / app.post einzusetzen, wird Express Static Middleware eingesetzt. Middleware sitzt zwischen hereinkommenden und ausgehenden Requests und Responses. Noch das Node-Modul path importieren und einen Ordner für HTML-Dateien – z.B. public – im Node-Ordner anlegen.

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


// express static folder
app.use(express.static(path.join(__dirname, "public")));

app.listen(7000, () => console.log("Server running on port 7000"));

Jede HTML-Datei, die im Ordner public angelegt wird, ist jetzt im Browser mit ihrer Route erreichbar. HTML-Dateien müssen jetzt allerdings mit .html-Erweiterung aufgerufen werden.

express app.get mit next()

Die next-Funktion muss nicht next heißen.

// GET mit next()
app.get ("/next", (request, response, next) => {
    console.log ("Response will be send by the next function");
    next();
}, (request, response ) => {
    response.send("Just set up route with second callback")
});

Response Methoden

.json
Sendet eine JSON-Respons
.send
Sendet eine HTTP-Respons
.download()
Überträgt eine Datei als Anhang
.redirect()
Weiterleitung an einen bestimmten Pfad
import data from "./data/mock.json" assert { type: 'json' };
…
app.get ("/", (request, response) => {
    response.json(data);
});

// GET mit download
app.get ("/download", (request, response) => {
    response.download ("images/gaspreis-entwicklung-2005-2020.webp");
});

Middleware

Entsprechend der offiziellen Express-Dokumentation versteht man unter Middleware-Funktionen solche Funktionen, die Zugriff auf auf das Request-Object, das Response-Object und die next-Funktion haben.

Drei Blöcke zeigen einen Ablauf mit Request Middleware Next bis zu return und Response
Ablauf eines Requests durch Middleware

Wenn ein Request hereinkommt, fließt der Request sequentiell durch alle Middelware-Funktionen, bis eine Response zustande kommt und kehrt dann zurück zum Client.

Middleware-Funktionen werden mit app.use registriert.

app.use (function (req, res, next) {

})

Der dritte Parameter next ist ein callback, ist die Flusssteuerung und kann zusätzliche Aufgaben durchführen.

Suchen auf mediaevent.de