dai-shi / easy-livereload

Express middleware to use livereload2 easily (both server and client)

easy-livereload

This is yet another library to use livereload very easily for express/node.js-based development. It is express middleware which provides both a livereload server and a javascript client. It is designed to be used with node-dev so that restarting a server process is also possible.

The major features of this library include:

• using livereload (PROTOCOL 7) server code from the original author,
• using livereload.js client code from the original author,
• using fs.watch() to check file changes instantly,
• allowing to automatically restart server code (if invoked with node-dev), and
• all-in-one package to enable with at least one-line code.

Install

npm install easy-livereload node-dev

Usage

Minimal configuration:

app.use(require('easy-livereload')());

Typical configuration:

var path = require('path');
var express = require('express');
var app = express();

if (app.get('env') === 'development') {
  var livereload = require('easy-livereload');
  var file_type_map = {
    jade: 'html', // `index.jade` maps to `index.html`
    styl: 'css', // `styles/site.styl` maps to `styles/site.css`
    scss: 'css', // `styles/site.scss` maps to `styles/site.css`
    sass: 'css', // `styles/site.scss` maps to `styles/site.css`
    less: 'css' // `styles/site.scss` maps to `styles/site.css`
    // add the file type being edited and what you want it to be mapped to.
  };
  
  // store the generated regex of the object keys
  var file_type_regex = new RegExp('\\.(' + Object.keys(file_type_map).join('|') + ')$');
  
  app.use(livereload({
    watchDirs: [
      path.join(__dirname, 'public'),
      path.join(__dirname, 'app')
    ],
    checkFunc: function(file) {
      return file_type_regex.test(file);
    },
    renameFunc: function(file) {
      // remap extention of the file path to one of the extentions in `file_type_map`
      return file.replace(file_type_regex, function(extention) {
        return '.' + file_type_map[extention.slice(1)];
      });
    },
    port: process.env.LIVERELOAD_PORT || 35729
  }));
}

By default this script tries to load the live reload script itself, but if that doesn't work for some reason then you can put your app into the easy-livereload options. This will add a local variable to your app under app.locals.LRScript.

var express = require('express');
var app = express();
var livereload = require('easy-livereload');

if (app.get('env') === 'development') {
  app.use(livereload({
    app: app
  }));
}

doctype html
html(lang="en")
  head
    title Livereload
    
    != LRScript //- loads the livereload script

Example scripts entry in package.json:

"scripts": {
  "start": "NODE_ENV=production node app.js",
  "start-dev": "NODE_ENV=development node-dev app.js"
}

easy-livereload's Issues

Crashes when "Content-Type" is missing?

TypeError: Cannot read property 'match' of undefined
at Object.accept (/app/node_modules/easy-livereload/index.js:131:43)

support for node-sass-middleware

Can this package be configured to work with node-sass-middleware, so that any saved sass changes can reload the browser? If so, is there any kind of documentation we can look into?

Support reload on the server restart

When loading with the SSR when server restarts the browser is not reloading.

EventEmitter deprecated

This module does not seem to work with latest node (v8.4) since the EventEmitter was deprecated.

Error:

[...]\node_modules\websocket.io\lib\socket.js:49
Socket.prototype.__proto__ = EventEmitter.prototype;
                                         ^
                                         
TypeError: Cannot read property 'prototype' of undefined
    at Object.<anonymous> ([...]\node_modules\websocket.io\lib\socket.js:49:42)
    at Module._compile (module.js:573:30)
    at Object.Module._extensions..js (module.js:584:10)
    at Module.load (module.js:507:32)
    at tryModuleLoad (module.js:470:12)
    at Function.Module._load (module.js:462:3)
    at Module.require (module.js:517:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> ([...]\node_modules\websocket.io\lib\protocols\drafts.js:12:14)
    at Module._compile (module.js:573:30)

References

• LearnBoost/websocket.io#55

EMFILE error when using fs.watch on many items

I am using your module and i am getting error because i have too many files to watch.

app.use(require('easy-livereload')({
watchDirs: [
path.join(__dirname, 'public')
],
checkFunc: function(file) {
return /.(css|js|jade)$/.test(file);
},
port: process.env.LIVERELOAD_PORT || 35729
}));

Infinite livereload

My application has a loop reloading, using this package, when testing on mobile (lan, remote device, via local ip) and chrome debugger opened.

Commented this line and the issue has been resolved.

easy-livereload/index.js

Line 121 in 996ce2a

code += '<script>document.addEventListener(\'LiveReloadDisconnect\', function() { setTimeout(function() { window.location.reload(); }, ' + options.reloadTimeout + '); })</script>';

It took me 3h to figure out what was going on.
Please, consider that users might have the same issue, which is caused by this line.

should ECONNRESET error be ignored?

I use easy-livereload with chrome LiveReload plugin, everytime page triggered refreshed with produced an error in express:

Error: read ECONNRESET
at TCP.onStreamRead (internal/stream_base_commons.js:205:27) {errno: 'ECONNRESET', code: 'ECONNRESET', syscall: 'read', stack: 'Error: read ECONNRESET
at TCP.onStreamRead (internal/stream_base_commons.js:205:27)', message: 'read ECONNRESET'}