React hot loading setup- Self Note Series

After I have setup webpacks to manage all my assets. Now is the time for me to gear things up. At the moment, each time I make any change to the code, I need to refresh the web browser in order to see the change in action. This is particularly annoying when I am at a very intense stage of the development, so a feature called hot loading is the answer. Today, I will walkthrough how to setup this feature.

Step 1

Since I am using express for my server management, I will use a middleware to implement the hot loading feature. Next I need to setup several options for the existing dev middleware

#server/index.js
##new codes
import webpackHotMiddleware from 'webpack-hot-middleware';
const compiler = webpack(webpackConfig);
app.use(webpackHotMiddleware(compiler));
##modified codes
app.use(webpackMiddleware(compiler, {
 hot: true,
 publicPath: webpackConfig.output.publicPath,
 noInfo: true
}));

Since I need to apply webPackConfig in several places, I will just assign it to a constant and use it.

Step 2

I will aslo need to modify the webpack config file like below

#webpack.config.dev.js
##new import
import webpack from 'webpack';
##in entry:
entry: [
  'react-hot-loader/patch',
  'webpack-hot-middleware/client',
 ],
##in output
output: {
  publicPath: '/'
 },
##add plugin
plugins: [
  new webpack.NoEmitOnErrorsPlugin(),
  new webpack.optimize.OccurrenceOrderPlugin(),
  new webpack.HotModuleReplacementPlugin()
 ],

I will also need to setup react to reload itself when necessary so I will also need to modified the babelrc file

#.babelrc
"plugins": ["react-hot-loader/babel"]

Step 3

Before it could work properly, the component App which I rendered to the div called app need to be wrap with a container. Below is the codes

#client/index.js
import React, { Component } from 'react';
import {render} from 'react-dom';
import App from './components/App';
import {AppContainer} from 'react-hot-loader';
render(
      <AppContainer>
        <App />
      </AppContainer>,
      document.getElementById('app')
    );
if (module.hot) {
  module.hot.accept('./components/App', () => {
    const App = require('./components/App').default;
    render(
      <AppContainer>
        <App />
      </AppContainer>,
      document.getElementById('app')
    );
  });
}

Step 4

I will need to install all the required modules.

#terminal
npm install --save-dev react-hot-loader@next webpack-hot-middleware

Finally, I can now run the server and whenever I make a change to a component the browser will auto reload update the content.

Cheers, see ya again on the next post

Github resource

notes: There are probably many ways to implement this feature and and this is how I find the easiest way for me to implement this. Anybody is free to give a comment for any mistakes or improvement that I can apply. This guide is initially for my own self to learn and remember about what I have done, nonetheless anybody is welcome to follow this guide if you find it is very helpful.