simple-autoreload-server

Simple Web Server with live/autoreload features without browser extensions.

Usage no npm install needed!

<script type="module">
  import simpleAutoreloadServer from 'https://cdn.skypack.dev/simple-autoreload-server';
</script>

README

simple-autoreload-server Build Status

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|html)> specify regex string where to inject.
--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