dbergey / reloadr

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

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.

reloadr's Issues

Potential ModSecurity Conflict

if server paths are defined relatively, eg)

Reloadr.go({
            server: [
                '../../lib/scss/*.scss',
                ],
            ...
 });

ModSecurity will likely deny the request, serving up a 403 Forbidden. This is based on the Atomicorp.com WAF Rules on Generic Path Recursion. Which is any REQUEST_URI that matches positive against:

rx (/products/index\\.php\\?gallery=|connector=\\.\\./\\.\\./connectors|/admin/structure/views/|phpthumb/phpthumb\\.php\\?src=\\.\\./.*(?:uploads|images)|/site-builder/)

Server Side Problems

Script works fine updating css and javascript files but when trying to watch .php files it doesn't seem to work. Here is what my config options look like. (WordPress theme)

Reloadr.go({
    client: [
        '<?php bloginfo("stylesheet_directory") ?>/js/TSC.jquery.js',
        '<?php bloginfo("stylesheet_directory") ?>/js/TSCadmin.jquery.js',
        '<?php bloginfo("stylesheet_directory") ?>/style.css',
    ],
    server: [
        '<?php bloginfo("stylesheet_directory") ?>/front-page.php',
        '<?php bloginfo("stylesheet_directory") ?>/footer.php',
        '<?php bloginfo("stylesheet_directory") ?>/header.php',
        '<?php bloginfo("stylesheet_directory") ?>/index.php',
        '<?php bloginfo("stylesheet_directory") ?>/page.php',
    ],
    path: '<?php bloginfo("stylesheet_directory") ?>/reloadr.php',
    frequency: 4000
});

Any insights would be greatly appreciated.

Use it with versioned css files?

Hi,
is it also possible to use it with versioned css files?
E.G: path/to/css/style.css?version=1521023277

This css is generated from my scss files and the number is often changing.

Cheers