I do mostly backend & mobile development, but am very interested in the direction the web is going. I decided to follow the basic React tutorial from Facebook and implement it using Play Framework and, most crucially, WebJars. It took me quite a few hours to get the whole thing working together, so I’m now writing about hoping to help someone else.
WebJars are client-side libraries packaged into JAR files, ready to be included in any JVM based project. They are available on Maven and therefore accessible via most build tools such as Maven, Gradle or SBT. The Play Framework offers support for WebJars, but getting it all to work wasn’t as smooth. Let’s go!
First of all, setup a new basic Play application using Activator:
play-scala as starting point and fire up your development tools. I personally favor IntelliJ with the Scala plugin, which allows you to import the project from an external SBT module.
The first thing you want to do with a view on using WebJars is import the webjars-play helper library in your
I found it very helpful as it allows you to dynamically locate the libraries you will import. To use this feature, you need to add a new line to your
At this point we’re ready to import React in our
build.sbt file. As simple as adding
plugins.sbt in your
project folder and add
Go back to
build.sbt and enable the
SbtWeb plugin by adding it next to the Play plugin:
Note: after changes in
plugins.sbt, you most likely need to reload the project; the simplest way is to use the
reload command from the sbt console. Otherwise, just close and rebuild the project from command line (that is, launch
activator in the project folder and then
Now we’re all set to start following the Facebook tutorial. Create your own view in the
views package or modify the existing
index.scala.html. Whichever you choose, add the
react.js library. It should look like this:
.fullpath call in the
react inclusion. This is needed as there are two instances of
react.js in the React library, so we need to specify its position to the locator; see this question on StackOverflow. As my personal advice, use single quotes in the
<script> tags; double quotes might mess up your paths.
Proceed with the tutorial. When the moment comes to create your JSX file, create first a new package
assets inside the package
app and a package
reactTest.jsx (note the
Also, you will need to include this file after the definition of your “content”
div. This is because the content of such script will resolve directly in DOM elements. Including this file in the
<head> section would result in a runtime error. Our
<body> will look like this:
Proceed with the tutorial. Don’t forget to
run your server in between steps to check how it is going!
At some point, the tutorial will point you to the
and reference it from your HTML file as
As you code through, at some point it will ask you to generate content from a server. We’re working with Play, so again: nothing easier! Add an endpoint in the
and the corresponding data source and endpoint in
This is also when you are required to reference jQuery. Like for the other libraries, add to your
and to the HTML file the following:
From your JSX code, point here when this data is needed. Assuming you’re running locally, the url will be
http://localhost:9000/comments. Later on, when you’ll need to implement the server-side logic to add a comment to the list, you can create an endpoint like this
and the code in
The Ajax call to this from your JS file will look like this:
Finish the tutorial and your service will be complete. Modular and reactive like never before! The code for this project is available here on GitHub.