Bud.js Hot Loading mit DDEV Container Setup

Für unsere tägliche Arbeit an Kundenprojekten setzen alle Entwickler auf DDEV. Dies ist eine hervorragende Entwicklungsumgebung, die auf Docker basiert. Jedes Projekt wird einzeln angelegt und verfügt so auch lokal über eine Umgebung, die genau so konfiguriert werden kann, wie das tatsächliche Hosting später aussehen wird.

Seit der Einführung von Gutenberg und damit auch React wird die Entwicklung mit JavaScript zunehmend wichtiger. Matt Mullenweg, der Gründer von WordPress, erklärt dies sehr treffend in folgendem Video:

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

YouTube immer entsperren

DDEV ist nicht nur für PHP

Obwohl DDEV ursprünglich eng mit der PHP-Entwicklung verbunden war, unterstützt es seit einigen Versionen auch Node.js. Das bedeutet, dass in jedem “Web”-Container immer auch eine Node.js-Version läuft und verwendet werden kann. Die gewünschte Version kann in der config.yaml Datei eingestellt werden.

Da wir bei JavaScript/TypeScript und SASS auf Bud.js als Build-Tool setzen, können wir dank Node.js in unserem Web-Container die Entwicklungsumgebung von Bud.js starten.

In unserem Beispiel gehen wir davon aus, dass ein Plugin entwickelt wird und Bud.js bereits als Abhängigkeit (Dependency) installiert ist.

ddev start
ddev ssh # Zugriff auf unseren Web-Container
cd /wp-content/plugin/my-plugin # Wechsel in den Ordner, in dem Bud.js ausgeführt werden soll
npm install # Installation der Abhängigkeiten, falls dies noch nicht im Container geschehen ist
npx bud build development # Starten des Entwicklungsservers

Die Entwicklungsumgebung startet einen Node.js-Prozess, der standardmäßig über Port 3000 erreichbar ist. Über diesen Port müssen wir später unser Hot Reloading verfügbar machen.

Zusätzlicher Port für DDEV

Damit der Port 3000 auch von DDEV freigegeben wird, müssen wir die Konfiguration anpassen. DDEV bietet hierfür bereits ein passendes Beispiel.

Wir ergänzen also folgenden Teil in unserer config.yaml Datei, um den Port 3000 freizugeben:

web_extra_exposed_ports:
    - name: nodejs
      container_port: 3000
      http_port: 2999
      https_port: 3000

Nachdem das DDEV-Projekt einmal neu gestartet wurde und Sie Ihren Bud.js-Entwicklungsserver wieder gestartet haben, können Sie den Hot-Reloading-Endpunkt testen. Da Port 3000 jetzt direkt zu Bud.js führt, können Sie unter folgender Adresse den Endpunkt testen: https://my-domain.ddev.site:3000/bud/hot

Jetzt gibt es noch ein Problem: Bud.js greift standardmäßig auf die Domain ohne Port zu, also https://my-domain.ddev.site/bud/hot. Diese URL wird jedoch noch einen Fehler 404 erzeugen.

Den Pfad /bud/ mit Nginx an Bud.js weiterleiten

Zugriffe auf /bud/ müssen an den Container mit Port 3000 weitergeleitet werden. In DDEV können wir hierfür die Nginx-Konfiguration anpassen. Wir ergänzen also in unserer nginx-site.conf Datei folgenden Block innerhalb des “server”-Blocks:

location /bud/ {
   proxy_pass http://127.0.0.1:3000;
   proxy_http_version 1.1;
   proxy_set_header Upgrade $http_upgrade;
   proxy_set_header Connection "upgrade";
   proxy_set_header Host $host;
}

Wichtig: Die Zeile “#ddev-generated” muss entfernt werden, sonst überschreibt DDEV die Konfiguration bei jedem Neustart.

Zum Schluss muss das Projekt noch einmal neu gestartet werden. Danach sollte das Bud.js Hot Reloading funktionieren.