Pug (PugJS) zur dynamischen HTML-Erzeugung mit NodeJS nutzen
Pug, auch bekannt als PugJS, ist eine Template-Engine für NodeJS. Sie ermöglicht es, HTML-Inhalte dynamisch auf dem Server zu erzeugen, basierend auf Daten, die vom Backend an das Template übermittelt werden. Im Gegensatz zu klassischem HTML erlaubt Pug eine kompaktere und flexiblere Syntax.
In dieser Anleitung wird exemplarisch die IP-Adresse 192.0.2.123 verwendet.
Systemvoraussetzungen
Stellen Sie vor Beginn der Einrichtung sicher, dass folgende Bedingungen erfüllt sind:
- Ein Benutzer ohne Root-Rechte mit
sudo-Rechten ist eingerichtet. Siehe unsere Anleitung zur Einrichtung eines Sudo-Nutzers. - Grundlegende Kenntnisse in der Routing-Verwendung mit ExpressJS sind vorhanden.
- Das System ist auf dem neuesten Stand. Siehe unsere Best Practices zur Aktualisierung von Ubuntu-Servern.
- Das Paket
build-essentialist installiert. Falls nicht, führen Sie folgenden Befehl aus:
$ sudo apt-get install build-essential
NodeJS und NPM installieren
Installieren Sie zunächst curl, um NodeJS aus dem NodeSource-Repository einrichten zu können:
$ sudo apt-get install curl
Fügen Sie nun das aktuelle Active-LTS-Repository für NodeJS hinzu:
$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
Installieren Sie anschließend NodeJS:
$ sudo apt-get install nodejs
Prüfen Sie zum Schluss, ob NodeJS und NPM korrekt installiert wurden:
$ node -v && npm -v
v12.x.x
6.x.x
Einrichtung der Umgebung und ExpressJS-Webserver mit Pug
Projektumgebung initialisieren
Erstellen Sie zunächst ein neues Verzeichnis, in dem die Dateien Ihres Projekts gespeichert werden:
$ cd ~
$ mkdir pugjs
$ cd pugjs
Initialisieren Sie die NodeJS-Umgebung. Dadurch wird automatisch eine package.json-Datei erstellt:
npm init
Beantworten Sie die Fragen entsprechend Ihrer Projektkonfiguration. Wenn Sie alle Eingaben mit der Eingabetaste bestätigen, sieht das Ergebnis wie folgt aus:
About to write to ~/pugjs/package.json:
{
"name": "pugjs",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this OK? (yes)
Installieren Sie im Hauptverzeichnis des Projekts die benötigten Pakete express und pug mit folgendem Befehl:
$ npm install --save express pug
Einen einfachen ExpressJS-Server erstellen
Erstellen Sie im Projektverzeichnis eine Datei mit dem Namen index.js:
$ nano index.js
Fügen Sie in index.js folgenden Code ein, um einen einfachen Express-Webserver und eine Route zu definieren:
const express = require("express");
const port = process.env.PORT || 8080;
const app = express();
app.get('/', (req, res) => {
res.send("It is working!");
});
app.listen(port, () => {
console.log(`Server started on port ${port}`);
});
Starten Sie den Server mit NodeJS. Die Ausgabe sollte wie folgt aussehen:
$ node index.js
Server started on port 8080
Öffnen Sie anschließend einen Browser und rufen Sie folgende Adresse auf:
Wenn alles funktioniert, wird auf der Seite die Nachricht ‚It is working!‘ angezeigt.
PugJS-Templates mit ExpressJS-Routen verbinden
Passen Sie die Datei index.js an, um die PugJS-Template-Engine einzubinden und eine Route so zu konfigurieren, dass eine View gerendert wird:
const express = require("express");
const path = require("path");
const port = process.env.PORT || 8080;
const app = express();
app.set('view engine', 'pug'); // Pug als View-Engine definieren
app.set('views', path.join(__dirname, 'views')); // Ordner für Templates festlegen
app.get('/', (req, res) => {
res.render("home"); // Template "home" für diese Route rendern
});
app.listen(port, () => {
console.log(`Server started on port ${port}`);
});
Erstellen Sie im Projektstammverzeichnis ein neues Verzeichnis namens views und wechseln Sie in dieses:
$ mkdir views && cd views
Erstellen Sie im views-Verzeichnis eine Datei namens home.pug. Diese wird vom ExpressJS-Server bei Aufruf der Startseite ausgeliefert:
$ touch home.pug
Nach diesem Schritt sollte Ihre Projektstruktur wie folgt aussehen (ohne node_modules und package.json):
~/pugjs/
├── index.js
└── views/
└── home.pug
Öffnen Sie home.pug und fügen Sie folgenden Basisaufbau im Pug-Format ein:
html
head
title Homepage
body
h1 Welcome to the Homepage!
Wechseln Sie zurück ins Hauptverzeichnis des Projekts und starten Sie den Server erneut:
$ cd ~/pugjs
$ node index.js
Server started on port 8080
Öffnen Sie anschließend Ihren Webbrowser und rufen Sie folgende Adresse auf:
Sie sollten nun eine Webseite sehen, die die Nachricht ‚Welcome to the Homepage!‘ in einer <h1>-Überschrift darstellt.
Daten von ExpressJS an ein Pug-Template übergeben
Um Daten vom Backend an eine Pug-Vorlage zu übergeben, ergänzen Sie in der Datei index.js einen zweiten Parameter bei der render-Methode. Dieser Parameter enthält das Objekt mit den anzuzeigenden Informationen:
const express = require("express");
const path = require("path");
const port = process.env.PORT || 8080;
const app = express();
app.set('view engine', 'pug'); // Pug als Template-Engine setzen
app.set('views', path.join(__dirname, 'views')); // Verzeichnis für die Templates definieren
app.get('/', (req, res) => {
// Übergabe eines Objekts mit Daten an die View
res.render("home", {message: "THIS IS SENT FROM THE SERVER!"});
});
app.listen(port, () => {
console.log(`Server started on port ${port}`);
});
Öffnen Sie nun die Datei home.pug im Verzeichnis views und erweitern Sie diese, um die übermittelten Daten anzuzeigen:
html
head
title Homepage
body
h1 Welcome to the Homepage!
p=message
Wechseln Sie zurück in das Projektverzeichnis und starten Sie den Server erneut mit NodeJS:
$ cd ~/pugjs
$ node index.js
Server started on port 8080
Öffnen Sie Ihren Browser und rufen Sie die folgende Adresse auf:
Nun sehen Sie die Überschrift ‚Welcome to the Homepage!‘ sowie einen Absatz mit dem Text ‚THIS IS SENT FROM THE SERVER!‘.
Abschließende Gedanken
Sie haben erfolgreich ein grundlegendes Template-Setup mit Pug konfiguriert. Weitere Informationen und weiterführende Möglichkeiten finden Sie in der offiziellen Pug API-Dokumentation.
