Tutorial #2: Using WebJars, jQuery, Bootstrap & Bootswatch with Play application

We have already discussed about the Play development environment in Tutorial #1.

So, In this blog we would set up the WebJars, jQuery, Bootstrap & Bootswatch with Play Framework which would drive us through rest of the tutorial series. We would be running this blog as a series and we would be looking at various aspects of play with this blog.

In this tutorial we will discuss about the following topics:

• WebJars : A client-side web libraries (e.g. jQuery & Bootstrap) packaged into JAR files.
• Bootstrap : The most popular HTML, CSS, and JS framework
• Bootswatch : Free themes for Bootstrap

WebJars work with most JVM-based containers and web frameworks. Using a WebJar requires:

1. The WebJar needs to be a dependency of your application
2. The WebJar needs to be in your application’s running CLASSPATH
3. Your container, web framework, or application needs to serve static assets from Jar files

Instructions for Play 2.3 (Sample Source)

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:

build.sbt

[code language=”scala”]

libraryDependencies ++= Seq(
“org.webjars” %% “webjars-play” % “2.3.0–2”,
“org.webjars” % “bootstrap” % “3.1.1–2”,
“org.webjars” % “bootswatch-cerulean” % “3.3.1+2”,
“org.webjars” % “html5shiv” % “3.7.0”,
“org.webjars” % “respond” % “1.4.2”
)

[/code]

In Play 2.3 WebJars are automatically available as static assets. If you have a route like:

GET /assets/*file controllers.Assets.at(path="/public", file)

Then a WebJar file like `bootstrap.css` is available at:

/assets/lib/bootstrap/css/bootstrap.css

The webjars-play helper library has a wrapper around the Play Static Asset Controller that can locate and serve WebJar assets. A new route to WebJarAssets needs to be added to the conf/routes file:

conf/routes

[code language=”scala”]
GET /webjars/*file controllers.WebJarAssets.at(file)
[/code]

To use Play 2’s reverse routing to resolve the URL to an asset you can do the following in a template:

[code language=”scala”]
<link rel=”stylesheet” media=”screen” href=”@routes.WebJarAssets.at(WebJarAssets.locate(“bootswatch-cerulean”, “bootstrap.min.css”))”>
<link rel=”stylesheet” media=”screen” href=”@routes.Assets.at(“stylesheets/main.css”)”>

<script src=”@routes.WebJarAssets.at(WebJarAssets.locate(“jquery.min.js”))”></script>
<script src=”@routes.WebJarAssets.at(WebJarAssets.locate(“bootswatch-cerulean”, “bootstrap.min.js”))”></script>
<script src=”@routes.Assets.at(“javascripts/app.js”)” type=”text/javascript”></script>
[/code]

Bootstrap : Bootstrap WebJar here

Bootswatch : Bootswatch full distribution as WebJars here

Now we know about client-side web libraries and these libraries are free for use. So we will use these libraries for the up coming tutorials. We would look at how we can make it more usable and readable, then we would be adding next tutorials related to Play Framework. If you have any question then feel free to comment on the same :) Stay tuned.