hwrod / reloadr

Makes a local site you're working on automatically reload when specified files are saved.

Recursive Reloadr

This version of reloadr looks at directories recursively, so you can just supply "*.ext" to Reloadr, and it will refresh regardless of deep-nested directory structures. It also adds localStorage support for enabling/disabling Reloadr.

Reloadr

The Problem

For development, I usually run a complete web stack locally on my MacBook. The web applications I develop must be tested across at least five different browsers and platforms. It's a pain to make a code change, and then have to switch to each browser (and virtual machine) in turn, and trigger each browser and platform's equivalent of a reload command.

Wouldn't it be easier if the browsers just knew to reload themselves when you made a change?

With Reloadr, you can tell the browsers which files are important enough to trigger a reload when you save them.

Client-Side Assets

Just include the following in your web application's tag:

<script src="/reloadr.js"></script>
<script>
	// quick, client-side-only syntax
	Reloadr.go([
		'/js/my_javascript_file.js',
		'/css/my_css_file.css'
	]);
</script>

By default, the script will poll each of the specified files every two seconds. The If-Modified-Since HTTP header is used to minimize traffic and request size, so if your file has not been updated since the last time it was checked, it won't be transferred. If your file has been updated, the browser then will reload the entire page, which is probably what you want if you've changed something and want to see the evidence thereof.

Server-Side Assets & Other Options

Not everyone works on client-side code all the time (myself included). Since your PHP files aren't directly accessible via HTTP, you can use the included reloadr.php file to aggregate the modification dates of your PHP files. Just put it somewhere accessible via HTTP, and if it's not at the top level of your site, tell Reloadr where it lives.

If you want to limit polling to, say, every 10 seconds, you'll need to pass that value (in milliseconds) as the 'frequency' option, as shown below in the full syntax:

<script>
	// full, awesome syntax
	Reloadr.go({
		client: [
			'/js/my_javascript_file.js',
			'/css/my_css_file.css'
		],
		server: [
			'*.php',
			'tests/*.php'
		],
		path: '/include/reloadr.php',
		frequency: 10000
	});
</script>

All options are, um, optional, but Reloadr won't actually do anything if you don't pass it a 'client' or 'server' array.

Potential Future Features

This is kind of a quick and dirty hack. I'd like to add some features to make usage easier, but still keep it simple. Here are some ideas:

• Scan the document's HEAD to find CSS and JS urls to poll.