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.
Understand
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.
For the major browsers extensions are provided. And since Andrey and Timofey opened the source (what a clever decision!) these extensions have set a standard.
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”.
I assume that you have Python and the Python Packet Manager “PIP” on your machine. If PIP is missing run python get-pip.py to install it. Then the installation is as simple as:
(sudo) pip install livereload
Let the server watch
Go to your webroot folder and start the server:
cd /path/to/my/project
livereload
The server is now watching our webfolder and is ready to accept connections from the browser extensions.
Open a watched file in the browser (example):
firefox http://127.0.0.1:35729/build/html/Index.html
Turn live-reloading on and off:
Click to connect to the server that is looking out for file changes.
The connection is established
As a result the icon changes and shows that it’s active:
The connection is established.
Done!
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
File EXTKEY/typo3conf/ext/mincity/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')
Note: For some time I’ve been using my personal version of livereload. It introduces the ‘ignore’ parameter. In the meantime this change has gone into the standard master branch and you can use just that. Great! So just forget about my personal version.
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 :-))
Check https://github.com/lepture/python-livereload/issues/120#issuecomment-165029198
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.