title: Make webpack-dev-server to do hot reloading AND eliminate EMPTY response error in React
body: <p>I have been trying to make <code>React</code> app development easier by using reloading of the app when I modify the files and I tried <code>webpack-dev-server</code> for that (Please, see my previous thread: <a href="https://stackoverflow.com/questions/55345229/cant-set-up-webpack-dev-server-to-start-react-app">Can&#39;t set up webpack-dev-server to start React app</a>). I made hot reloading working but got an issue: timeouts started to occur on my requests and I see the empty response errors in console. There are threads that discuss the issue, e.g.: <a href="https://github.com/webpack/webpack-dev-server/issues/183" rel="nofollow noreferrer">https://github.com/webpack/webpack-dev-server/issues/183</a>
  but so far I could not make it working. Setting <code>--host 0.0.0.0</code> is not working, setting <code>--port 3000</code> eliminates empty response error but hot reloading is gone... Below is my <code>webpack</code> relevant config:</p>
  
  <pre><code>  devServer: {
      index: '',
      open: true,
      proxy: {
        context: () =&gt; true, // endpoints which you want to proxy
        target: 'http://localhost:3000' // your main server address
      }
    },
    entry: {
      app: ['babel-polyfill', './views/index.js']
      //vendor: ["react","react-dom"]
    },
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, './public')
    },
    devtool: "#eval-source-map",
  ... 
  </code></pre>
  
  <p>I am starting the app by running <code>npm run dev</code>, here is a part of the <code>package.json</code>:</p>
  
  <pre><code>"scripts": {
      "client": "webpack-dev-server --mode development --devtool inline-source-map --port 3000 --content-base public --hot",
      "server": "node ./bin/www",
      "dev": "concurrently \"npm run server\" \"npm run client\"",
    },
  </code></pre>
  
  <p>So, above if we remove <code>--port 3000</code> hot reloading on the front end part starts working, but then the timeout is happening. Also, upon modification of the server side code the app is not reloaded unfortunately and I am not sure how to add this feature too. I am using <code>react-hot-loader</code>:</p>
  
  <pre><code>import React from 'react';
  import ControlledTabs from './ControlledTabs'
  import { hot } from 'react-hot-loader/root'
  
  class App extends React.Component {
    render() {
      return (
          &lt;ControlledTabs/&gt;
      );
    }
  }
  
  module.exports = hot(App);
  </code></pre>
  
  <p>I think it should be related to the <code>devServer</code> configs most probably and how the <code>webpack-dev-server</code> is started. I just want to find a <code>WORKING</code> way of doing hot reloading instead of falling back into <code>build</code> - <code>run</code> cycle that is annoying and inefficient. </p>
  
  <p>Also, it is really hard to say, what is going wrong, whether <code>--port 3000</code> is really the issue. I noticed that the <code>webpack-dev-server</code> is somehow working in a very unpredictable way on my project meaning that after doing changes and launching the app I see one result, but then I restart <code>webpack-dev-server</code> and see a different result as if <code>webpack-dev-server</code> is doing something behind the scenes what it wants to and whenever it wants to without notifying me about that.</p>
  
  <blockquote>
    <p>Update</p>
  </blockquote>
  
  <p>I changed <code>webpack.config.js</code> to:  </p>
  
  <pre><code>watch: true,
    devServer: {
      index: '',
      open: true,
      proxy: {
        context: () =&gt; true, // endpoints which you want to proxy
        target: 'http://localhost:3000' // your main server address
      }
    },
    entry: {
      app: ['babel-polyfill', './views/index.js']
      //vendor: ["react","react-dom"]
    },
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, './public')
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
    ],
  </code></pre>
  
  <p>And removed <code>react-hot-loader</code> from the <code>React</code> entry point:</p>
  
  <pre><code>import React from 'react';
  import ControlledTabs from './ControlledTabs'
  
  class App extends React.Component {
    render() {
      return (
          &lt;ControlledTabs/&gt;
      );
    }
  }
  
  module.exports = App;
  </code></pre>
  
  <p>Because otherwise it was giving me a syntax error in console, <code>webpack</code> could not start. After doing that if I modify any react file, whole webpage is reloaded it seems and the <code>net::ERR_EMPTY_RESPONSE</code> remains...</p>