Assets Support

CoffeeScript Logo LESS Logo Sass Logo React Logo Scala.js

First, add skinny-assets to libraryDependencies.

libraryDependencies ++= Seq(
  "org.skinny-framework" %% "skinny-framework" % "4.0.0",
  "org.skinny-framework" %% "skinny-assets"    % "4.0.0",
  "org.skinny-framework" %% "skinny-test"      % "4.0.0" % "test"
)

And then, add AssetsController to routes. Now you can easily use CoffeeScript, LESS and Sass.

// src/main/scala/Bootstrap.scala
class Bootstrap extends SkinnyLifeCycle {
  override def initSkinnyApp(ctx: ServletContext) {
    AssetsController.mount(ctx)
  }
}

AssetsController supports Last-Modified header and returns status 304 correctly if the requested file isn’t changed.

However, precompiling them is highly recommended in production (./skinny package does that).

CoffeeScript

CoffeeScript Logo

http://coffeescript.org/

Skinny tries to find the native compiler (npm install -g coffee-script) at first. If it’s absent, Skinny uses its own compiler on the Rhino JS engine. So you don’t need to prepare a CoffeeScript compiler in advance.

Easy to start! Just put *.coffee files under WEB-INF/assets/coffee:

# src/main/webapp/WEB-INF/assets/coffee/echo.coffee
echo = (v) -> console.log v
echo "foo"

You can access the latest compiled JavaScript code at http://localhost:8080/assets/js/echo.js.

LESS

LESS Logo

http://lesscss.org/

Skinny tries to find the native compiler (npm install -g less) at first. If it’s absent, Skinny uses its own compiler on the Rhino JS engine. So you don’t need to prepare a LESS compiler in advance.

Easy to start! Just put *.less files under WEB-INF/assets/less:

// src/main/webapp/WEB-INF/assets/less/box.less
@base: #f938ab;
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
}

You can access the latest compiled CSS file at http://localhost:8080/assets/css/box.css.

Sass

Sass Logo

http://sass-lang.com/

Sass is implemented in Ruby and it works on the Ruby runtime. You will need to prepare a Ruby runtime and Sass native compiler in advance.

And then, just put *.scss files under WEB-INF/assets/scss or WEB-INF/assets/sass.

If you use Sass Indented Syntax, put *.sass files under WEB-INF/assets/sass.

// src/main/webapp/WEB-INF/assets/scss/main.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}

You can access the latest compiled CSS file at http://localhost:8080/assets/css/main.css.

JSX for React

React Logo

http://facebook.github.io/react/

Skinny tries to find the native compiler (npm install -g react-tools) at first. If it’s absent, Skinny uses its own compiler on the Rhino JS engine. So you don’t need to prepare a JSX compiler in advance.

Easy to start! Just put *.jsx files under WEB-INF/assets/jsx:

// src/main/webapp/WEB-INF/assets/jsx/react-example.jsx
/** @jsx React.DOM */
React.renderComponent(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

You can access the latest transformed JS file at http://localhost:8080/assets/js/react-example.js.

Scala.js

Scala.js

http://www.scala-js.org/

Important notice!

Scala.js is still experimental! Although this is a project of LAMP/EPFL for which we will continue to provide best-effort improvements and bug fixes, it is not supported by Typesafe, and not part of any of their support contracts. You have been warned!

How to work with Scala.js

Easy to start!

Terminal A

Just invoke Skinny app.

./skinny run

Terminal B

Invoke Scala.js assets watcher process (which is similar to grunt watch).

./skinny scalajs:watch

Put Scala code into assets directory

Just put *.scala files under WEB-INF/assets/scala:

You can access the latest transformed JS file at http://localhost:8080/assets/js/application.js.

Or when using only scalajs:watch, it’s also possible to access src/main/webapp/assets/js/application-*.js directly.

Adding Other Compilers

If you need other script support, you can add compilers to AssetsController.

AssetsController: assets/src/main/scala/skinny/controller/AssetsController.scala

object TypeScriptAssetCompiler extends AssetCompiler {
  private[this] val compiler = TypeScriptCompiler()
  def dir(basePath: String) = s"${basePath}/ts"
  def extension = "ts"
  def compile(source: String) = compiler.compile(source)
}

class MyAssetsController extends AssetsController {
  registerJsCompiler(TypeScriptAssetCompiler)
}
object MyAssetsController extends MyAssetsController with Routes {
  get(s"${jsRootPath}/*")(js).as('js)
  get(s"${cssRootPath}/*")(css).as('css)
}

// src/main/scala/Bootstrap.scala
class Bootstrap extends SkinnyLifeCycle {
  override def initSkinnyApp(ctx: ServletContext) {
    MyAssetsController.mount(ctx)
  }
}

Working with Grunt

skinny-blank-app has a Gruntfile.js sample. You can run assets watcher right now.

See also: src/main/webapp/WEB-INF/layouts/default.ssp and src/main/webapp/assets/grunt/*.

npm install
npm install -g grunt-cli
grunt
If you find a typo or mistake in this page, please report or fix it. How?