Making @wordpress/scripts hot reload work for DDEV sites

In @wordpress/scripts npm package documentation, there is an npm run start:hot command that starts the build for development with “Fast Refresh”. Under the hood, it uses webpack devServer.

When I tried it out in my local DDEV sites, it does not work as expected.

I also remember that I tried out Set up “React Fast Refresh” in woocommerce-admin #37165, and it did not work well / not working as expected for me.

I took the opportunity to look into it during my WordPress and PHP development and learning last week.

The Issue

When we run the npm run start:hot command and make some code changes, the webpage in tn the browser does not reload / refresh / update automatically. We have to manually refresh the page.

If we look into the browser console, we would see a bunch of console error stacking up:

[webpack-dev-server] Invalid Host/Origin header
[webpack-dev-server] Disconnected!
[webpack-dev-server] Trying to reconnect...

And if we look into the network panel, we would see a bunch of websocket requests like this – notice the request URL and origin in request headers:

Doing a quick Google search on the “Invalid Host/Origin header” error message will bring us to the following GitHub issue: “Invalid Host/Origin Header” warning #1604.

In the issue, one of the comments mentioned using allowedHosts: "all".

If we look into the webpack.config.js in @wordpress/scripts package, it uses allowedHosts: 'auto'. See the webpack documentation for its meaning.

Because of the 'auto' value, the hot reload does not work with our DDEV site with custom domain name.

The Solution

The easiest solution is to have a custom webpack.config.js that overrides the 'auto' value with our own value of 'all':

const defaultConfig = require("@wordpress/scripts/config/webpack.config");
module.exports = {
  ...defaultConfig,
  devServer: {
    ...defaultConfig.devServer,
    allowedHosts: "all",
  },
};

Note that as per webpack documentation, using 'all' is not recommended as apps that do not check the host are vulnerable to DNS rebinding attacks.

Alternatively, we can allow all DDEV sites by using the following:

allowedHosts: ".ddev.site"

With this in place, hot reload would work as expected for DDEV sites.