WebSockets in Create React App with Webpack proxy

Question

I created my React app using Create React App in version 3.1.2 (19 Sept 2019). I was trying to configure proxy for Web Socket requests, but it seems that when I am using the proxy, the connection is not established. I have used THIS example to set up my things. The server is Asp.Net Core as in example and it works as long as it has the address wired into the initalization. This snippet works:

const hubConnection = new HubConnectionBuilder()
  .withUrl("https://localhost:44392/chatHub")
  .build();

And this doesn't:

const hubConnection = new HubConnectionBuilder()
  .withUrl("chatHub")
  .build();

With this:

{
  "proxy": "https://localhost:44392/",
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@microsoft/signalr": "^3.0.0",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "3.1.2"
  },
(...)

I saw a suggestion HERE that I might use an object in proxy setup, but when I tried I got an error that proxy address has to be a single string, not an object:

 proxy: {
      '^/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '^/foo': {
        target: '<other_url>'
      }

Doesn't help. Connection is blocked on pending status. If you try to send a message, you get "Error: Cannot send data if the connection is not in the 'Connected' State.". — Michał J. Gąsior
– Michał J. Gąsior, Commented Sep 25, 2019 at 5:35

khelkun · Accepted Answer · 2021-04-20 10:45:10Z

15

For me, proxying a specific route under /api as a websocket route didn't worked with the previously suggested src\setupProxy.jsconfigurations.

But this works:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
    app.use(
        createProxyMiddleware('/api',{
            target: 'http://localhost:9800',
            changeOrigin: true,
        })
    );

    app.use(
        createProxyMiddleware('/api/notification/register', {
            target: 'ws://localhost:9800',
            ws: true,
            changeOrigin: true,
        })
    );
};

And this actually produce a meaningful HPM output:

[HPM] Proxy created: /api  -> http://localhost:9800
[HPM] Proxy created: /api/notification/register  -> ws://localhost:9800

answered Apr 20, 2021 at 10:45

khelkun

1971 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

taksan Over a year ago

This is the answer that finally worked for me for Websockets. . Even the accepted answer didn't. Thank you

nullromo Over a year ago

Make sure to restart the dev server after changing setupProxy.js! :-)

neeko · Accepted Answer · 2020-04-13 14:24:11Z

6

Reposting a solution I posted here: https://github.com/facebook/create-react-app/issues/5280

I had a problem where I couldn't proxy requests (in development) to my own websocket (socket-io) server.

I followed the steps here: create-react-app proxying requests in dev, my setupProxy.js looked like this:

The below did not work for proxying a websocket connection:

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5011',
    }),
  );
  app.use(
    '/socket-io',
    createProxyMiddleware({
      target: 'http://localhost:5011',
      ws: true,
    }),
  );
};

However, the hot reloading wouldn't work because somehow this interfered with webpack dev servers websocket connection. I would see this error in the console:

[HPM] Error occurred while trying to proxy request /sockjs-node from localhost:3000 to http://localhost:5011 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)

I got this working by doing the following:

const isDev = process.env.NODE_ENV === 'development';

const socket = isDev 
? io.connect('http://localhost:5011', { path: '/socket-io' }) 
: io.connect({ path: '/socket-io' });

Hope this helps someone out! Let me know if there's a better way to do this 👍

answered Apr 13, 2020 at 14:24

neeko

2,0008 gold badges47 silver badges71 bronze badges

5 Comments

Idan Gozlan Over a year ago

Not a perfect solution for those who want to use cookies attached to the same domain..

nlips Over a year ago

@neeko I don't understand where the code about "I got this working by doing the following:" is written ?

neeko Over a year ago

@nlips this is where I defined my websocket connection

nlips Over a year ago

@neeko so you don't really proxy the query

emagdne Over a year ago

I had a very similar problem to yours. Wrapping both the path and the target inside createProxyMiddleware fixed it for me.

Alexandre · Accepted Answer · 2020-02-01 21:32:09Z

3

After searching a bit, I finally found a solution https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

First, install http-proxy-middleware. Next, create src/setupProxy.js and place the following contents in it:

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    proxy({
        target: '<url>',
        ws: true,
        changeOrigin: true
    })
  );
  app.use(
    '/foo',
    proxy({
        target: '<other_url>'
    })
  );
};

answered Feb 1, 2020 at 21:32

Alexandre

3,2005 gold badges41 silver badges56 bronze badges

Collectives™ on Stack Overflow

WebSockets in Create React App with Webpack proxy

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related