Apr 22, 2015 Tag: WebDev
LiveReload can make your life as a web developer so much easier. Find out how.
Updated on Jun 26, 2016
You know the problem: Often you find yourself circulating between texteditor and browser: Change a few characters, switch to browser, reload, switch to the editor, change a few characters, and so on...
Wouldn’t it be great if the browser immediately refreshes automatically when you save one of that webfiles? “LiveReload” ist the solution. It’s all there - you only have to find out how to use it.
There are several ways to reach the goal - I’ll show you mine. I’m talking of an Ubuntu 14.04 Trusty Tahr.
livereload.com is where it all starts.
What does LiveReload do?
LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.
LiveReload 2.x is developed by Andrey Tarantsov, with an occasional help by Timofey Vasenin.
Add a browser extension
So add an extension to your browser. In Firefox this looks like:
Rearrange your Firefox toolbar to get quick access to the LiveReload button:
And, attention, make sure that you admit direct access in Chrome:
Provide a server
The next component you need is a “server”. In this case it means a program that watches files and will tell the browser when a change happened. I love Python so I went to see if there is a Python solution available. And it is! See this documentation about “Python LiveReload”.
(sudo) pip install livereload
Let the server watch
Go to your webroot folder and start the server:
cd /path/to/my/project livereload
Open a watched file in the browser (example):
Turn live-reloading on and off:
The connection is established
As a result the icon changes and shows that it’s active:
And that’s it! Open the file that is shown in the browser in a texteditor, make a little modification and save it. Whenever the file changes livereload lets the browser know which then automatically reloads the page.
What an enormous bunch of fun!
Assume a structure:
EXTKEY/ EXTKEY/Documentation EXTKEY/Documentation/Index.rst EXTKEY/Documentation/_make/ EXTKEY/Documentation/_make/serve.py
#! /usr/bin/env python from livereload import Server, shell def ignore(filePath): ignore = False if not ignore and filePath.startswith('../_make'): ignore = True if not ignore: # it's nice to see some info print filePath return ignore server = Server() server.watch('..', func=shell('make html'), delay=None, ignore=ignore) server.serve(root='build/html')
I’ve only shown a tiny bit of what’s possible. There is much more that can be done. Especially you may want to set up commands like compilation of SASS or LESS code or a Sphinx rebuild documentation command.
In case of this blog I’m using this little Python script:
#! /usr/bin/env python from livereload import Server, shell server = Server() server.watch('/home/marble/htdocs/myBlogProject/blog/', shell('make html')) server.serve(root='_build/html')
The server will start serving at 127.0.0.1:5500 and I can select a file to start browsing:
And this is the glorious result (click to enlarge):
Very cool :-))
If you want to try an alternative, I took some good parts from this project and combined them with other good things I found into a tool made for Django called django-livereload-server. It uses information from your Django settings file (e g staticfile finders) to find the templates and static files to watch.