Ruby

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:

image alt

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:

image alt

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!

Web dev
REST API Calls using SWIFT
eCommerce
Adding Payment Method VTex Store
Best Practices
De Código, Café y Cervezas 07 – ¿Somos profesionales?