Nodemon not refreshing browser in React-Express-Node App

Question

I have installed nodemon locally in my workspace, but even though it restarts in the terminal after changes are made, it does not refresh the browser page. I have to manually refresh it each time.

I've got Express, Node, React and Webpack running in the environment.

This is how my setup looks like -

My package.json starts up server.js -

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon server.js"
  },

and server.js is -

var express = require('express');


     var app = express();
        app.use(express.static('public'));
        app.listen(3000, function () {
            console.log("Express server is up on port 3000");
        });

The entry point in the webpack config file is -

module.exports = {
    entry: './public/scripts/app.jsx',
    output: {
        path: __dirname,
        filename: './public/scripts/bundle.js'
    }

What should I do to fix it?

Update -

I made a video to describe the situation, if it helps.

For those needing to use nodemon and reload browser on change as well, I replied here https://stackoverflow.com/a/51089425/7779953 Solution is Nodemon + Browser Sync + Gulp + Express server — Alonad, Jun 28 '18 at 18:51

score 23 · Answer 1 · answered Apr 01 '17 at 05:28

23

nodemon is only for restarting the server when your server code changes. It has no functionality to reload your page in the browser. If you want automatic browser reload, you could, for example, run a webpack dev server in addition to your nodemon. webpack dev server is able reload the page in the browser when your client code changes, it can even update the page in the browser without a full page reload, if you use its hot module reloading feature.

answered Apr 01 '17 at 05:28

Patrick Hund

19,163
11
66
95

1

Do you have an example of how to do this? – chovy May 21 '18 at 01:43
i have server side rendering in my app. as soon as my react code changes, the browser will refresh the page, but the problem is with the serve side rendered html. it still remains the same, until i terminated the server – jsDevia May 22 '18 at 05:51
I run webpack in watch mode for both the server and the client to prevent this – Patrick Hund May 22 '18 at 06:24

score 6 · Answer 2 · answered Nov 21 '17 at 01:29

6

in package.json

"scripts": {
   "start": "nodemon server.js -e html,js,css"
},

in server js

var reload = require('reload')

app.listen(3000, () => {

  console.log(`Listening on port 3000`);
})

reload(app);

in index.html

<body>
  <h1>ron</h1>
  <script src="/reload/reload.js"></script> <!-- it's necessary -->
</body>

answered Nov 21 '17 at 01:29

ron

399
3
7

1

Here's the link to the reload package on npm: https://www.npmjs.com/package/reload – Gabrien Dec 10 '21 at 22:14
1

This `express` example with `reload` is more intuitive than the [docs on github](https://github.com/alallier/reload). – Timo Dec 27 '21 at 10:27

Nodemon not refreshing browser in React-Express-Node App

2 Answers2

Linked