CODEWITHSUNDEEP
reactjsnginxnpmwebpackdocker-compose
8-Bit Borges
8-Bit Borges

Reputation: 10033

Webpack with Proxy - The development server has disconnected

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?

Upvotes: 0

Views: 4321

Answers (2)

8-Bit Borges
8-Bit Borges

Reputation: 10033

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.

Upvotes: 2

agconti
agconti

Reputation: 18093

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

Upvotes: 0

Related Questions