Digital Conversations
featured-image

Live.js – Why it’s amazing, and getting it to work with PHP files.

27th October 2011

Live.js is a productivity tool, primarily aimed at front-end developers working in a development environment. It allows you to view the latest changes to your web page in the browser in real time, an auto refresh of sorts.

In other words, whether you’re editing JavaScript, CSS or HTML files, as soon as you hit CTRL-S, the browser is updated with your changes. So in theory, when in development, you can kiss goodbye to constant ALT-TAB and F5 based-distractions and concentrate on your workflow – your page will always be up to date in Chrome, Firefox, IE etc…

So that’s why it’s amazing.

However, the Live.js website neglects to mention two key things, which has probably stopped many people from benefiting from it:

  • Live.js will only work on a server (so anyone who downloaded it and did a quick test on their desktop would have been disappointed)
  • Live.js does not work on .php files (well, not without some tweaking, which we’ll go into…)

How does Live.js work?

To use Live.js, simply include the script in your web page:

  1. <script src="/js/live.js"></script>

The script works by “sending consecutive HEAD requests to the server”. Every second, it will grab the header information from each of your project files, looking for the following information:

  • Last-Modified
  • Content-Length
  • Content-Type
  • Etag

If any of these values have changed since the last check, then live.js knows that the project has changed and will refresh the browser (or apply CSS changes dynamically, without refreshing). This all works fine with files named .html, .js or .css (as long as you are on a server).

So why doesn’t it work with PHP files?

HTML, JS and CSS files are static files, meaning the server can always determine and send the aforementioned header information. PHP files, however are dynamic and do not send this information unless you force them too.

Let’s get this thing working

Now, lets try and get this thing working on a local server. The following assumes you are using XAMPP, but the same should be achievable with any local PHP server.

Download this zip, and place the folder livejs-tutorial in your htdocs folder:

C:\xampp\htdocs\livejs-tutorial\

Start apache running and view the page in your browser (preferably Chrome). You should see something like this

Now open up the files global.js, index.php and stylesheet.css in your text editor. Make changes to global.js or stylesheet.css and you’ll see your changes reflected immediately in the browser:

However, if you change either of the .php files, you’ll see no changes in the browser. Let’s see why…

Hit F12 (in Chrome) to bring up Developer Tools. Click on the Network panel. You will see all of the requests that live.js is making to your files on the left. Click on any occurrence of stylesheet.css:

Viewing Live.js head requests in Chrome

You can see that Live.js is retrieving the file’s Last-Modified, Content-Length and Content-Type header values, and therefore knows when the page has changed. However, if you now select the PHP file, you’ll see that the Last-Modified and Content-Length values are not being sent:

Header information not being sent by PHP files.

So what we need to do is force PHP files to send this header information.

Forcing PHP to send header information at the document level

Open up index.php and add the following code to the very top of the file within < ?php ?> tags:

  1. $length = ob_get_length();
  2. $last_modified = date ("F d Y H:i:s", getlastmod());
  3. header("Content-Length: $length");
  4. header("Last-Modified: $last_modified GMT time");

This forces the php file to send Content-Length and Last-Modified values to the browser.

Now refresh the page in the browser, and make an edit to the file (index.php). Voila, your changes are immediately reflected in the browser.

The trouble with this is, we would have to add this code to every page, not very practical.

Get it working server-wide

What we can do is force PHP to append this code to every php file that gets processed. Cut the above code and place it into a file called livejs.php. Place this file in PHP’s default includes folder.

To find the path of this folder, open up php.ini. In XAMPP, this is in C:\xampp\php\.

Find the following line:

include_path = ".;C:\xampp\php\PEAR"

If there is already a path specified, this is where you should place your livejs.php file (in this case, C:\xampp\php\PEAR). If not, then specify a path and place the file there.

Now, in php.ini set the line output_buffering to On:

output_buffering = On

Finally, set the line auto_append_file to “/livejs.php”:

auto_append_file = "/livejs.php"

Save php.ini and restart apache. You should now find that any changes you make to index.php (or even the include, header.php) are instantly reflected in the browser!

Getting it working on a per-domain basis

Although the above, server-wide approach is fine for your localhost, I would not recommending doing this on a live dev server. Instead, you can create the following .htaccess file and place it in the root of your site, so that the auto-appending only works on this single domain:

[.htaccess]
php_value auto_append_file "livejs.php"
php_flag output_buffering on

Then place the livejs.php file somewhere that PHP can find it (the server’s default includes folder).

LivePage Chrome extension

Live.js is now available in the form of a Chrome extension called LivePage. Once installed, simply click the extension button to enable it for the page you’re currently viewing. Pretty handy for making CSS/JS changes to live websites, or sites where it’s otherwise inappropriate to have live.js running.

Now go give your F5 key a long-deserved break!

Note: remember to remove live.js from any ‘live’ server that you upload a website too, as it no doubt uses a lot of overhead! I will not take any responsibility for any destruction of servers!

Tagged: | | | | | |


I'm an Interface Developer with Reading Room Manchester. I'm currently excited about responsive design and mobile apps. I'm obsessed with finding quicker/better ways of doing things.


2 Responses

  1. avatar Mel January 19, 2012 at 1:55 pm

    Great find Danny, this tool is really useful and lets developers ‘just get on with it’.

    Developers might be interested to know that there’s a WordPress plugin for this too: http://wordpress.org/extend/plugins/wp-livephp/

    Reply

  2. avatar Chris Pomeroy November 24, 2011 at 5:53 am

    Great post. I used the php code snippet you provided as well as the htaccess trick — just php_flag output_buffering on— to get it to work on my server.

    Reply

Leave a response

  • Your email address will not be published.

  • 2 + one =

  • You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>