Connecting proxies in webpack-dev server

Question

Is it possible to proxy through websocket in webpack dev server? I know how to proxy regular HTTP requests to another backend, but it doesn’t work for websites, apparently because the goal in the proxy configuration starts with http: // ...

Answer 1

Version 1.15.0 of the webpack-dev server supports proxy connections through websocket. Add the following to the configuration:

devServer: { proxy: { '/api': { target: 'ws://[address]:[port]', ws: true }, }, } 

Answer 2

Webpack dev server does not support ws proxy connections yet .

Until then, you can implement proxying manually by adding an additional http-proxy to the webpack server:

• Add a new dependency to package.json :

   "http-proxy": "^1.11.2" 

• Proxies connect manually by listening to upgrade events

   // existing webpack-dev-server setup // ... var server = new WebpackDevServer(...); proxy = require('http-proxy').createProxyServer(); server.listeningApp.on('upgrade', function(req, socket) { if (req.url.match('/socket_url_to_match')) { console.log('proxying ws', req.url); proxy.ws(req, socket, {'target': 'ws://localhost:4000/'}); } }); //start listening server.listen(...) 

NOTE (after using this for some time)

There is a problem with proxies, because socket.io used by WebpackDevServer to notify the browser of code changes. socket.io may conflict with proxies; in my case, the connections were dropped before the receipt was returned from my server if it did not respond very quickly.

At this point, I simply uninstalled WebpackDevServer and used a custom implementation based on react-hot-boilerplate