Watch your pages change without refreshing your browser. The live reload that finally feels perfect.
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.
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.
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/
$ 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
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
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 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:
In order to install this run:
npm install -g fast-live-reload
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.
--serve-port
not -serve-port
.tvanekeris
.npm link
.bbasic
.$FILE
always returns the absolute path to the changed or new file.$FILE
or %FILE%
. Run commands through a shell.flr
as a script, beside fast-live-reload
. Fixed bug when watching absolute paths, with file patterns. Added regression tests. Updated dependencies.sane
module instead of watcher
since it uses fs.watch
with far better performance.bbasic
.noscript
or comments after the body
tag. Thanks bbasic
.-d
) param..css
files occured.<base/>
tag when existing, if injecting the client script.-nc
is set. Added -o
alias for -ns
and -nc
together. (run commands only)-ni
)-nn
) or no client server altogether (-ns
)-pe
), multiple monitor/execution flows, dry runs (-n
). Major refactor.-d
.-e
.-s
.-s http://host/my-app/my-page.jsp
).current-page-host:9001
.