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..

Advertisements

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