Sprockets + Sinatra

Integrating Sprockets and Sinatra is easy because Sprockets is Rack-based. Let's do a simple example focusing on:

1. Creating a simple Sinatra application
2. Being able to use CoffeeScript and Sass.

1. Create a simple Sinatra application

First, let's declare our gems in a Gemfile:

source 'https://rubygems.org'
ruby '2.1.0'

gem 'haml'
gem 'sinatra'

And then our application.rb file:

require 'bundler'

Bundler.require :default

set :root, File.realpath(File.dirname(__FILE__))

get '/' do
  haml :index
end

Finally our single view views/index.haml:

!!!
%html
  %head
    %meta{content: "text/html; charset=utf-8", "http-equiv" => "content-type"}/
    %title Test Application

  %body
    .box
      Hi there

      .red

Now run:

bundle
bundle exec ruby application.rb

And point your browser to http://localhost:4567, you should see:

2. Being able to use CoffeeScript and Sass.

First, add the required gems to your Gemfile:

source 'https://rubygems.org'
ruby '2.1.0'

gem 'haml'
gem 'sinatra'

gem 'coffee-script'
gem 'sass'
gem 'sprockets'

Now add the Sprockets core, which is a Sprockets::Environment, and tell it where to find your assets directory, put this in my_assets.rb:

module MyAssets
  def self.environment root_path
    environment = Sprockets::Environment.new root_path
    environment.append_path 'assets'
    environment
  end
end

In a development environment you want to serve non-compiled individual assets, Sprockets has a built-in Sprockets::Server for this purpose. This means that we just need to map it to some URL, update your config.ru with this content:

require_relative 'application'
require_relative 'my_assets'

unless ENV['RACK_ENV'] == 'production'
  map '/assets' do
    run MyAssets.environment Sinatra::Application.settings.root
  end
end

run Sinatra::Application

And add the styles and javascripts to your view views/index.haml:

!!!
%html
  %head
    %meta{content: "text/html; charset=utf-8", "http-equiv" => "content-type"}/
    %title Test Application
    %link{href: '/assets/application.css', rel: "stylesheet"}/

  %body
    .box
      Hi there

      .red

    %script{src: '/assets/application.js' }

Now declare the manifest file assets/application.js:

//= require js/do_some

DoSomething.now()

And assets/application.css:

//= require css/do_some

Finally declare some styles in assets/css/do_some.scss:

body .box {
  color: #00ff00;
  width: 97%;

  .red {
    background-color: #ff0000;
    color: #000000;
  }
}

And some Javascript in assets/js/do_some.coffee:

class @DoSomething
  @now: ->
    document.getElementsByClassName('red')[0].innerHTML = 'Check me out!'

And we are done, run:

bundle
bundle exec rackup

Then open http://localhost:9292/ and you should see this:

Conclusion

It is quite easy to integrate Sprockets and Sinatra, if you want to write less code you will probably prefer the Sinatra::AssetPipeline gem.

Look at the source code example here.

Or for a more complete example that includes assets precompilation check this Rakefile, its view helpers and its usage.

Have fun implementing it!