PugJS mit Express: Dynamische HTML-Templates in 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-essential ist 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:

http://192.0.2.123:8080/

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:

http://192.0.2.123:8080/

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:

http://192.0.2.123:8080/

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.