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.
Thanks guys.
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
The recompiling process are pretty fast and can be served from a local dev server by either:
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)