Wouldn't it be great if your browser would just reload automatically when you are making changes to your styling, javascript or templates? This is exactly what the LiveReloadBundle set out to do.

LiveReload requires two components to be present for it to work. On one side you need a server which emits changes to the browser. On the other side we need a little client JavaScript that can listen to these events and modify the browser window to reflect the received changes.

This workflow works beautifully on mobile browsers as well. Just open up the site on an emulator or a mobile device and you'll see it reload without looking for that tiny reload button every time.

Server

At Kunstmaan we recently started using Grunt. The best part about this taskrunner is the ability to execute tasks when certain files change. When you run the oneline installer it automatically creates a Gruntfile that has livereloading enabled. Just do grunt watch and any code you touch will trigger a reload. If you're not using the oneline installer check the online version for an example.

However, using Grunt is not a requirement. You can use any LiveReload server you want.

Client

This is where the KunstmaanLiveReloadBundle comes into play. Just follow the installation instructions as documented in the README. It's as simple as running this Composer command:

composer require kunstmaan/live-reload-bundle:dev-master --dev

You also need to include the bundle in your AppKernel.php. Preferably with an environment check.

if ($this->getEnvironment() == 'dev') {
	   $bundles[] = new Kunstmaan\LiveReloadBundle\KunstmaanLiveReloadBundle();
}

The ScriptInjectorListener will only trigger when an X-Debug-Token header is present so it should only work in the dev environment anyway. But it's best to play it safe.

This simple bundle injects the JavaScript into every page when the LiveReloadBundle has been loaded.

You can also configure it to listen on a different port or hostname if you are using a non-default LiveReload server. Just check out the bundle's documentation.

Wrap-up

At the moment we still use Assetic to compile our assets. Because of this we are unable to only send the CSS or JS files to the browser which unfortunately triggers a complete reload in the browser.

Obviously, this is better than manually having to reload the browser but it's also not showing the full potential of LiveReload … not yet I should say. Keep an eye on our blog for future updates!

If you like what you see, please recommend this bundle in KnpBundles: