Sinatra, Mustache and Heroku – change of plans

Okay, I really like Mustache, it’s clean, it has a reasonably small set of options (conditionals, lists etc.) and has many implementations. One of them being javascript (Mustache.js).
So, i thought what about using Sinatra to generate JSON responses and serving templates, while the client is responsible for the representation. The benefit being a clean RESTful application and a deferred rendering process allowing to play with different options on caching JSON objects and exploring AJAX features.
And above all a fun project.
So, the basic idea:

  1. the root path “/” reads an index html file and hands it out
  2. navigation elements trigger to asynchronous AJAX requests (one for the template, one for the view)
  3. when both are finished mustache.js kicks in and renders the page (or parts of it)


get "/" do
  response ="index.html").read


var template = null;
var view = null;
var templateFinished = false;
var viewFinished = false;

function getTemplate(template){
  [...] xhRequest [...]
  if(request.readyState == 4){
            template = req.responseText;
            templateFinished = true;

function getView(view){
  [...] xhRequest [...]
  if(request.readyState == 4){
            view = req.responseText;
            viewFinished = true;

function process(){
  if(templateFinished == true && viewFinished == true){
	document.getElementById("content").innerHTML = Mustache.to_html(template,view);

So, in my case the rendered stuff replaces the content in the div with the id “content”. To elaborate on that one could pass the id of the element to be replaced as an option to the function and really play with this.

Sinatra, Mustache and Heroku

I’ve been playing around with Sinatra, in order to see how it would do in the wild I decided to use Heroku as a comfortable hosting solution.


Begin creating your Sinatra app. Add a Gemfile, since Heroku runs a bundle install.

Commit to git.

To deploy to heroku install the heroku gem and create an instance for your app by calling “heroku create”. By default, this is enough to get going if you want the application to be run under a subdomain (e.g. you can do so by adding the desired name to the create.

If you push your app to &quote;heroku master&quote; it should boot and be running. If it doesn’t look into the log-files by typing &quote;heroku logs&quote; in your Command line.


Mustache is a logic-less templating language derived from c-templates. Adding it to Sinatra is quite simple, install the mustache gem and add to your app.rb

require 'mustache/sinatra'
set :public => './public/'
register Mustache::Sinatra
require_relative 'views/layout'
set :mustache, {:views => './views/', :templates => './templates/'}

&quote;public&quote; holds static files like css. It works without explicitly setting it on my local machine but won’t do with Heroku, adding this fixes it.

It is important to include and provide the layout file since the engine looks for it.
The layout file includes the frame for all the views. For example:

<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="layout.css">
<div id="header">{{> _header}}</div>
<div id="main">{{{yield}}}</div>
<div id="footer">{{> _footer}}</div>

My layout shows a custom Title for each view, header and footer are partials.
You will need a view and a layout for every page. All views extend the layout if they use it:

class Codebrigade
  module Views
    class Index < Layout
       def title
           "Hello there"

Next steps are CouchDB and Sinatra integration…