Nodemon and/or Hot Reloading with a Node-React Web App
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
- hot-module-replacement - recompile changed module without full reload
- 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)