Use WebJars in Scalatra Project

As I’m working with my first Scalatra project, I automatically think of using WebJars to manage Javascript library dependencies, since it’s more convenient and seems like a good practice. Though there’s no official support for Scalatra framework, the installation process is not very complex. But this doesn’t mean I didn’t spend much time on this. I’m still a newbie to Scala, and there’s only a few materials on this subject.

Add WebJars Dependency in SBT Build File

Scalatra uses .scala configuration file instead of .sbt, so let’s add dependency into project/build.scala. Take Dojo for example.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
object DwExplorerBuild extends Build {
...
lazy val project = Project (
...
settings = Defaults.defaultSettings ++ ScalatraPlugin.scalatraWithJRebel ++ scalateSettings ++ Seq(
...
libraryDependencies ++= Seq(
...
"org.webjars" % "dojo" % "1.9.3"
),
...
)
)
}

To view this dependency in Eclipse, you need to run sbt eclipse again. In the Referenced Libraries section, you can see a dojo-1.9.3.jar, and the library lies in META-INF/resources/webjars/.

Add a Route for WebJars Resources

Find the ProjectNameStack.scala file and add the following lines at the bottom of the trait:

1
2
3
4
5
6
7
8
9
10
11
12
13
trait ProjectNameStack extends ScalatraServlet with ScalateSupport {
...
get("/webjars/*") {
val resourcePath = "/META-INF/resources/webjars/" + params("splat")
Option(getClass.getResourceAsStream(resourcePath)) match {
case Some(inputStream) => {
contentType = servletContext.getMimeType(resourcePath)
IOUtil.loadBytes(inputStream)
}
case None => resourceNotFound()
}
}
}

That’s it! Now you can refer to the WebJars resources in views, like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#set (title)
Hello, Dojo!
#end
<div id="greeting"></div>
<script type="text/javascript" src="${uri("/webjars/dojo/1.9.3/dojo/dojo.js")}" data-dojo-config="async: true"></script>
<script type="text/javascript">
require([
'dojo/dom',
'dojo/dom-construct'
], function (dom, domConstruct) {
var greetingNode = dom.byId('greeting');
domConstruct.place('<i>Dojo!</i>', greetingNode);
});
</script>

Some Explanations on This Route

  • /webjars/* is a Wildcards and params("splat") is to extract the asterisk part.
  • resourcePath points to the WebJars resources in the jar file, as we saw in Eclipse. It is then fetched as an InputStream with getResourceAsStream().
  • servletContext.getMimeType() is a handy method to determine the content type of the requested resource, instead of parsing it by ourselves. I find this in SpringMVC’s ResourceHttpRequestHandler.
  • IOUtil is a utiliy class that comes with Scalate, so don’t forget to import it first.

At first I tried to figure out whether Scalatra provides a conveniet way to serve static files in classpath, I failed. So I decided to serve them by my own, and this gist was very helpful.

Anyway, I’ve spent more than half a day to solve this problem, and it turned out to be a very challenging yet interesting way to learn a new language, new framework, and new tools. Keep moving!