WebSocketClient.js:16 WebSocket connection to 'ws://localhost:3000/ws' failed: React, Docker, NGINX

Question

Here's the issue... when I start a React app locally as npm start. I don't have a ws failed connection.

If I start NGINX and React servers within Docker containers I constantly get

WebSocketClient.js:16 WebSocket connection to 'ws://localhost:3000/ws' failed:

default.conf

upstream client {
    server client:3000;
}

upstream api {
    server api:5000;
}   

server {
    listen 80;
    
    location / {
        proxy_pass http://client;
    }
    
    location /ws {
        proxy_pass http://client;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }
    
    location /api {
        rewrite /api/(.*) /$1 break;
        proxy_pass http://api;
    }
}

Here's a video https://sendvid.com/r41axvub – hazartilirot Jan 05 '22 at 13:01 — hazartilirot, Jan 05 '22 at 13:01

score 19 · Answer 1 · edited Jan 07 '22 at 14:41

19

Add this to .env:

WDS_SOCKET_PORT=0

See this issue for more explanation and information: https://github.com/facebook/create-react-app/issues/11897

edited Jan 07 '22 at 14:41

Bohemian

412,405
93
575
722

answered Jan 07 '22 at 09:00

sarcouilleizi94

215
1
8

3

Thanks for your response. It doesn't appear in a deployment stage once a project is built. So it somehow relates to code changes in a development. It did the trick! – hazartilirot Jan 08 '22 at 07:59
I had the same issue when I was trying to fix my deployed app with docker. NGINX setup needed as well but eventually it worked for me! – Tivi Apr 26 '22 at 14:00

Sameep Sehgal · Answer 2 · 2022-06-06T04:46:45.780

1

I faced the same issue. One simple fix is to map the nginx instance to port 3000 on your local machine. Whereever you do post mapping for nginx change it to 3000:80. Now requests made to 'ws://localhost:3000/ws' by the react app will be appropiately routed.

edited Jun 06 '22 at 04:46

answered Jun 06 '22 at 04:45

Sameep Sehgal

11
2

score 0 · Answer 3 · answered Sep 17 '22 at 12:25

0

You could run https without docker and http with docker. So you should use wss and ws accordingly. This was my issue.

answered Sep 17 '22 at 12:25

Danil

701
8
7

score 0 · Answer 4 · answered Jan 27 '23 at 14:32

0

For me, at first adding this line to .env (as @sarcouilleizi94 mentioned) solved the problem

WDS_SOCKET_PORT=0

then (in the same project) unexpectedly it stopped working and I had to change it to:

WDS_SOCKET_PORT=3000

I hope this can help.

answered Jan 27 '23 at 14:32

supermodo

675
6
15

score 0 · Answer 5 · answered Jul 05 '23 at 22:43

For custom webpack(v5) config, adding the following settings to webpack.config.js worked for me

devServer: {
  client: {
    webSocketURL: 'auto://0.0.0.0:0/ws',
  }
}

Nginx configuration part:

location / {
    proxy_pass http://frontend;
    proxy_set_header HOST $host;
    proxy_set_header X-Forwarded-Host $http_host;

    proxy_set_header Upgrade $http_upgrade;
    proxy_http_version 1.1;
    proxy_set_header Connection "upgrade";
    proxy_read_timeout 86400;
}

WebSocketClient.js:16 WebSocket connection to 'ws://localhost:3000/ws' failed: React, Docker, NGINX

5 Answers5