I am getting this error:
WebSocketClient.js:13 WebSocket connection to ‘wss://domain:3000/ws’ failed:
However, I have not set up the Websocket, it was outomatically added with create-react-app. I have read somewhere that it is Hot Reload and should disappear in production build. But after I build the project (and start it with npm start from build folder ) in production server I still get the Websocket active and it gives me the error. (To add I have checked all the installed modules this websocket comes with Webpack and no other module)local websocket request
My nginx config:
server {
listen 80;
listen [::]:80;
server_name domain.com www.domain.com;
location / {
proxy_pass http://127.0.0.1:3000;
}
location /api/ {
proxy_pass http://127.0.0.1:9999;
}
location /ws {
proxy_pass http://127.0.0.1:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
}
location /wss {
proxy_pass http://127.0.0.1:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
}
}
I did add location ws /
and location wss /
in my nginx config file. And I did try to add WDS_SOCKET_PORT= 0
or WDS_SOCKET_PORT = 3000
(my front end host) Nothing worked. I’m stuck here and dont know how to get rid of this.
2
Answers
So how it was fixed. After deploying the code and including WDS_SOCKET_PORT= 0 in the .env file I have waited for couple of hours and checked the site -- the error was gone and havent appeared again. But the reason why hot reload is even included in the prod build is still uncertain. P.s the result didnt appear immediately
After you have built the project with
npm run build
, you need to run the output build file,index.html
, as a server that serves html.You could do this with something like the "Live Server" extension on VSCode, or by running a command like
npx http-serve
in your build folder.