title: Webpack with Proxy - The development server has disconnected
body: <p>In my React app, I'm getting the following error about a minute after connection is established:</p>
  
  <pre><code>The development server has disconnected.
  Refresh the page if necessary.
  </code></pre>
  
  <p>If I refresh, it connects again, only to disconnect after a minute again.</p>
  
  <p>Webpack was installed via <code>create-reac-app</code>.</p>
  
  <p>This is my <code>package.json</code>:</p>
  
  <pre><code>{
    "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": [
        "&gt;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"
    }
  }
  </code></pre>
  
  <p>I use a <code>nginx</code> proxy reverse, with the following configuration:</p>
  
  <pre><code>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;
    }
  }
  </code></pre>
  
  <p>If I go to <code>http://localhost:3000/</code>, I don't face the issue, so it must be related to proxy.</p>
  
  <p><strong>Log</strong>:</p>
  
  <pre><code>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...
  </code></pre>
  
  <hr>
  
  <p>This is my <code>webpack.config.js</code> file:</p>
  
  <p><a href="https://pastebin.com/HF78WjLL" rel="nofollow noreferrer">https://pastebin.com/HF78WjLL</a></p>
  
  <hr>
  
  <p>EDIT: I have tried, based on the answer below, to add my network to <code>package.json</code>, like so:</p>
  
  <pre><code>"scripts": {
      "start": "HOST='0.0.0.0' react-scripts start",
      ...,
    }
  </code></pre>
  
  <p>But the same error persists, just like before: it connects and quickly disconnects.</p>
  
  <p>How should I fix this? </p>