Reloadr: A LiveReload Alternative for PHP

One of the greatest web development innovations of the past few years is the concept of development without refreshing your preview page. Most notable for this accomplishment is the app LiveReload which watches a users web project files for change, and refreshes their page automatically as needed.

LiveReload is great, but it has its limitations. It currently only works with client-side web projects (i.e. HTML, CSS, JavaScript, etc.). If you do your development on a local web server with PHP, you’re out of luck with LiveReload.

Thankfully, you’re not out of luck altogether. Daniel Bergely over at github has put together an awesome tool called Reloadr that loves working with PHP. If you’re interested in saving yourself thousands of F5 button presses, read on.

What Reloadr is and how it works

Reloadr is just another tool that does pretty much the same thing as LiveReload–it just does it a little bit differently. Rather than a full-fledged app, Reloadr is just two files: a JavaScript file and a PHP file. These files monitor your project files and watch for a changed “modification date.” If they notice one, they refresh your page for you.

How to set up and use Reloadr

Set up for Reloadr is extremely easy, and since it is written in JavaScript and PHP the process is the same for every operating system.

Step One: Download and extract the Reloadr files

Visit Reloadr’s github page and download the zip package. This zip includes three files, README.markdown, reloadr.js, and reloadr.php. Once retrieved, extract it to the scripts directory in your web project. It doesn’treally matter where these files are stored, as long as you know the path to them when you go to include them in your HTML files.

Step Two: Include the JavaScript file test

You’ll need to include reloadr.js in any HTML or PHP file that you would like Reloadr to auto-refresh for you. If you use a PHP templating engine of some kind, you can simply perform this include in your main layout file. Here’s the include line.

//Of course, change the path to the correct path for you
<script src="/path/to/reloadr.js"></script>

Step Three: Tell Reloadr to start running

Now that ReloadR is included, you’ll need to tell it to start running. There’s a great Reloadr method that will do this for you with very little pain whatsoever. Check it out.

<script>
// This code should go directly after your include line
    Reloadr.go({
        client: [
            '/path/to/my_javascript_file.js',
            '/path/to/my_css_file.css'
        ],
        server: [
            '*.php',
            'tests/*.php'
        ],
        path: '/path/to/reloadr.php'
    });
</script>

This “go” method initializes ReloadR; the files that you list for it are the files that Reloadr will watch for modifications. If those files are updated, Reloadr will refresh your browser. Of course, you’ll need to update the file paths to match your own. There’s no limit to the number of files that you can list here.

The difference between the client and server sections is just that-one is for client files (HTML, CSS, JavaScript) and one is for server files (PHP). It’s important that you put files in the correct section. And of course, make sure that the reloadr.php path is correct.

If you’re using a templating engine and would like Reloadr to watch your views folder, you can do so by adding a line in the server section, like this:

'/path/to/views/*.phtml',

Step Four: Adjust the frequency of the file modification checks

Reloadr is set to check for modifications every 2 seconds. If you’re like me, that’s not quite often enough. Fortunately there is a frequency setting that lets you specify exactly how often these checks are performed. You can add it like this:

Reloadr.go({
    client: [
        '/path/to/my_javascript_file.js',
        '/path/to/my_css_file.css'
    ],
    server: [
        '*.php',
        'tests/*.php'
    ],
    path: '/path/to/reloadr.php',
frequency: 1000
});

The number for frequency is a millisecond measurement determining the frequency of checks, so the example above means “1 second.” I have mine set to 100 milliseconds, which seems to work well and offers nearly instant refreshes. A number so low might not work well on an older computer, though (but this I have not tested).

Step Five: Enjoy ‘F5’-less development

That’s it! Easy, right? No longer needing to refresh your page is an awesome time-saver, not to mention that it’s just plain cool.

Troubleshooting and credits

If you’re having trouble setting it up, feel free to ask in the comments section below and I’ll try to help out. Also, in thanks to Daniel Bergey for this awesome tool, head over to his Twitter and follow him. Also, check out some of his other projects, he has some great ones.

Blog