Nodemon not refreshing browser in React-Express-Node App

问题

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.

回答1:

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.

回答2:

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

回答3:

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>

来源：https://stackoverflow.com/questions/43152968/nodemon-not-refreshing-browser-in-react-express-node-app

标签

javascript

reactjs

Webpack

nodemon