Auto-Refreshing Grails Applications That Leverage the Grails Resources Plugin

| Comments

If you’re using the Grails Resources Plugin (like 82% of all grails applications currently) and you’re leveraging its ability to bundle resources together, you’ve probably noticed the delay between when you save a file and when a browser refresh actually shows the change.

This is annoying and can hurt your flow while developing. You’re never sure if the manual refresh that you just did on your browser actually has the change in it or not.

Let LiveReload Refresh the Browser for You

LiveReload is a simple application, but it really speeds up my development when I’m iterating on changes to a website. Especially when I’m doing things like tweaking CSS and HTML.

Once you have the application installed, you tell it what directories you want it to monitor. Whenever it sees a change to a file in that directory that has a “known” extension, it tells your browser to refresh the page automatically.

That sounds simple, and not all that powerful right? You could just cmd-tab over to your browser and cmd-R to refresh. But avoiding that keeps you in a flow and keeps your cursor and attention on the right things.


The easiest way is to download it from the App Store (it’s $9.99, but worth it IMO).

You’ll also want to add the Chrome LiveReload Plugin. This gives you a button to activate LiveReload for that tab.

LiveReload Chrome Plugin Button

When the plugin is enabled, it injects a small piece of JavaScript into your page that listens to the LiveReload application. When LiveReload sees a file change, it tells the browser plugin to refresh.


Now that you have the app and browser plugin installed, you’ll want to launch LiveReload. Then go into the options and enter any additional extensions that you’d like to monitor (it comes with many web defaults, but I add gsp for Grails development):

LiveReload options

Next, drag in any directories that conain files to monitor into LiveReload’s left pane.

For grails, if you’re NOT using the resources plugin’s “bundles” add:

  • grails-app/views – changes to gsp files & fragments
  • web-app – all JavaScript and CSS changes

if you ARE using grails resources “bundles” add:

  • grails-app/views – changes to gsp files & fragments
  • ~/.grails/<grails_version>/projects/<project_name>/tomcat

Where grails_version is something like 2.2.4, and project_name is the name of your grails app. This is where the compiled bundles are placed. You don’t want to add the web-app directory as LiveReload will double refresh your browser. Once when it sees the initial JS/CSS change, and a 2nd time when the bundle is compiled.

Using LiveReload

Now that you’ve got LiveReload monitoring for changes, fire up your browser and browse to your application. Then hit the LiveReload chrome plugin button:

LiveReload options

That will connect it to the app:

LiveReload options

and now any changes in the monitored directories will cause the “enabled” browser tab to automatically refresh.

I develop with a couple of monitors and using LiveReload lets me have my browser open on one monitor, and my code editor in the other. As soon as I save the file (and grails resources finishes compiling), I see the change on my web browser monitor without any additional input.

Non-OSX alternatives

If you’re on Windows or Linux and can’t use LiveReload (or if you don’t want to spend the $10), I’ve heard good things about I haven’t used it personally, but understand that it has a similar feature-set.