Webpack with Proxy - The development server has disconnected - reactjs

Question

In my React app, I'm getting the following error about a minute after connection is established:
The development server has disconnected.
Refresh the page if necessary.
If I refresh, it connects again, only to disconnect after a minute again.
Webpack was installed via create-reac-app.
This is my package.json:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-alert": "^5.5.0",
"react-dom": "^16.8.6",
"react-hot-loader": "^4.5.3",
"react-html-parser": "^2.0.2",
"react-player": "^1.13.0",
"react-router-dom": "^5.0.0",
"react-scripts": "^3.3.0",
"react-transition-group": "^4.3.0",
"spotify-web-api-js": "^1.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.11.2"
}
}
I use a nginx proxy reverse, with the following configuration:
server {
listen 80;
location / {
proxy_pass http://client:3000;
proxy_redirect default;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
}
location /users {
proxy_pass http://web:5000;
proxy_redirect default;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
}
}
If I go to http://localhost:3000/, I don't face the issue, so it must be related to proxy.
Log:
client_1 ℹ ｢wds｣: Project is running at http://171.13.0.12/
client_1 ℹ ｢wds｣: webpack output is served from /
client_1 ℹ ｢wds｣: Content not from webpack is served from /usr/src/app/public
client_1 ℹ ｢wds｣: 404s will fallback to /index.html
Starting the development server...
This is my webpack.config.js file:
https://pastebin.com/HF78WjLL
EDIT: I have tried, based on the answer below, to add my network to package.json, like so:
"scripts": {
"start": "HOST='0.0.0.0' react-scripts start",
...,
}
But the same error persists, just like before: it connects and quickly disconnects.
How should I fix this?

Answer 1

Well, react-scripts 3.3.0 working with proxy was the problem, indeed.
According to the recent issue: https://github.com/facebook/create-react-app/issues/8203,
This is related to nginx's default proxy_read_timeout 60s rule. It seems that prior react-scripts versions would reload the websocket connection when it timed out after 60s.
So, adding the following lines to nginx's dev.conf, like so:
location / {
proxy_pass http://client:3000;
proxy_redirect default;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Host $server_name;
# the following two timeout rules fix CRA WDS disconnects after 60s
proxy_read_timeout 86400s;
proxy_send_timeout 86400s;
}
solved the problem.

Answer 2

The webpack dev server runs on localhost by default. Localhost is only accessible from within the container. To allow it to be accessible from the host, (i.e. outside of the container), you need to make webpack serve the bundles on a publicly reachable address, 0.0.0.0.
Add this to your config:
const config = {
...,
devServer: {
contentBase: './dist',
port: process.env.PORT || 3000,
host: '0.0.0.0'
}
...,
}
module.exports = config