Seed Application for Playframework 2, RequireJS, WebJars, and AngularJS

Example application for Play+AngularJS+RequireJS.


This template application shows how to organize your application with Playframework 2, WebJars, RequireJS and AngularJS.

It shows an alternative way of organizing modules than the official Angular-Play-Seed.

For a full explanation, read the following blog post:

The updates made for Play 2.2 and newer WebJars are explained here:

The changes for Play 2.3 and sbt-web are discussed in this series about sbt-web:

The changes for Play 2.4 are summarized in this short summary post:

Updated for Play 2.5 with only a few minor changes.

Code Organization

The JavaScript modules are organized as follows:

|- app
|-- assets
|--- javascripts    <- contains all the JavaScript/CoffeeScript modules
|---- app.js        <- app module, wires everything together
|---- main.js       <- tells RequireJS how to load modules and bootstraps the app
|---- common/       <- a module, in this case
|----- main.js      <- main file of the module, loads all sub-files in this folder
|----- filters.js   <- common's filters
|----- directives/  <- common's directives
|----- services/    <- common's services
|---- ...

Trying It Out

Dev Mode

  • Load dependencies via sbt update
  • Run via sbt ~run
  • Go to localhost:9000

This uses the normal JavaScript files and loads libraries from the downloaded WebJars.

Prod Mode


  • Run sbt testProd


  • Produce executable via sbt clean dist
  • Extract unzip target/universal/
  • Run play-angular-require-seed-2.x.x/bin/play-angular-require-seed -Dhttp.port=9000 -Dconfig.resource=prod.conf

This uses the uglified JavaScript files, versioned and compressed assets, and loads WebJars resources from the jsDelivr CDN.


This application is also published as a Typesafe Activator template:

To use it from Activator, type

$ activator new <project-name>

Activator will now ask you to choose a template:

Browse the list of templates:
Choose from these featured templates or enter a template name:
  1) minimal-java
  2) minimal-scala
  3) play-java
  4) play-scala

Enter play-angular-require-seed (you can use tab completion).

> play-angular-require-seed
OK, application "<project-name>" is being created using the "play-angular-require-seed" template.

Your new app is now ready for development. Switch to its directory and run activator or sbt.

$ cd <project-name>
$ activator ~run