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.
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
How to set up and use Reloadr
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.
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.
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.
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:
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:
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.