simple-autoreload-server

A simple Web server on Node.js with autoreload/livereload feature.

• Reload statically on update the html files
• Refresh dynamically on update the files like css, js, png, and etc.
• No browser extensions are needed. (uses only WebSocket.)
• Broadcast handleable event on client side window.

Usage

1. Install simple-autoreload-server via npm.

   (e.g. npm install simple-autoreload-server)

2. Start autoreload-server from command line.

   (e.g. autoreload-server -d ./ -p 8080)

3. Open server url with your browser.

   (e.g. iexplore http://localhost:8080/)

Installation

install this package via 'npm'.

npm install -g simple-autoreload-server

Command Line Usage

autoreload-server [options] [root-dir] [port]

Example 1

Start server with options.

autoreload-server -w "**/**.{html,css,js}" ./site-files 8008

Example 2

Start server with json instead of commandline-options.

command

autoreload-server

content of .autoreload.json

{
  "watch":  "**/**.html",
  "reload": "**/**.html",
  "mount": [
    {
      "path":   "modules/",
      "target": "/"
    }
  ],
  "inject": [
    {
      "content": "before-body.html",
      "which":   "**/**.html",
      "where":   "</body>",
      "prepend": true
    }
  ]
}

In case of using another config json file instead of ".autoreload.json", invoke command with '-c' or '--config' option. See Options.md and config.json in examples for details.

Example 3

as module.

var launcher = require('simple-autoreload-server');

var server = launcher({
  port: 8008,
  path: './',
  listDirectory: true,
  watch:  "*.{png,js,html,json,swf}"
  reload: "{*.json,static.swf}"
});

Command Line Options

option	default	help
--path, -d	.	set directory to publish.
--watch, -w	**/**	pattern for file to watch.
--reload, -r	false	pattern for file to reload the whole page.
--mount.path, -m	.	set additional directory to publish.
--mount.target, -t	/	server side path of mounted direcory
--mount.watch, -W	**/**	pattern of file to watch.
--host, -H	0.0.0.0	set host address to publish.
--port, -p	8080	set port to listen (http).
--config, -c	.autoreload.json	load options from json.
--search-config	true	search for config json in parent directories.
--list-directory, -l	true	enable directory listing.
--browse, -b	false	open server url by platform default program.
--execute, -e	``	execute command when the server has prepared.
--stop-on-exit, -k	false	exit when invoked process specified by "execute" died.
--ignore-case, -i	true	ignore case of glob patterns.
--include-hidden, -n	false	glob includes hidden files.
--default-pages	index.{htm,html}	default page file pattern for directory request.
--encoding	utf-8	encoding for reading texts and inject target files
--watch-delay	20	delay time to supress duplicate watch event (ms).
--log, -v	normal	set log-level
--builtin-script	true	enable default built-in script injection.
--client-module	true	expose client module to 'window' object.
--client-log	false	inform client to log.
--recursive, -R	true	watch sub-directories recursively.
--follow-symlinks, -L	false	follow symbolic-links. (requires 'recursive' option)
--inject.content, -I	``	injects specified content.
--inject.type, -T	file	type of "inject.content".
--inject.which, -F	**/**.{htm,html}	specify pattern for injection target.
--inject.where, -P	`</(body	head
--inject.prepend, -E	false	insert content before matched.
--help, -h	false	show help
--version, -V	false	show version

See Options.md for details.

Client Module Usage

note: available only for the web page injected the built-in script module.

Client module will be exposed as window.AutoreloadClient (default).

and the module emits some events. set listener to window object to handle events.

e.g.

window.addEventListener("AutoreloadClient.update", function(ev){...});

Currently, following events are handleable on client side.

event	desc
update	file update detected
refresh	refresh request.
reload	reload request.
scan	before dom element scanning.
open	connected.
close	disconnected.
message	received a message above.

(server will send 'update' events only the file matched to 'watch' option.)

Some of events emit another events. (chained)

event	emits
message	(any events by server response)
update	scan
scan	refresh, reload
reload	refresh (on failed or canceled)

internal operation and chain of event emission are cancelable by using "event.preventDefault()".

event listeners will receive an event object with 'detail' key. and the 'detail' object has some of parameters below.

key	desc
client	client module instance.
path	path of file updated.
url	url of file updated.
type	original message type from server.
scan	scan target list.
reload	reload or not. (on reload event, set false to switch 'refresh')
target	dom object of refresh target.
targetUrl	url of refresh target. (url which contained as dom attribute)

and the contents of './examples' may be a useful reference for usage of client module. or see 'src/client.ls' for more information.

Version

0.2.15

License

MIT