skip to Main Content

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;
    }
}

4

Answers


  1. 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

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
  3. You could run https without docker and http with docker.
    So you should use wss and ws accordingly.
    This was my issue.

    Login or Signup to reply.
  4. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search