Sinatra + Furatto

I have been working with Rails for a while now, and it plays really well with a bunch of other technologies, such as SASS, Coffeescript and some others.

They just work out of the box, and your development is really smooth, but what happens when Rails becomes a huge stack for your next web project.

Currently I'm working on a mobile web app which connects to a JSON api and delivers the content to the end user. In this particular scenario I was just concerned about the user interface because we already had a ruby library to parse the json output.

After some searching I remembered about Sinatra, which is a DSL for quickly creating web applications in Ruby with minimal effort. I started really small, by defining some routes and adding basic html code, just to make sure I was understanding everything.

Integrating Furatto

I'm the core commiter from Furatto a lightweight & friendly front-end framework to get job done., so I wanted to integrate it into the project.

I wanted my Sinatra app to behave somehow like the Rails asset pipeline, I did not want to compile my assets each time a change was made, or to compile it with the watch option that comes along with Sass, it seems to me like a lot of work.

Also Furatto depends on some Compass mixins, and for some reason by just adding the gem into the Gemfile and follow some configuration instructions did not seem to work either, or at least as I wanted them to.

The setup

Finally and after some hours and protein bars, I made it work and I'm really happy with what I just put together.

First I created a folder with the app name:

$ mkdir awesomeWebApp
$ cd awesomeWebApp

Then inside of it I added some other directories:

$ mkdir config public sass views

Let me go through each of this directories, to explain its purpose.


The intention for this directory is to add any configuration file for the project, such as the compass configuration.


This is where all the compiled javascript and css assets are going to be placed so the app can serve them.


This is where all the sass files are located


All the views for the sinatra app, along with the layout.

To handle all the dependencies I used a Gemfile, that may look like:

source ''

ruby '2.1.2'

gem 'compass'  
gem 'sinatra'

gem 'sass'  
gem 'rack-coffee'  

Using Rack

To run the app along with all the configurations I used Rack to keep my application.rb file as clean as possible.

require 'rubygems'  
require 'bundler'  
require 'sinatra'

require 'sass/plugin/rack'  
require 'compass'  
require './application'

root = ::File.dirname(__FILE__)

# Compass
Compass.add_project_configuration(root + '/config/compass.rb')  

# Middleware
use Rack::ShowStatus      # Nice looking 404s and other messages  
use Rack::ShowExceptions  # Nice looking errors  
use Sass::Plugin::Rack    # Compile Sass on the fly

# use scss for stylesheets
Sass::Plugin.options[:style] = :compressed  
use Sass::Plugin::Rack

# use coffeescript for javascript
use Rack::Coffee, root: 'public', urls: '/javascripts'

run Sinatra::Application  

I created a repository on github out of this bundle, so it can easily be cloned and reused, I find it really useful.


Sinatra is your friend, I really want to pay more attention to this project and probably collaborate on it later.

If you are a Rails developer, try not to stick to it and explore some other stacks out there, it can seem like a lot of work at first, but it will make your life easier as a developer to understand other web technologies out there.