Webpack-dev-server: Please don't append port when negotiating location (or give config to turn this off)

[sontek]

• Operating System:
  OSX

• Node Version:
  v6.3.1

• NPM Version:
  5.6.0

• webpack Version:
  3.5.5

• webpack-dev-server Version:
  2.9.5

• [ ] This is a bug
• [X] This is a feature request
• [X] This is a modification request

Code

  // webpack.config.js
const entryList = {
        app: getRootEntry(isDev, ['./static/js/entry_app.js']),
        site: getRootEntry(isDev, ['./static/js/entry_site.js']),
        forms: getRootEntry(isDev, ['./static/js/entry_forms.js'])
    };

 devServer: {
            host: '0.0.0.0',

            /// Enable gzip
            compress: true,
            contentBase: './dist',
            /* Theoretically, the public option is better but they only support a single host
             *
             * This is a security issue not using public.
             * */
            disableHostCheck: true,
            // Do not enable HMR on the server, it is enabled with --hot
            // hot: true,
            before: (app) => {
                /* Serve the dev settings that are normally injected via nginx */
                app.get('/settings.js', function (req, res) {
                    const fullPath = path.join(__dirname, settingsFile);
                    res.sendFile(fullPath);
                });
                app.use(historyFallback({verbose: false}));

            },
        },

Expected Behavior

When hot reloading connects, I expect it to connect to the same host that I'm visiting in my browser, since I have different domains for different entries. I proxy all this through nginx and I want HMR to go through nginx as well.

Actual Behavior

webpack-dev-server appends a port to my window.location and bypasses nginx. So when viewing the site with HTTPs we get the following:

GET https://regsites.localhost:8081/sockjs-node/info?t=1513792103322 net::ERR_CONNECTION_CLOSED

if it didn't append the port it would work correctly.

For Bugs; How can we reproduce the behavior?

• Setup a domain like "myapp.localhost" and server it via nginx and have it proxy to webpack-dev-server
• Make sure the server is running with HMR
• When you go to the site, you'll see it connect directly the port instead of going through nginx

For Features; What is the motivation and/or use-case for the feature?

This is so we can have nginx has a proxy but continue to use HMR

[sontek]

A workaround I found was listening on a socket instead of a port, that way the port doesn't get appended. Not my preferred route but it does work.

[shellscape]

Unfortunately this is a limitation that won't be changed for 2.x. We've ditched SockJS in 3.x (npm i webpack-dev-server@next) in favor of native WebSocket, so this shouldn't be a problem moving forward.

However, I will say that there's just no possible way we can cater to every single person's unique testing environment. The setup you mentioned is one of the more complicated setups for WDS that I've seen [mentioned]. When I see a failure of WDS for something like that, I like to recommend to people that they roll their own server setup using webpack-hot-middleware and webpack-dev-midleware, similar to how koa-webpack does it, and it's not at all that complicated to pull off. That's not to say there isn't a small modifcation to WDS that would avoid the need, but we'd literally go bananas if we tried to tackle the world in this module.

[MatTheCat]

The setup is complicated because the documentation saying

It will try to guess the URL of the server based on window.location

is wrong. The URL is actually built from __resourceQuery, which makes no sense when using a reverse proxy.

Setting host: '0.0.0.0' and disableHostCheck: true is a hack to circumvent the host being wrong but there is no hack for the port.

Removing this condition does the job so why is it here?

[kubatek94]

@MatTheCat Actually there is a hack for the port - it needs to be 0.
I have following config and it works nicely behind reverse proxy:

devServer: { host: '0.0.0.0', port: '7654', hot: true, inline: true, disableHostCheck: true, public: '0.0.0.0:0' },

With such config, due to setting public to '0.0.0.0:0', it works because:

• hostname is overridden to use window location on this line:
  https://github.com/webpack/webpack-dev-server/blob/master/client-src/default/index.js#L182

• port is overridden to use window location port on this line:
  https://github.com/webpack/webpack-dev-server/blob/master/client-src/default/index.js#L42

[alexander-akait]

We can do this in next major release

[simkessy]

Document this somewhere