Webpack-dev-server: Is there a way to send hot updates through Unix socket?

Created on 28 Nov 2016  路  5Comments  路  Source: webpack/webpack-dev-server

version: 2.1.0-beta.12

use case:

Webpack-dev-server runs on remote machine and cooperate with remote backend server(the backend server has been bound to unix socket ), And the entry of the whole webapp is something like this http://10.0.0.9:8678.
I noticed that the 2.1.0-beta.12 version webpack-dev-server can serve bundles through Unix socket with CLI like this --socket shared/sockets/webpack.sock , but the HMR part will need to set host and port.
If I leave the HMR configuration part as defaults, It will send request like this:

http://localhost/sockjs-node/info?t=1480337410648

,which won't work since the server is http://10.0.0.9:8678 and not http://localhost

I can set the HMR part like this webpack-dev-server/client?http://0.0.0.0:8679 and do some server configuration to eliminate the CORS error. But this is not elegant.

Is there a way to bind the HMR to unix socket so that there is no need to set host and post and do CORS server config?

Most helpful comment

Typically, I'm using dev server in socket mode together with nginx:

  • nginx is being configured to pass all /webpack/* and /sockjs-node/* to webpack-dev-server
  • webpack-devserver itself is starting with --public=0.0.0.0 option, so hmr client fallbacks to self.location.hostname which is correct value for this usecase
  • Everything is still on one host so no additional configuration for CORS required

@everthis can you please explain what is your usecase? How do you connecting to that socket?

All 5 comments

Not that I know of. I don't know much about Unix sockets tbh, maybe @resure can help you out here since he made the PR for Unix sockets.

Would you or @resure be interested in making a PR to support this, if possible?

Typically, I'm using dev server in socket mode together with nginx:

  • nginx is being configured to pass all /webpack/* and /sockjs-node/* to webpack-dev-server
  • webpack-devserver itself is starting with --public=0.0.0.0 option, so hmr client fallbacks to self.location.hostname which is correct value for this usecase
  • Everything is still on one host so no additional configuration for CORS required

@everthis can you please explain what is your usecase? How do you connecting to that socket?

@resure Thanks, the --public host:port option really works.

@resure

It sounds like you and I have similar setups, except I can't get it to work. After trying nearly everything and purpling all my google searches I keep getting this in the Chrome network inspector:

client:176 [WDS] Disconnected!
client:176 [WDS] Disconnected!
sockjs.js:1601 GET http://[DEV URL OMITTED]:3035/sockjs-node/info?t=1528813420684 0 ()

([DEV URL OMITTED] is my note here. that's not in the logs :) ) The GET to sockjs-node sits in pending for a while and then switches to cancelled. this keeps looping forever.

I'm using a VPS for my dev environment. Running webpack dev server and nginx.

nginx is being configured to pass all /webpack/* and /sockjs-node/* to webpack-dev-server

Can you explain how you set this up? I'm using this:

location /sockjs-node {
  proxy_pass http://127.0.0.1:3035;
  proxy_http_version 1.1;
  proxy_set_header    Upgrade $http_upgrade;
  proxy_set_header    Connection "upgrade";
  proxy_set_header    Host $http_host;
  proxy_set_header    X-Real-IP $remote_addr;
  proxy_redirect off;
}

webpack-devserver itself is starting with --public=0.0.0.0 option, so hmr client fallbacks to self.location.hostname which is correct value for this usecase

How do you set this? If I set anything other than [DEV URL]:3035 for my webpack dev server public config I get 404s:

sockjs.js:1601 GET http://[DEV URL]/sockjs-node/info?t=1528814691962 404 (Not Found)

Any help would be _greatly_ appreciated!

@vcavallo here is my nginx setup:

    root /.../app/public;

    location @node {
        proxy_pass http://localhost:7070;
        proxy_http_version 1.1;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    location / {
        try_files $uri @node;
    }

I've recently switched to webpack hot middleware, but overall scheme should still be same.

Maybe you have connection problems, like in #416?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

hnqlvs picture hnqlvs  路  3Comments

piotrszaredko picture piotrszaredko  路  3Comments

wojtekmaj picture wojtekmaj  路  3Comments

da2018 picture da2018  路  3Comments

nikirossi picture nikirossi  路  3Comments