Nodemon and/or Hot Reloading with a Node-React Web App

Question

I'm still pretty new when it comes to configuring a web app with webpack to create an optimal dev experience. I've taken two different Node-React courses: one where we used nodemon for tracking changes and another where we implemented hot reloading.

When it comes to these two dependencies, is it a one or the other? Should they be used together, or would it be sort of redundant?

Also, if I'm using an express server with React on the client side, do I use react-hot-loader, webpack-hot-middleware, or both? I've become confused on which approach to take with hot reloading as it seems that are many ways to do it.

Also, when I use nodemon as a wrapper (nodemon --exec babel-node server.js) my hot module reloading doesn't work, but I still find myself in want of a way to easily restart the server.

Thank you.

Solution

De-sugar the fancy terminologies, they're basically doing the same thing - "keep an eye (watch) on your local edits (file system changes) and updates the app for you", thus they're all dev tools intended to facilitate/speedup your dev process.(NOT for production)

Nodemon is in charge of your server-side (Express) while Webpack (watch mode) on the client-side (React).

Without too much magic, Nodemon simply restarts/reloads your express server when file changes, otherwise you need to kill & restart manually.

However, Webpack (with watch mode enabled, typically in a dev cycle) is a bit more complex, it watches your client side code change, but with the help of

1. hot-module-replacement - recompile changed module without full reload
2. webpack-dev-middleware - serve the results through connected server

The recompiling process are pretty fast and can be served from a local dev server by either:

• webpack-dev-server serving changed modules and live reloading (connect to browser and hard refresh the page)
• webpack-dev-middleware + Express/Koa server, can do the same but you get more control like serving static files or creating some api routes.

Even though live reloading is cool, since hard refresh of the page causes app to lose all client side state (break many dev tools, redux dev tool e.g), react-hot-loader comes to rescue in this case.

In general, based on your Express + React app, i would set up Nodemon for Express. For React, if you want a standalone dev server works out of box, choose webpack-dev-server + react-hot-loader, or you want an integration of dev server on top of your existing Express server and a bit customization, use webpack-dev-middleware + react-hot-loader instead. (HMR needs to be added as webpack plugin anyway)

Comments

[orpheus]

So I while nodemon only watches the server side, webpack watches server and client side? So with an express server, I would use webpack and webpack-dev-middleware with webpack-hot-middleware AND react-hot-loader for hot reloads on client side? So essentially, I don't need nodemon, but just webpack-hot-middleware and react-hot-loader with webpack-dev-middleware?

[lxyyz]

I don't think you need webpack-hot-middleware, react-hot-loader targets your problem.

[lxyyz]

And honestly, there's no constraints on what to watch, it's more like nodemon suppose to be configured to watch server side code changes, while webpack in dev mode should be configured to watch client side code. Basically, the development cycle for server and client could be standalone.

[orpheus]

If I use nodemon as a wrapper when I start my server, hot reloading doesn't work, but when I start my server without nodemon, hmr works fine. Do you know why this can be? Could it have something to do with server render?

[lxyyz]

I would like more information, nodemon basically doesn't affect any server behavior besides auto reload it, it coexist s well with HMR in my project s, server render should not have any to do with it.

[Woodchuck]

How does a script running webpack watch mode differ from a script running webpack-dev-server? Does the former depend on you having your own web server already running?

[ford04]

@Xlee according to one of the core developers, react-hot-loader does need webpack-hot-middleware, see github.com/gaearon/react-hot-loader/issues/… and github.com/gaearon/react-hot-loader/issues/…