18

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.

orpheus
  • 1,060
  • 2
  • 15
  • 23
  • have a look at `react-scripts`, it includes webpack configs to hotswap and recompile as needed. it also features a proxy – Adam W Sep 07 '17 at 01:02

2 Answers2

31

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)

Allen
  • 4,431
  • 2
  • 27
  • 39
  • 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? – orpheus Sep 07 '17 at 05:12
  • I don't think you need `webpack-hot-middleware`, `react-hot-loader` targets your problem. – Allen Sep 07 '17 at 05:17
  • 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. – Allen Sep 07 '17 at 05:20
  • 2
    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? – orpheus Oct 11 '17 at 04:19
  • 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. – Allen Oct 11 '17 at 12:46
  • 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? – Woodchuck May 02 '19 at 20:29
  • @Xlee according to one of the core developers, `react-hot-loader` *does* need `webpack-hot-middleware`, see https://github.com/gaearon/react-hot-loader/issues/489#issuecomment-399819317 and https://github.com/gaearon/react-hot-loader/issues/489#issuecomment-346899394 – ford04 Jul 11 '19 at 07:52
0

May be useful(but slow a bit)

To restart react server after change in code 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

user13067213
  • 31
  • 3