Month: August 2013

RequireJS Optimization with Play 2.1 and WebJars

RequireJS Optimization with Playframework 2.1 and WebJars


In a previous post I showed how to use WebJars with RequireJS in Play to manage web dependencies.

What that post lacked was to explain how to make your app production-ready, i.e. combine all your files into one, minify the result, and to map WebJars resources to CDN URLs 1. Play currently 2 offers nothing to do this automatically, so we need to some of the work by hand.

I will also continue to show how to integrate AngularJS with Play. Angular is an excellent framework for building complete Single Page Applications, and using Play as a REST backend is the perfect companion.

RequireJS Configuration

When you run play stage or play dist, Play runs the RequireJS optimizer. The optimizer cannot resolve the WebJars RequireJS plugin (as in webjars!angular.js) and throws an error 3. As shown before, you usually specify a main JavaScript file that is loaded by RequireJS when your web app is loaded. Accordingly, if we want to use different paths for our WebJars in production, we need to use a separate main file (I’ll name these mainDev.js and mainProd.js). We can tell Play to use the production file by adding the requireJs and requireJsShim build parameters.

val main = play.Project(appName, appVersion, appDependencies).settings( requireJs += "mainProd.js", requireJsShim += "mainProd.js" ) ▸ Read more...