Setting "proxy" in package.json Fails for WebSockets

[kent-h]

Expected Behavior

Setting "proxy" in package.json should proxy WebSockets to specified server.
(As documented here: "The proxy option supports HTTP, HTTPS and WebSocket connections.")

Actual Behavior

Proxy does not work for WebSocket connections.

Reproducible Demo

No time for this atm. ¯\(ツ)/¯

[gaearon]

Did it work in 1.x? Or is this a regression?

[kent-h]

Current workaround:

Create src/setupProxy.js, with:

const proxy = require("http-proxy-middleware")

module.exports = app => {
  app.use(proxy("/websocket", {target: "http://localhost:8080", ws: true}))
}

[kent-h]

In 1.x, it was possible to specify more advanced options, including "ws":true.

Though I don't know what the handling by the simple "proxy": < url > was.

[Timer]

OK, sounds like this isn't a regression but a proposal to auto-detect and proxy websockets in the simple proxy mode.

[kent-h]

At minimum, reality is out of sync with the documentation.
(Ended up wasting a couple hours trying to figure out why I couldn't connect.)

Though I would recommend making WebSocket proxying work by default.

[gaearon]

It was supposed to work in 1.x too.

[avdeev]

I reproduce with issue.

  app.use(proxy('/ws', {
    target: 'http://localhost:3007',
    ws: true,
  }));

[HPM] Upgrading to WebSocket
events.js:167
      throw er; // Unhandled 'error' event
      ^

Error: read ECONNRESET
    at TCP.onStreamRead (internal/stream_base_commons.js:111:27)
Emitted 'error' event at:
    at emitErrorNT (internal/streams/destroy.js:82:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:50:3)
    at process._tickCallback (internal/process/next_tick.js:63:19)

[ivosh]

I can confirm that the following setup worked in 1.x:

"proxy": {
  "/api": {
    "target": "ws://localhost:4000",
     "ws": true
   }
}

but this no longer works in 2.1.1's package.json:
"proxy": "ws://localhost:4000"

I get the following error message upon npm start:
When "proxy" is specified in package.json it must start with either http:// or https://

That said, I will be happy to test any fix you throw at my direction.

[mxschmitt]

Hey,
I tried to investigate some time to analyze this issue and found a possible fix. Would be great if some of you could test it. Once it works for you too, I will open a PR.
https://github.com/mxschmitt/create-react-app/commit/acc5ab13da20d777012f53578b76266d5521cff0
To test it, simply edit the following file: node_modules/react-dev-utils/WebpackDevServerUtils.js and add to line 327 to the return condition req.upgrade || like in the commit above.
Best regards
Max