Apr 22, 2015 Tag: WebDev

LiveReload to please the Web Developer

LiveReload can make your life as a web developer so much easier. Find out how.

Updated on Jun 26, 2016

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:

    LiveReload AddOn

    Rearrange your Firefox toolbar to get quick access to the LiveReload button:

    LiveReload icon and button

    And, attention, make sure that you admit direct access in Chrome:

    Add on settings 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
    
    watcher has started

    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
    
    url of a watched file
  6. Turn live-reloading on and off:

    Turn live-reloading on

    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:

    live-reloading is 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')

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.

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:

Browse files that are watched by LiveReload

And this is the glorious result (click to enlarge):

Live update in the browser

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.

Comments

comments powered by Disqus

Previous topic

A Question about SVG

Next topic

Get in Touch with Python: iPython and Ansible

Tags

Archives

Languages

Recent Posts

This Page