LiveReload to please the Web Developer¶

Problem¶

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.

The Steps¶

There are several ways to reach the goal - I’ll show you mine. I’m talking of an Ubuntu 14.04 Trusty Tahr.

1. 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.

2. 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:

   

3. 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
   

4. 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.

5. Open a watched file in the browser (example):

   firefox http://127.0.0.1:35729/build/html/Index.html
   

   

6. Turn live-reloading on and off:

   

   Click to connect to the server that is looking out for file changes.

7. The connection is established

   As a result the icon changes and shows that it’s active:

   

   The connection is established.

8. 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!

Livereload For An Extension Documentation¶

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')

There is more¶

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.

Example: Compiling this Blog¶

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):

When I edit the text and save my blog is automatically rebuild and the browser refreshes. Click to enlarge.

Summary¶

Very cool :-))

PS¶

Check https://github.com/lepture/python-livereload/issues/120#issuecomment-165029198

tjwalch:

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.