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:
- The WebJar needs to be a dependency of your application
- The WebJar needs to be in your application’s running CLASSPATH
- 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:
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:
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:
To use Play 2’s reverse routing to resolve the URL to an asset you can do the following in a template:
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.