Skip to content

A live-reload NPM module that works well with your raw Node / Express servers. CLI version available as well.

Notifications You must be signed in to change notification settings

alessioalex/reloadify

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

reloadify

Node module that refreshes the browser(s) when your static resources have changed.

Use it with your Node http / Express server without needing anything else (NO BROWSER PLUGINS, NO MANUALLY INJECTING CODE into your pages).

usage

reloadify is installable via npm and can be used in 3 possible ways:

  1. along with your existing Node server (or Express, etc)

  2. standalone, as a live reloading static file server

  3. as a CLI app, using 2)

integrating it with your Node server

Regular Node http:

// initializing it with the watched folder
// (you can also pass an array of multiple folders)
var reloadify = require('reloadify')(__dirname + '/public');

http.createServer(function(req, res) {
  // Express style signature: `reloadify(request, response, next)`
  reloadify(req, res, function() {
    // do stuff afterwords
    if (req.url === '/') {
      fs.readFile(__dirname + '/views/home.html', 'utf8', function(err, content) {
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.end(content + '\n');
      });
    } else {
      res.writeHead(404, { 'Content-Type': 'text/html' });
      res.end('Page Not Found\n');
    }
  });
}).listen(1337);

Express:

var reloadify = require('../')(__dirname + '/views');
app.use(reloadify);

You can find complete examples inside the /examples folder.

live reloading static file server

var reloadify = require('reloadify');
var folder = __dirname + '/public';
var port = 8080;
var hasSilentLogger = false;

reloadify.serve(folder, port, hasSilentLogger);

cli app

Install it globally with npm:

npm i reloadify -g

Usage:

Usage: reloadify {OPTIONS}

Options:

      --port, -p  Port to start the server on.

    --folder, -f  Folder to be watched for changes.

    --silent, -s  Disable the logger.

      --help, -h  Show this message.

Example:

reloadify -f myAppFolder -p 4000

how does it work

Responses are intercepted in order for a script to be injected into the page using inject-html. This script will allow the browser to be notified by the server in realtime using EventSource. The server will send a message to the browser when watched files change, using chokidar.

why build another refresh module?

..when there are valid alternatives available, such as:

LiveReload

I read the following about getting started with LiveReload:

1. It works with Safari, Chrome, Firefox and Mobile Safari. Also Opera if you enable web sockets.

2. Yes, you heard that right, LiveReload <3 iPhones, iPads and their Simulators if you insert a JavaScript snippet.

3. If adding a tag is not your thing, and you're only interested in desktop browsers, only on your computer, use our browser extensions.

My issues were the following: I wanted a tool that works in every browser without a plugin and without injecting a JavaScript snippet. Sure, LiveReload has a wider scope and does not specifically care about the backend. However that wasn't my case, as I was working exclusively with Node.

Browsersync

Browsersync is a great tool that does a lot of things and it's really easy to use.

However I wanted something lighter that I could easily integrate with my existing Node / Express server.

others

As much as I love reinventing the wheel, I also took a look at some other popular alternatives (besides the two previously mentioned) before creating my own thing:

  • live-server - "A simple development http server with live reload capability."
  • easy-livereload - "Express middleware to use livereload2 easily (both server and client)"

The first module works fine if you're only doing HTML / CSS / JS stuff, but I wanted something that integrates with an existing Node server. The second module depends on LiveReload, so it's a no-go for the reasons listed before.

Last but not least, it was fun.

gotchas

Make sure you have <body></body> tags for HTML pages, those are needed to inject the script that takes care of reloading the page. If you don't have those the page will be hanging.

tests

npm i chromedriver -g
node test/functional.js

(to be improved)

license

MIT

About

A live-reload NPM module that works well with your raw Node / Express servers. CLI version available as well.

Resources

Stars

Watchers

Forks

Packages

No packages published