search

bmustiata / fast-live-reload

A live reload that works with all the possible browsers.
18 stars 5 forks source link

readme

fast-live-reload

Watch your pages change without refreshing your browser. The live reload that finally feels perfect.

demo

A live reload that works with all the possible browsers (ie8+) without external dependencies (like jQuery), and can do pretty much anything, and integrate with whatever development flow you're having, including other watcher tools or build steps.

Don't take my word for it, see why it's awesome in a short presentation for v2.2.7. It's only 18 minutes long, and you get to feel the power of fast-live-reload.

Reloading works without touching the code of your web site.

Why

I wanted a simple tool where I can develop and test all kinds of web applications with ease on all browsers, even on remote machines (see for example [https://www.modern.ie/en-us]() ).

This tool is specifically designed for that.

Example

The live reload application is available as either fast-live-reload, or flr from the command line.

$ fast-live-reload
1. Will notify the changes for clients on port 9001
2. and will serve the content from . on port 9000
3. and will monitor and execute when files change in subfolders:
   a: .

All of the above parameters can be changed.

You can open in a browser any HTML page via the http://localhost:9000/, edit it, and see the page reloading live.

For all the resources that have the mimetype as text/html, the live reload client script will be automatically injected before the end of the body tag (the auto injection can be disabled via -no-inject).

Live reloading is possible without having to add any client script even for static resources, by navigating to the /fast-live-reload/ URL, in this case it would be:

http://localhost:9000/fast-live-reload/

Complete Help and Example

$ fast-live-reload -h

fast-live-reload: The swiss army knife of live reloading.
Monitors multiple folders for changes, notifies connected clients, executes programs, serves local content, proxies sites, iframe reloads existing pages...

Usage: fast-live-reload [options]

Options:
    --interval          Poll every how many milliseconds.  [100]
    -d, --delay         Delay to avoid throttling.  [50]
    -s, --serve         Folder or site (via IFrame) to serve.
    -e, --execute       Execute the given commands on change.
    -ep, -pe, --parallel-execute
                        Run processes as long as fast-live-reload runs.
    -p, --port          Port to listen to.  [9001]
    -sp, --serve-port   Port to serve files to.  [9000]
    -ns, --no-serve     Don't serve any local folder or site.
    -nc, --no-clients   Don't start the client change server.
    -o,  --offline      Don't serve local files nor notify clients.
    -ni, --no-inject    Don't inject client code.
    -nn, --no-notify    Don't notify clients.
    -n, --dry-run       Show what will be done. Don't execute.
    --add-path          Paths to monitor for changes. Defaults to serve folder.

Example:
fast-live-reload -s /target/ \
    -ep "tsc --watch --rootDir src/ts --outDir out/js --sourceMap src/ts/*.ts"\
    -ep "compass watch"\
    src/js -e "grunt concat sync"\
    src/html src/css -e "grunt sync"

1. Will notify the changes for clients on port 9001
2. and will serve the content from /target/ on port 9000
3. and will run on startup, and then kill on shutdown:
   a: tsc --watch --rootDir src/ts --outDir out/js --sourceMap src/ts/*.ts
   b: compass watch
4. and will monitor and execute when files change in subfolders:
   a: src/js   -> grunt concat sync
   b: src/html -> grunt sync
      src/css

Run only programs when files change

We disable both serving or proxying files (-ns) and the client reload server (-nc), using the offline shortcut -o (--offline) that activates both -ns and -nc.

$ fast-live-reload -o graph-data \
    -e "groovy generate-graph-data.groovy" \
    -e "dot -Tpng -ocustom-graph.png custom.graph"
1. Will monitor and execute when files change in subfolders:
   a: graph-data -> groovy generate-graph-data.groovy (no refresh)
                    dot -Tpng -ocustom-graph.png custom.graph

Run for each individual file

In order to run a command for each file that was changed or created, we can just pass the $FILE variable in the command. Note the single quotes so the variable is not expanded by the current shell:

$ flr -o graph-data/*.graph \
    -e 'dot -Tpng -o${FILE}.png $FILE'

Even if multiple graph files change, the command will be called individually for each one of them.

Remote Locations

Remote locations are proxied, and the reloader will allow to reload the browser even if it's an external URL, when files change.

$ fast-live-reload -s http://localhost:8080/my-webapp/some-page.jsp
Will
1. notify the changes for clients on port 9001,
2. serve the content from http://localhost:8080/my-webapp/some-page.jsp on port 9000,
3. and will monitor and execute when files change in subfolders:
   a: .

This will proxy the localhost:8080 host on port 9000, and will allow getting the /fast-live-reload/ URL into the website, where the monitoring of the site will take place.

Here are the benefits of using remote locations:

  1. In case the page would crash (e.g. 500 error), the reloader will still attempt to reload it, when changes occur.
  2. Changing the page works, and when reloading, it will reload the current iframe page.

Install

In order to install this run:

npm install -g fast-live-reload

Client JavaScript

You don't need to change your code if you're serving files (-s) without --no-inject, or using the IFrame reloader.

If you must use the reloader script (e.g. a site that redirects to itself due to security) then fetch it with bower, and refer to it into your html pages.

bower install fast-live-reload

Check the documentation for full details.

Change Log