There’s various solutions out there for seeing client-side changes quickly in a browser. One such solution, livereload.com, was mentioned by Ted Naleid in this tweet. While I don’t have much experience with livereload, I’m not completely convinced I’m doing it wrong (as he suggests somewhat tongue-in-cheek) either (though it wouldn’t be the first time I’ve been wrong). I have been using another solution, and I wanted to share with you how to start using it with your own Grails application, if you so choose. The solution I have been leveraging for live-reload-“like” functionality is the Chrome extension Tincr. This post attempts to give you a quick guide to leveraging Tincr with your Grails 2.x application and talk briefly about how it helps you iterate your client-side development efforts quicker.

Once you install the Chrome extension, it will show up as a tab in your Chrome Developer Tools view.

You’ll notice that I choose the Configuration File Option in Tincr:

.

This allows me to customize the mapping, ideally through regular expressions, between the project’s resource files and where they are located in my project. I do this mapping because I have had issues with it working simply with an http web server, though others might have better success with one of the other pre-configured options.

Nevertheless, here’s an example tincr.json file, which you need to put right under the web-app folder of your project.

As you can see, this basic JSON simply maps js and css resources under the web-app folder, which I set as the Tincr ROOT folder in Chrome, to the project’s js/ and cs/ folders. It works recursively for those directories as well. You can of course get more fancy depending on how your project’s resources are defined.

One ‘gotcha’ to watch out for is resource bundling. To get this to work (at least without major pains), I turn resource bundling off in the Grails 2.x apps I use Tincr in by adding:

grails.resources.debug=true

in the development environment config section of my project’s Config.groovy file. While this adds additional parameters to my resource files, it breaks them out of Grails’ default bundling strategy and more easily allows Tincr to do its magic.

As for that magic, Tincr allows me to make changes to javascript or CSS files in the browser (in Chrome Developer Tools), use Cmd+S (save shortcut, this being the Mac version of a save shortcut), and have the changes be saved back to the file system (and viewable instantly in my IDE). On the reverse side, as you can see in the Tincr documentation, you can define a ‘fromFile’ JSON attribute, which will allow you to save a file in your favorite IDE and have Chrome bring in the changes without reloading the page in the browser. Luckily, in this simple configuration example, Tincr is smart enough to reverse-engineer the ‘fromFile’ mapping, so defining it is redundant, and I have therefore not done so.

So hopefully this provides you an impetus and a guide to start to “tinkering” (you knew it was coming…) with Tincr in your Grails application!