« Previous Tutorial Next Tutorial »

We’re back at it. We’ve got our Webpack config all set up, but we still need to make a few more changes to get hot-reloading working. First, head back to Sublime and open /views/index.ejs – we need to change our javascript reference! Find the following line:

<script src="/javascripts/build.js"></script>

and change it to this:

<script src="http://localhost:8080/javascripts/build.js"></script>

This is just telling our React app to load from our new Webpack development server instead of from a static file. Later, when we get to deploying this application, we’ll want to go back to the static file, and we’ll need to set up a way to switch between the two based on production environment … but we’ll get to that.

Now we need to inform our React app itself that we’ve enabled hot reloading. Open up /src/index.jsx. We’re going to make some changes. We need to add an AppContainer component which is created by the React hot-loader, and then use it to wrap our application. Start by finding line 2:

import { render } from 'react-dom';

and just below it add a new line:

import { AppContainer } from 'react-hot-loader';

You’ll see an eslint error here because we’re not using AppCotainer yet, but incidentally, that’s the line that eslint would’ve also complained about if we hadn’t added a rule exception in the previous tutorial.

Now we’re going to replace our render block with a function, because we’re going to need to call it twice. Let’s write our function first, so we can compare it to the existing render block. Head to the bottom of the file, and add the following:

const renderApp = (Component) => {
  render(
    <AppContainer>
      <Component headline="Test Headline" count={1234} showCount />
    </AppContainer>,
    document.querySelector('#react-app'),
  );
};

As you can see, this really isn’t so different from the existing render block, it’s just creating a function called renderApp which takes a parameter called Component (which needs to be a React component). It then sticks that component into the AppContainer component we imported up above.

All right, you can delete this entire render block:

render(
  <TestComponent headline="Test Headline" count={1234} showCount />,
  document.querySelector('#react-app'),
);

since we won’t be needing it anymore. However, you may note that while we created a renderApp function, we didn’t actually … render the app. So below the function, go ahead and call it, like this:

renderApp(TestComponent);

That’s great, but we still need more. We need to check and see if hot reloading is enabled in our webpack build, and then reinitialize our top-level component if it is. We do this by adding the following lines to the end of the file:

if (module && module.hot) {
  module.hot.accept('./testcomponent', () => {
    renderApp(TestComponent);
  });
}

The module we’re looking for is provided by Webpack while bundling. You might be wondering why we’re calling the same function twice, which generally seems like bad policy. However in this case, there’s a good reason: the page won’t render for the first time if we only use the if block we just wrote. We’d have to make a change and save it to see anything except “Loading …” and that’s no good. So, we run the function once to initialize our component, and then call it again any time a change happens, in order to reinitialize that component, which allows the hot-reloader to show changes without a full page refresh. Nifty!

The last thing we need to do is create a script to run our Webpack dev server. Open package.json, and just below line 6, add the following:

    "start-w": "webpack-dev-server",

Save the file, and we should be good to go. I’m curious to see if this is going to work, or if I accidentally had you do something horribly wrong. Let’s restart our node server if it’s already running (or start it, if it’s not). Then, in a different terminal window or command prompt, cd to your musiclist directory and type the following:

yarn run start-w

There we go! We should now be able to refresh localhost:3000 and see … well, the same thing we were already seeing, though if you open your console, you’ll see some notices about Hot Module Replacement. That’s a good sign. So now, let’s make a change and see if it reloads. Head over to /src/index.js and let’s change one of our props. Specifically, change the count from 1234, to 5678, and save your file. Switch back to your browser, and there you go! Automatic rebuilding and hot reloading in action. This is going to make our life a whole lot easier.

In the next tutorial, we’ll be moving away from test components, setting up our React directories, and establishing our basic application frame. Catch you then!

« Previous Tutorial Next Tutorial »