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?

Solution 1

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.

Solution 2

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);
  });

Comments

[Elegant.Scripting]

This looks great, but after implementing it the page won't load. What are the required packages for this?

[Elegant.Scripting]

Watchr stops the server from receiving and responding to requests. Odd.

[stdob--]

@Elegant.Scripting Can you try koa-socket instead socket.io? [ github.com/mattstyles/koa-socket ]

[Elegant.Scripting]

Same issue. I think the problem is with watchr, not socket.io.

[stdob--]

@Elegant.Scripting Can you update the question and share the solution?

[brillout]

Are you still using your custom solution or did you find a package? (Thanks for the question and self-answer.)

[Elegant.Scripting]

@brillout.com I use Webpack, and separate the client from server entirely. Less headache.

[brillout]

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.