Node: Automatically refresh browser on file change

Question

I want my node app to automatically refresh my browser when a file changes (no external application).

I'd like to avoid using webpack dev server, as it doesn't allow me to use my own koa server, and is just generally a hassle to work with.

How can I automatically refresh my browser on file change?

try live reload, I like the extension pack for sublime, does that work for you? http://stackoverflow.com/questions/25886011/how-do-i-install-livereload-sublime-text-3 — pedrommuller, Feb 15 '16 at 22:26
@jack.the.ripper thanks, but ideally it'd be a package or vanilla code included within the application so that new developers could work on it with little-to-no setup. — Elegant.Scripting, Feb 15 '16 at 23:32

score 6 · Answer 1 · answered Feb 15 '16 at 22:45

6

Try use watchr:

koa-app.js:

/.../
var watchr = require('watchr');
watchr.watch({
    paths: [__dirname], listeners: {
        change: function() {
            // Emits an event to all connected clients 
            io.sockets.emit('browserReload');
        }
    }
})

client-side.js:

  /.../
  socket.on('browserReload', function () {
     // Reload without using cache
     document.location.reload(true);
  });

answered Feb 15 '16 at 22:45

stdob--

28,222
5
58
73

This looks great, but after implementing it the page won't load. What are the required packages for this? – Elegant.Scripting Feb 15 '16 at 23:17
Watchr stops the server from receiving and responding to requests. Odd. – Elegant.Scripting Feb 15 '16 at 23:32
@Elegant.Scripting Can you try `koa-socket` instead `socket.io`? [ https://github.com/mattstyles/koa-socket ] – stdob-- Feb 16 '16 at 00:07
Same issue. I think the problem is with `watchr`, not `socket.io`. – Elegant.Scripting Feb 16 '16 at 00:26
@Elegant.Scripting Can you update the question and share the solution? – stdob-- Mar 02 '16 at 21:55

score 3 · Accepted Answer · answered Feb 29 '16 at 23:52

So I figured it out.

It turns out koa-socket's API might work for some people, but it's generally a bunch of unneeded bloat. Also, watching the process is great, but if you already have node scripts doing that, it's redundant, and will break your code.

I ended up attaching socket.io to my Koa server with some pretty simple code:

server.js

var app = require('koa')();
var server = require('http').createServer(app.callback());
var io = require('socket.io')(server);
io.on('connection', function(){ /* … */ });
server.listen(3000);

This worked great. The next step was to connect to my Koa server on the client. That code was also really simple as well:

client.js

var socket = require("socket.io-client")("http://localhost:3000");

So now socket.io was working on my server, and the client could connect to it. My server, thanks to node packages and scripts (like supervisor/nodemon), was restarted on any file change.

The next step was simple: when a file changes, the server restarts, when the server restarts, emit a socket.io event to all clients that forces a page reload. The code looked like this:

server.js

var serverRestarted = true;

if (serverRestarted === true) {
    io.emit("browserReload");
    serverRestarted = false;
}

client.js

socket.on("browserReload", function() {
    document.location.reload(true);
});

And that was that. Sure, it was a pain working around packages that didn't work as intended or made undocumented changes to API's I was used to working with... so I didn't use them.

And I've ended up with something that works great during development.

Are you still using your custom solution or did you find a package? (Thanks for the question and self-answer.) — brillout, Nov 08 '17 at 09:26
@brillout.com I use Webpack, and separate the client from server entirely. Less headache. — Elegant.Scripting, Nov 08 '17 at 09:28
Same here but I have to use `webpack-dev-server` with the API instead of the CLI and the API has issues. IMO only the auto reload feature is useful. Seems to me that hot module replacement and displaying compile errors in the console are both overkill features. — brillout, Nov 08 '17 at 22:05

Node: Automatically refresh browser on file change

2 Answers2