react hot loader v3

https://github.com/peter-mouland/react-lego/compare/react-hot-loader

Restarting your app, including re-running the build process can really slow down development. With React Hot Loader you can make changes and see them instantly.

What's involved?

As you can see from the above link, the code additions are very little.

• Update the client-side rendering script
• Update build config (webpack/babel)
• Create router middleware

Update the client-side rendering script

We must now use detect if module.hot is set and re-render the app if it is using AppContainer container supplied by the react-hot-loader.

// client-render.js
import { AppContainer } from 'react-hot-loader';
const rootEl = document.getElementById('html');
export const App = (
  <AppContainer>
    <Root />
  </AppContainer>
);

ReactDOM.render(App, rootEl);
if (module.hot) {
  module.hot.accept('./app/Root', () => {
    const NextApp = require('./app/Root').default; // eslint-disable-line
    ReactDOM.render(
      <AppContainer>
        <NextApp />
      </AppContainer>,
      rootEl
    );
  });
}

Update build config

.babelrc needs to be updated to include plugins: ["react-hot-loader/babel"].

webpack.config.dev.js should then include its own hotModuleReplacement plugin as well as ensuring that the webpack entry points first pass through a couple of patches:

// webpack.config.dev.js
import webpack from 'webpack';
export default {
  entry: {
    app: [
      'react-hot-loader/patch',
      'webpack-hot-middleware/client',
      `client-entry.js`
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
  ]
  ...
}

### Create router middleware

The purpose of the middleware is to serve the new assets once the compiled section of files have been rebuilt. This middleware then needs to be served instead of your usual static assets.

hot-reload.js

// router.js

function getStaticAssets() {
  return (process.env.NODE_ENV === 'development')
    ? require('./middleware/hot-reload')
    : express.static(DIST, { maxAge: oneDay });
}
const routingApp = express();
routingApp.use(getStaticAssets())