Play Framework 2.2 with WebJars client-side web libraries

WebJars are client-side web libraries (e.g. jQuery & Bootstrap) packaged into JAR (Java Archive) files.

WebJars can be added as dependencies to an app by simply adding them to the build.sbt file. There is also a helper library named webjars-play that makes it easy to reference WebJar assets. Here is an example build.sbt file with webjars-play and the bootstrap WebJar as dependencies.

Do the following steps to implement WebJars client-side web libraries with Play Framework:

  1. Add following entry into build.sbt file.
"org.webjars" %% "webjars-play" % "2.2.2-1",
"org.webjars" % "bootstrap" % "3.1.0",
"org.webjars" % "bootswatch-yeti" % "3.1.1",
"org.webjars" % "html5shiv" % "3.7.0",
"org.webjars" % "respond" % "1.4.2"

2. Add following entry into  conf/routes file.

# Map the webjar static assets to the /webjars URL
GET     /webjars/*file          

3. Add following entry into app/views/main.scala.html file.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" media="screen" href=""bootswatch-yeti", "bootstrap.min.css"))">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src=""html5shiv.js"))"></script>
  <script src=""respond.min.js"))"></script>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src=""jquery.min.js"))"></script>
<!-- Latest compiled and minified JavaScript -->
<script src=""bootswatch-yeti", "bootstrap.min.js"))"></script>

Check the application and the code base on bellow links:

The live application is currently hosted at :
The Github code for the project is at :

This is the fourth edition of this application. If you have any changes then feel free to send in pull requests and we would do the merges 🙂 Stay tuned.

For more information about WebJars visit the website:


One thought on “Play Framework 2.2 with WebJars client-side web libraries

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s