LiveReload.js [![CI Status](https://github.com/livereload/livereload-js/workflows/CI/badge.svg)](https://github.com/livereload/livereload-js/actions) ============= What is LiveReload? ------------------- LiveReload is a tool for web developers and designers. See [livereload.com](http://livereload.com) for more info. To use LiveReload, you need a client (this script) in your browser and a server running on your development machine. This repository (livereload.js) implements the client side of the protocol. The client connects to a LiveReload server via web sockets and listens for incoming change notifications. When a CSS or an image file is modified, it is live-refreshed without reloading the page. When any other file is modified, the page is reloaded. The server notifies the client whenever a change is made. Available servers are: * [LiveReload app for Mac](http://livereload.com/) * [rack-livereload](https://github.com/johnbintz/rack-livereload) * [guard-livereload](https://github.com/guard/guard-livereload) * [grunt-contrib-watch](https://github.com/gruntjs/grunt-contrib-watch) * [python-livereload](https://github.com/lepture/python-livereload) * more available on Google :-) * you can even write your own; refer to the [LiveReload protocol](http://livereload.com/api/protocol/) If you are a web developer looking to _use_ LiveReload, you should refer to your LiveReload server/app/tool's documentation, rather that this repository. **You should use the copy of livereload.js script bundled with your server**, because it's guaranteed to be compatible, and may be customized for that server. Most LiveReload server vendors will serve livereload.js on the LiveReload port. When your server is running, you can typically access the script at `http://0.0.0.0:35729/livereload.js`. Please read on *only* if you are: * using a server that doesn't document the usage of livereload.js * interested in hacking on livereload.js or want to understand it better * developing a LiveReload server What is livereload.js? ---------------------- This repository contains a JavaScript file implementing the client side of the LiveReload protocol. It gets change notifications from a LiveReload server and applies them to the browser. If you are **developing** a LiveReload server, see [dist/livereload.js](https://github.com/livereload/livereload-js/raw/master/dist/livereload.js) for the latest version built using the sources in this repository. We require LiveReload server vendors to distribute livereload.js as part of their apps or tools. An old version of this script is also bundled with the LiveReload browser extensions, but it's not getting updated and only serves for compatibility with very old clients. Features: * Live CSS reloading * Full page reloading * Protocol, WebSocket communication * CSS `@import` support * Live image reloading (`

`, `background-image` and `border-image` properties, both inline and in stylesheets) * Live, in-browser LESS.js reloading Would love, but doesn't seem possible: * live JS reloading Installing using Bower ---------------------- This script is published on Bower. (But, to reiterate: the preferred method is to avoid installing it altogether, and instead use the one bundled with your LiveReload server/app/tool.) Installation: bower install livereload-js --save-dev This gives you a component containing a single script file, `dist/livereload.js`. Installing using npm and Browserify ----------------------------------- Including livereload.js into your Browserify bundle probably makes no sense, because livereload.js isn't something you would ship to production. But if you insist _and_ you know what you're doing, you can install LiveReload via npm: npm install livereload-js --save and then add this to your bundle: window.LiveReloadOptions = { host: 'localhost' }; require('livereload-js'); Note that livereload-js package uses `window` and `document` globals, so won't run under Node.js environment. The reason you need to specify `LiveReloadOptions` is that `livereload.js` won't be able to find its ` LiveReload 2 server listens on port `35729` and serves livereload.js over HTTP (besides speaking the web socket protocol on the same port). A slightly smarter way is to use the host name of the current page, assuming that it is being served from the same computer. This approach enables LiveReload when viewing the web page from other devices on the network: ```html ``` However, since `location.host` is empty for `file:` URLs, we need to account for that: ```html ``` LiveReload.js finds a `script` tag that includes `…/livereload.js` and uses it to determine the hostname/port to connect to. It also understands some options from the query string: `host`, `port`, `snipver`, `mindelay` and `maxdelay`. `snipver` specifies a version of the snippet, so that we can warn when the snippet needs to be updated. The currently recommended `snipver` is version 1: ```html ``` Additionally, you might want to specify `mindelay` and `maxdelay`, which is minimum and maximum reconnection delay in milliseconds (defaulting to `1000` and `60000`). Alternatively, instead of loading livereload.js from the LiveReload server, you might want to include it from a different URL. In this case, add a `host` parameter to override the host name. For example: ```html ``` Options ------- Options can either be specified as query parameters of the `

livereload-js

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past