Bud.js Hot Loading with DDEV Container Setup

All developers rely on DDEV for our daily work on customer projects. This is an excellent development environment based on Docker. Each project is created individually and therefore also has a local environment that can be configured exactly as the actual hosting will look later.

Since the introduction of Gutenberg and thus also React, development with JavaScript has become increasingly important. Matt Mullenweg, the founder of WordPress, explains this very aptly in the following video:

DDEV is not only for PHP

Although DDEV was originally closely associated with PHP development, it has also supported Node.js for some versions. This means that a Node.js version always runs and can be used in every “web” container. The desired version can be set in the config.yaml file.

Since we rely on Bud.js as a build tool for JavaScript/TypeScript and SASS, we can start the Bud.js development environment in our web container thanks to Node.js.

In our example, we assume that a plugin is being developed and Bud.js is already installed as a dependency.

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

The development environment starts a Node.js process, which is accessible via port 3000 by default. We have to make our hot reloading available via this port later.

Additional port for DDEV

We have to adjust the configuration so that port 3000 is also released by DDEV. DDEV already offers a suitable example of this.

We therefore add the following part to our config.yaml file to enable port 3000:

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

After the DDEV project has been restarted once and you have restarted your Bud.js development server, you can test the hot reloading endpoint. As port 3000 now leads directly to Bud.js, you can test the endpoint at the following address: https://my-domain.ddev.site:3000/bud/hot

Now there is another problem: Bud.js accesses the domain without a port by default, i.e. https://my-domain.ddev.site/bud/hot. However, this URL will still generate a 404 error.

Forward the path /bud/ to Bud.js with Nginx

Access to /bud/ must be forwarded to the container with port 3000. In DDEV, we can customize the Nginx configuration for this. We therefore add the following block within the “server” block in our nginx-site.conf file:

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;
}

Important: The line “#ddev-generated” must be removed, otherwise DDEV will overwrite the configuration each time it is restarted.

Finally, the project must be restarted. The Bud.js hot reloading should then work.