Menu
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.
794
When Nodemon restarts the ExpressJS server on changes, Livereload recreates the server and sends to the browser a refresh command when connected liveReloadServer. refresh("/"); .
Add Start Script in pacakge. It's time to check how does nodemon is working in our app, open the terminal and start the app using the following command: nodemon server. js # [nodemon] 1.19. 1 # [nodemon] to restart at any time, enter `rs` # [nodemon] watching: *.
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.
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.
174
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>
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
