DEV Community

Automatically refresh the browser on Node / Express server changes 🚀

CΓ‘ssio Lacerda on June 08, 2021

One of the first things that most developers learn when starting with ExpressJS is using Express Generator to create a basic app structure. After i...
Collapse
 
ali_dot_ali profile image
Ali Ali

I did the same but its not reloading my files. I am using ejs.
//Newbie

Collapse
 
emasuriano profile image
Ema Suriano

Most probably is because by default nodemon watch for .js, .mjs, .coffee, .litcoffee, .json extensions. Therefore you can send the flag of -e ejs to the command of watch to make it watch your files :)

Collapse
 
faridanthony profile image
Fred Anthony

"From now on, run the server with npm run watch instead of npm start."

Collapse
 
sadkodev profile image
sadko

Config package.json thus. "dev": "nodemon --ext * ' js,html,ejs,css,scss" app.js"

Great...

Collapse
 
rdavis0 profile image
Ryan Davis

@cassiolacerda thanks for the guide! It worked great for me. Is there a way to make livereload run only in my development environment? Right now if I try to deploy to production with liveserver changes in my app.js, it breaks everything.

Collapse
 
steveblue profile image
Stephen Belovarich • Edited

You need to have a concept of environments. Typically process.env.NODE_ENV is used. After you have a environment declared, conditionally set the middleware.

const env = process.env.NODE_ENV || "development";

if (env === "development") {
  app.use(connectLiveReload());
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
iway1 profile image
iway1 • Edited

Eliminating repetitive actions during development helps to optimize our performance as developers.

Great quote! Even if something only takes a few seconds, automating it can save us hours and hours in the long run. As I've improved as a software developer, the more and more I prioritize these types of things

Collapse
 
denelvis profile image
denelvis • Edited

Hello. Can you help?
Why when I did some changes page on localhost:port/users or any other endpoint nodemon don't reload this page?

Working only on root.

Collapse
 
cassiolacerda profile image
CΓ‘ssio Lacerda • Edited

Hello, guy!

Livereload works only with rendered HTML pages. It needs to inject a script tag that points to the server created by Livereload on port 35729 (see in the last section).

The endpoint /users encountered in the repo send data to client-side with res.send method, where data type generated by that is application/json. In home endpoint /, the application uses res.render to outputs text/html data, so it works here, and not in /users.

Collapse
 
denelvis profile image
denelvis

Thanks.

Collapse
 
steveblue profile image
Stephen Belovarich

This works for me although live reload is kinda slow compared to HMR in other build tools.

Collapse
 
gilenomasc profile image
gilenomasc

Worked like a charm for me. Thank you!

Collapse
 
steveblue profile image
Stephen Belovarich

This works for me although live reload is kinda slow.

Collapse
 
aklougbo profile image
aklougbo • Edited

How this can be used with NodeJs using the HTTP module to create the webserver and not EXPRESSJS

Collapse
 
hohogpb profile image
bh

good

Collapse
 
royalvictor profile image
Royal VICTOR

Thank you very much for that ! I was looking for something like that since few months !

Collapse
 
dan_kinsella_83911e371adb profile image
Dan Kinsella

bin file issues that deem this not working for me

Collapse
 
kohjean profile image
kohjean

Hi. I had a problem with bin and it didn't work like you.
This worked fine. bytearcher.com/articles/refresh-ch...
I wish you wellπŸ™