Integrating Twitter Bootstrap with Play 2.0 using Scala


We spent more than a few hours in getting the boostrapping right for Play 2.0 RC3 and twitter bootstrap. Following is a summary of steps we followed and some pitfalls that we encountered.

For starters, you can start by having a look to the sample play application for a todo list.

Here we are going to discuss about the twitter bootstrap integration using ‘Build.scala‘ file.

1. Create a folder say ‘assets/stylesheets/bootstrap‘ under you app folder and copy all the bootstrap’s less file in to this.

2. Modify the ‘project/Build.scala‘ file for filtering out the Bootstrap LESS files we don’t want to compile.

def customLessEntryPoints(base: File): PathFinder = (
    (base / "app" / "assets" / "stylesheets" / "bootstrap" * "bootstrap.less") +++
    (base / "app" / "assets" / "stylesheets" * "*.less"))

The above mentioned code is the resolver function for setting the build path. This will result into the compilation of the “stylesheets/bootstrap/bootstrap.less” and all the ‘*.less’ files under the “stylesheets/bootstrap/”.

3. Override the default lessEntryPoints with the new function as

 val main = PlayProject(appName, appVersion, appDependencies, mainLang = SCALA).settings(
    lessEntryPoints <<= baseDirectory(customLessEntryPoints))

4. Now Include the ‘bootstrap.min.css‘ file in your view(s):

 <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/bootstrap/bootstrap.min.css")" />

5. Now run your project and hit the localhost:9000, you will find your ‘bootstrap.css‘ file within your target directory.

Note :- One thing you must have to look is that you will find your ‘bootstrap.css‘ file after running the project and hitting your localhost.

Find More..

About Neelkanth Sachdeva

Project Manager @ eCIFM Solutions Inc. Previous : Senior Software Engineer @ Evernym Inc. Previous : Software Consultant @ Knoldus Software LLP Software Consultant @ Inphina Technologies
This entry was posted in Scala, Web. Bookmark the permalink.

4 Responses to Integrating Twitter Bootstrap with Play 2.0 using Scala

  1. Don’t you mean “customLessEntryPoints(baseDirectory)” instead of “baseDirectory(customLessEntryPoints)”?

  2. Okay, that’s clearly wrong. Please delete previou comment.

  3. aakture says:

    I’m using Play2 v 2.1.1, and it looks like this is how you need Build.scala:

    val main = play.Project(appName, appVersion, appDependencies).settings(
    lessEntryPoints <<= baseDirectory(customLessEntryPoints)
    )

  4. aakture says:

    for Play 2.1.1, i think this this the updated Build.scala (i got a warning using the code above)
    val main = play.Project(appName, appVersion, appDependencies).settings(
    lessEntryPoints <<= baseDirectory(customLessEntryPoints)
    )

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s