Configure hot module reloading to work with react-universal-component
We will add configurations to our project to enable hot module reloading, so that our changes will update in the browser without a hard window refresh. We’ll need to add two packages to our project:
- react-hot-loader
- webpack-hot-middleware
Instructor: [00:00] We need to install a couple of specific modules for hot loading. Those are react-hot-loader and webpack-hot-middleware. Once those are installed, we can make changes to our codebase.
[00:16] On this server, I need to go ahead and import the webpack-hot-middleware. I'm going to add the middleware to be used right after webpack-dev-middleware and before hot-server-middleware. It'll take in one parameter, and that's going to be the client compiler.
[00:42] Next, we're going to jump over to the webpack-config on the client, so we need to add some things to our entry. The first one is going to be the webpack-hot-middleware/client, and we also want react-hot-loader/patch. We go down to our plugins, and we need to enable the HotModuleReplacementPlugin as well as set up the DefinePlugin.
[01:25] We want to set the NODE_ENV variable to development, and this will turn various various development features on in webpack and hot module reloading. Take a peek at the server config now. We just need to add a couple of plugins.
[01:49] We want to turn on an optimization called the LimitChunkCountPlugin. We're going to set maxChunks to one. This is going to enable the server-side code to run synchronously, because there's only going to be one chunk.
[02:10] Next, we actually just want to copy the DefinePlugin over on the server as well. We've got a change to make in our babelrc. We're going to use a feature in the babelrc called env, and it lets you set overrides for various environments.
[02:29] For our development environment, we want to override some plugins. We'd like to enable the react-hot-loader babel-plugin.
[02:45] Now, let's set up our actual client code. We want to import AppContainer from react-hot-loader lib AppContainer. Then, we want to wrap our app in the AppContainer. Any child of AppContainer is going to reload when a change occurs.
[03:10] Lastly, we want to look at the Node environment, and if we're in development, and if hot-module-reloading exists, then we want to accept any hot module changes to our components/appjs file, so anytime that file changes, or anything that that file imports, then, we want to go ahead and grab a fresh copy of App, don't grab the default, and we want to render that new app. If I did everything correctly, then we should see hot-module-reloading working.
[04:13] Open up our app. We'll change "Home" to "Bass" safe, and there you see I went to base live without refreshing. Same with if we change any other styles and save those, we see the styles update as well.
[04:31] This way I can change tabs, I can change...This is state. We're keeping the state. We should be able to change this without resetting back to home. If I change "Bar" to "Hello," I see a change in there as well.