Logos: Play Framwork, Grunt, Bower, Sass, Less, JavaScript

Building Assets for Play Framework 2.x

This is more of a personal experience than a how-to.

When I first got my hands on Play Framework 2 (coming from a PHP background) a couple of months ago, I was excited about the fact you could let the framework take care of compiling Less files. Next I also started to make use of its built-in Google Closure Compiler and RequireJS features for JavaScript files and rewrote some code.

With newer versions of Play 2.x (especially Play 2.3) things started to change and I realised even though I made a certain amount of effort to adapt to the Play workflow for assets, it still didn't really do what I actually needed.

“Back to the roots”

Although I really love Play and 2.3 added some interesting new features, I came to the conclusion that I no longer wanted to depend on a web framework’s set of (changing) features to build assets. So I went back to the roots, which in my case means Bower and Grunt.

“You don’t have to use everything Play offers.”

Now I keep the web application itself and its assets more or less completely separate – and I'm quite happy with that. This means, I no longer use the directory /app/assets at all.

Instead I create a new directory /assets (in the root directory of a project), which contains all self-written raw Less or Sass files, images, fonts and JavaScripts. Bower modules go as usual into /bower_components and a Gruntfile.js (also in the root directory of the project) defines all Grunt tasks.

The three main Grunt tasks are default to build all assets for development mode, watch to monitor changes of raw assets and rebuild certain assets automatically as required and finally dist which runs the default task first and then minifies CSS, JavaScript and even image files for production mode.

The destination path for all these files is /public. This means all the Play app has to do with assets is serve them as static files.

This way I’m completely independent from Play’s built-in features, I don't have to deal with third-party Java modules for asset building, I can tap a vast range of Bower and Grunt packages and – most importantly – I’m a lot more used to that workflow.

Next time I’ll talk about where exactly my dev and production assets live and how to have them distributed via a CDN.