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).
reloadify is installable via npm and can be used in 3 possible ways:
-
along with your existing Node server (or Express, etc)
-
standalone, as a live reloading static file server
-
as a CLI app, using 2)
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);var reloadify = require('../')(__dirname + '/views');
app.use(reloadify);You can find complete examples inside the /examples folder.
var reloadify = require('reloadify');
var folder = __dirname + '/public';
var port = 8080;
var hasSilentLogger = false;
reloadify.serve(folder, port, hasSilentLogger);Install it globally with npm:
npm i reloadify -gUsage:
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 4000Responses 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.
..when there are valid alternatives available, such as:
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 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.
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.
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.
npm i chromedriver -g
node test/functional.js(to be improved)