Make HMR work properly

[thomaseizinger]

Getting Hot Module Reloading to work is a very tricky part.
This issue is an effort to document my already gained knowledge about this topic and should track necessary steps in order to make this fully working.

Useful links / documentation:
webpack-contrib/extract-text-webpack-plugin#30
https://medium.com/@rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96

Hot Reloading of styles:
This is a more or less easy one. In order for styles to be hot-reloaded, we have to use a loader that supports that like styles-loader.
Without any further configuration, the css is contained in the JS bundle. This is necessary for the hot-reloading of styles to work anyway. It is not(!) possible to hot-reload styles that have been extracted to a separate file. In our production configuration, we use the extract-text-webpack-plugin which creates such a dedicated file. In order to make hot-reloading for styles work, we therefore must not apply this plugin in our development environment.

Hot Reloading of JavaScript:
In general, hot reloading is not that hard. At the most outer level, you need a piece of code that somehow looks like this:

if (module.hot) {
  module.hot.accept(undefined, () => {
      let NextAppContainer = require("./containers/AppContainer").default;
      render(NextAppContainer)
    }
  )
}

What this does is listen for the HMR runtime to trigger the accept function in order to notify the running application that a piece of code has changed. After that, we re-require the outer most component and make a new call to render. This works as long as you don't use routes in your application. Valuable information concerning that can be found in this issue: gaearon/react-hot-loader#249
IF the application uses routes, your only choice (AFAIK) is to supply a random key to the <Router /> element which makes it drop its state all the time and re-render. However, this, at least in our application, also re-initializes the whole state and the app behaves as with a page reload. However, I have read somewhere that upgrading to React-Router 4 opens new opportunities concerning hot-reloading.

Up to now, all of this is achieved through #36.

Further tasks:

• Upgrade to React-Router 4
• Find a way to enable HMR without loosing local state

[thomaseizinger]

Closing this issue for now, we can still use it to track information about HMR though.