Play Framework 2 with Java, Scala ,JSON, CoffeeScript, jQuery

Play Framework 2 RC2 has been released and it is quickly becoming a mature and productive way to build modern web apps. Lets walk through building a quick app with Play 2, Scala, Anorm, JSON, CoffeeScript, and jQuery. Once the app works locally we will deploy it on the cloud with Heroku.

Step 1) Download and install Play 2 RC2

Step 2) Create a new application:

play new foobar

When prompted select to use Scala as the language.

Step 3) In the newly created “foobar” directory generate the IDE config files if you’d like to use one. For IntelliJ, run:

play idea

Note: This generates an iml file which is not directly importable as a project. Instead you need to create a new project without a module and then import the module from the generated iml file. If you need help with this, follow instructions 8 – 10 in my Play 1 + Scala IntelliJ article.

For Eclipse, run:

play eclipsify

Step 4) Start the Play server:

play run

Test that it works by visiting: http://localhost:9000

Step 6) Configure the default data source to use an in-memory h2 database by adding the following values to the “conf/application.conf” file, allow the schema to get crated automatically by configuring application.conf:

# You can declare as many Ebean servers as you want.
# By convention, the default server is named `default`


Step 10) Create a JSON service to get all of the bars by adding a new function to the “app/controllers/” file:


GET     /                           controllers.Application.index()
POST   /bars                        controllers.Application.addBar()
GET    /bars                        controllers.Application.getBars()

Try it out by opening http://localhost:9000/listBars in your browser. You should see the Bar you created in Step 9.

Step 11) Create a new CoffeeScript file that will use jQuery to fetch the JSON serialized Bars and add each one to the page by creating a new “app/assets/javascripts/” file containing:

$ ->
  $.get "/listBars", (data) ->
    $.each data, (index, item) ->
      $("#bars").append "<li>Bar " + + "</li>"

This CoffeeScript uses jQuery to make a GET request to “/listBars”, iterate through the returned data, and add each item to the “bars” element on the page (which will be added in Step 12).

Step 12) Update the “app/views/index.scala.html” template to use the index.js script that is automatically compiled from the CoffeeScript source by adding the following to the “main” block:

    <script src=""javascripts/index.js")" type="text/javascript"></script>   <ul id="bars"></ul>

In your browser load http://localhost:9000 and verify that the bars are being displayed on the page and that adding new bars works as expected.