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.
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.
Hot reloading allows you to see the changes that you have made in the code without reloading your entire app. Whenever you make any changes, all you need to do is save your code. As soon as you save your code, React Native tracks which files have changed since your last saved, and only reload those file for you.
React Hot Loader is a plugin that allows React components to be live reloaded without the loss of state. It works with Webpack and other bundlers that support both Hot Module Replacement (HMR) and Babel plugins.
Running non-Node code While Nodemon is running, we can manually restart our application. So instead of stopping and restarting Nodemon, we can just type rs and press enter, and Nodemon will restart the server or the running process for us.
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With