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.

Answer 1

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 eg), 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)

Answer 2

May be useful(slow a bit) To restart react server after changing with nodemon:::

after installing nodemon install kill-port:

 npm install kill-port

and edit this part in package.json

 "start": "kill-port 3000 && react-scripts start",

then start react just typing nodemon in terminal. Hope it was useful