Tips - Hocdoc/Play20 GitHub Wiki

Play 2.0 tips and tricks

To use Play Framework 2 with Twitter Bootstrap 2:

Renaming the Bootstrap include files

  • Build Play from trunk (2.1-SNAPSHOT) (Since less version has been updated to 1.3)
  • Copy bootstrap's less files into app/assets/stylesheets/bootstrap
  • Add bootstrap/_ before each bootstrap.less import declaration and rename each file the same way ( This is the convention to not compile theses files while packaging compiled assets )
  • Move bootstrap.less file into app/assets/stylesheets

This can be done with a script like this (run in app/assets/stylesheets/bootstrap)

    for a in *.less; do mv $a _$a; done 
    sed -i 's|@import "|@import "bootstrap/_|' _bootstrap.less 
    mv _bootstrap.less ../bootstrap.less
    sed -i 's|@import "|@import "bootstrap/_|' _responsive.less 
    mv _responsive.less ../bootstrap-responsive.less

Alternative: using the Build.scala configuration file

  • Copy bootstrap's less files into app/assets/stylesheets/bootstrap

  • Modify the project/Build.scala file to filter out the Bootstrap LESS files we don't want to compile:

  • Define a new BuildPath resolver function:

    // Only compile the bootstrap bootstrap.less file and any other *.less file in the stylesheets directory
    def customLessEntryPoints(base: File): PathFinder = (
        (base / "app" / "assets" / "stylesheets" / "bootstrap" * "bootstrap.less") +++
        (base / "app" / "assets" / "stylesheets" * "*.less")
    )

Note: this will only compile stylesheets/bootstrap/bootstrap.less and stylesheets/*.less files. If you have any other LESS files in other subdirectories under stylesheets; adjust the function accordingly.

  • Override the default lessEntryPoints setting key with the new function:
    val main = PlayProject(appName, appVersion, appDependencies, mainLang = JAVA).settings(
        lessEntryPoints <<= baseDirectory(customLessEntryPoints)
    )

In both cases...

  • Include the bootstrap.min.css file in your view(s):
<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/bootstrap/bootstrap.min.css")" />
  • Move the bootstrap 'img/' directory to somewhere in $PROJECT_ROOT/public/images/ and change @iconSpritePath and @iconWhiteSpritePath in variables.less (or _variables.less) to point there.
    • For example, if you move the images to $PROJECT_ROOT/public/images/bootstrap/, the variables become:
@iconSpritePath:          "/assets/images/bootstrap/glyphicons-halflings.png";
@iconWhiteSpritePath:     "/assets/images/bootstrap/glyphicons-halflings-white.png";
  • Include all the JavaScript files. Run this from your assets directory to get the code necessary to include all of the JavaScript files. Add the output of this command to the bottom of your template, before the </body> tag:
for i in `ls javascripts/*`; do echo '<script src="@routes.Assets.at("'$i'")"></script>' | sed 's/\.js/.min.js/g'; done

MongoDB

When using Salat, make sure to disable SQL evolutions in your application.conf via evolutionplugin=disabled or you will run into inexplicable ClassCastExceptions.

⚠️ **GitHub.com Fallback** ⚠️