Play Framework 2.2 with WebJars client-side web libraries

Table of contents

Reading Time: < 1 minute

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:

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                    controllers.WebJarAssets.at(file)

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

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

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

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

Check the application and the code base on bellow links:

The live application is currently hosted at : http://employee-self-service.herokuapp.com/
The Github code for the project is at : https://github.com/knoldus/Employee-Self-Service

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: http://www.webjars.org