Scripts: Allow passing local development URL via --hot flag.

[ryanwelcher]

What problem does this address?

When using Fast refresh via the --hot flag, the webpack configuration setsdevServer.allowedHosts to auto. This allows a small set of URLs to be used( 'localhost', 'host' , and client.webSocketURL.hostname). If the domain being used doesn't match one of those, there are no errors and Fast refresh doesn't work.

Currently, the only way to modify this setting is to create a custom webpack.config.js file and add the code below. Adding an entire new config to enable this feature is a large, and IMO, unnecessary barrier to usage.

// Import the original config from the @wordpress/scripts package.
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );

// Add any a new entry point by extending the webpack config.
module.exports = {
	...defaultConfig,
	devServer: {
		...defaultConfig.devServer,
		allowedHosts: 'mysite.dev',
	},
};

What is your proposed solution?

I propose that we add the ability to pass an optional value to the existing --hot flag that would be used as the value for devServer.allowedHosts in the config. If the value is not set or was an invalid URL, the config would continue to use auto as the default.

wp-scripts start --hot mydev.site

[gziolo]

It’s already possible through CLI as explained in https://webpack.js.org/configuration/dev-server/#devserverallowedhosts, example:

npx webpack serve --allowed-hosts .host.com --allowed-hosts host2.com

I see the value is set to auto which will accept value set as host with https://webpack.js.org/configuration/dev-server/#devserverhost, example:

npx webpack serve --host 0.0.0.0

Noting that wp-scripts start uses webpack serve behind the scenes.

[ryanwelcher]

Ah interesting. I'll see if I can get this working without needed to make code changes.

[gziolo]

There is also the question what is your configuration as I assumed that both the WordPress site and the dev server would be served from the same custom domain on different ports. The more details you provide the more I can help to sort out the changes necessary to the default configuration.

[gziolo]

By the way, we could also tweak the default configuration so the port for the dev server is only set when the custom host is not provided. Although again it all depends what is the host for the dev server vs the host for WordPress.