Set options.host to 'localhost'

[caryli]

Original discussion reference: webpack/webpack-dev-server#1129

Summary
Define the host property of the options object and set it to 'localhost'.

When host is not specified, host is defaulted to 'localhost' when using the webpack-dev-server CLI, but is left undefined when using the webpack-dev-server Node.js API with addDevServerEntrypoints.

Because of this, the code example will throw Uncaught SyntaxError: The URL 'http:/sockjs-node' is invalid in the browser.

There are differences between the CLI and Node.js API as discussed here: webpack/webpack-dev-server#616

Details
When using webpack-dev-server with the Node.js API in the following scenario:

1. using addDevServerEntrypoints to inject webpack-dev-server into the entry point in webpack.config.js instead of manually (i.e. entry: ['./app.js', '../../client/index.js?http://localhost:5000/'])

2. the options object passed as the argument to the devServerOptions parameter of addDevServerEntrypoints does not have a host property nor a useLocalIp property as in the below example used at https://webpack.js.org/guides/hot-module-replacement/#via-the-node-js-api:

   dev-server.js

   const webpackDevServer = require('webpack-dev-server');
   const webpack = require('webpack');
   
   const config = require('./webpack.config.js');
   const options = {
     contentBase: './dist',
     hot: true
   };
   
   webpackDevServer.addDevServerEntrypoints(config, options);
   

because of:

webpack-dev-server/lib/util/createDomain.js

11  const hostname = options.useLocalIp ? internalIp.v4() : options.host;

hostname will be set to options.host which is currently undefined.

This is not the case when using the webpack-dev-server CLI as defaults are set in webpack-dev-server/bin/webpack-dev-server.js. That step is skipped when calling addDevServerEntrypoints directly through the Node.js API.

Because of this, devClient:

webpack-dev-server/lib/util/addDevServerEntrypoints.js

18  const devClient = [`${require.resolve('../../client/')}?${domain}`];
19  console.log(devClient); // Added to print devClient.

will incorrectly resolve to and inject into webpack.config.js:

$ [ '/Users/someFolder/node_modules/webpack-dev-server/client/index.js?http:' ] // console.log(devClient)

instead of the correct:

$ [ '/Users/someFolder/node_modules/webpack-dev-server/client/index.js?http://localhost' ] // console.log(devClient)

This will eventually cause the error:

Uncaught SyntaxError: The URL 'http:/sockjs-node' is invalid

when starting the server:

$ node dev-server.js

and navigating to, in this case, localhost:5000 because socksjs-client is called with a url without a host property:

sockjs-client/lib/main.js

67  var parsedUrl = new URL(url);
68  if (!parsedUrl.host || !parsedUrl.protocol) {
69    throw new SyntaxError("The URL '" + url + "' is invalid");
70  }

The behavior of the webpack-dev-server CLI is different and correctly defaults to localhost:

$ ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --content-base dist/
[ '/Users/someFolder/node_modules/webpack-dev-server/client/index.js?http://localhost:8080' ] // console.log(devClient)
Project is running at http://localhost:8080/
webpack output is served from /

because the options object passed as the argument to the devServerOptions parameter of addDevServerEntrypoints is given the defaults host: 'localhost' and port: 8080:

webpack-dev-server/bin/webpack-dev-server.js

 72  const DEFAULT_PORT = 8080;
...
 74  yargs.options({
...
210    host: {
211      type: 'string',
212      default: 'localhost',
213      describe: 'The hostname/ip address the server will bind to',
214      group: CONNECTION_GROUP
215    },
...
221  });
222
223  const argv = yargs.argv;
...
244  if (argv.host !== 'localhost' || !options.host) { options.host = argv.host; }
...
344  options.port = argv.port === DEFAULT_PORT ? defaultTo(options.port, argv.port) : defaultTo(argv.port, options.port);
345  if (options.port != null) {
346    startDevServer(webpackOptions, options);
...
359  function startDevServer(webpackOptions, options) {
360    addDevServerEntrypoints(webpackOptions, options);

Note
In the example, server.listen is given the 5000 and 'localhost' arguments:

dev-server.js

server.listen(5000, 'localhost', () => {
  console.log('dev server listening on port 5000');
});

But the above 'localhost' is passed to the server, webpack-dev-server/lib/Server.js, and not the client, webpack-dev-server/client/index.js, that is injected into the entry point and Uncaught SyntaxError: The URL 'http:/sockjs-node' is invalid will continue to be thrown.

[skipjack]

@shellscape can you take a look at this? For some reason I can't request you for review, I may add you as a contributor on this project if you don't mind. That way I should be able to for all WDS related PRs going forward.

[shellscape]

@skipjack I'd be honored, please do feel free to add me. I'll take a look...

[shellscape]

This is a good change. While the examples in webpack-dev-server's repo reflect the necessary settings, the docs here do not.