Create an online webservice fast with Sinatra and Heroku

So you want to explore the posibitilies of the web, and you want to look the static HTML files served from a web server. Here is a short introduction to how you get a dynamic webserver up and running as fast as it gets utilising the Sinatra web-framework and the hosting provider Heroku. Heroku has already have gained cred in the developer society, and Facebook is now recommending Heroku as PaaS (Platform as a Service) when you create services. It is super-easy to get started, and comes with lots of instant gratification.


Sinatra and Rails

Sinatra is a lightweight web-framework using Ruby with Rack. I have earlier looked at Ruby on Rails, which is also a great framework based on the same platform. The main difference is the complexity of the two systems. Rails comes with a great Model-View-Controller structure, database mapper and lots of neat stuff, but sometimes you just want simplicity, and Sinatra got simplicity written all over. Yes, you may do a lot of advance things in Sinatra, and you can make something really simple in Rails, but why not harness the nature of these two frameworks. If you are going to make something complex and wants a strict convention-over-configuration approach go for rails, if you just want something really simple, clean and clear let’s get started with Sinatra.


I expect you to have ruby and it’s gem package version system installed. If not you will have to install these. I would recommend you to also look into RVM, so that you can have more ruby versions installed with their gems, and in this manner retain the software versions of your platform and gems when you upgrade other applications.

All you have to do is download the package ‘sinatra’. Just “gem install sinatra” into your shell and et voila. You now have installed Sinatra. You can verify this by opening the ruby in an interactive shell with the command ‘irb’, and then require the package “require ‘sinatra'” in the irb-terminal.

You will also need to install heroku. The process is as easy as installing sinatra. Just type “gem install heroku” into the shell.

You would also need to install git – the version controll system – and sign up for Heroku.

Installing Git

The version control system system Git is gaining a lot of momentum. The website Github is based around git, and Heroku uses it for pushing local files to the web server. A fun fact: Git has also inspired a TED speech by Clay Shirky. You can download Git from here.

Sign up for Heroku

Just like installing Git is easy, signing up for Heroku is even easier. Sign up through Heroku’s website and follow the instructions. You will also need to download a heroku gem which makes interaction through the terminal quick and easy.

You also need to create a pair of SSH-keys and exchange these with the server for authentication when you are uploading files. Here you find a tutorial for creating the keys.

Creating a Sinatra application skeleton

What makes Sinatra a very convenient tool is how lightweight it is, and still expendable. When you start you only need a couple of files, and from there you expand the application to accomodate the level of complexity you need. I like to use Sinatra with dead simple small applications.

To begin creating a Sinatra app, first create an empty folder. I use the computers Command Line Interface to use this (on a Mac this is called Terminal and can be found in the Utility folder). You can create a new folder by using mkdir command with the name of the folder-to-be as the only argument: ‘mkdir myfirstsinatraapp’

Navigate into this folder by using the cd command. For the most convenient *nix commands please see this introduction.

Put the Sinatra application under Git version control

In the folder, initialise git with the command “git init”. You now have an empty git repository.

Create the app

The only thing you will need to begin with is a, Gemfile file and an app.rb file. An easy way to create these are with the “touch filename” command where filename is the name of the desired file.

In the file, require the app.rb file, and call the “run Sinatra::Application” command. The file should look like this:

[sourcecode language=”ruby”]
require ‘./app’
run Sinatra::Application

The other file you would need to create is the app.rb. This file would act as your main file for your application. Where you can generate routes and fill them logic.local

At the top of the file, require sinatra and create a route to the index path:

[sourcecode language=”ruby”]
#!/usr/bin/env ruby
#encoding: UTF-8

require ‘sinatra’

get ‘/’ do
"Hello world"

The ‘/’ represents the root of your web-app, and once you go to this page you will be prompted with the text “Hello world”. Don’t take my word for it, try it yourself.

You will also need a Gemfile, in which you list the gems used by your application and where to get them. Since our application is super-simple we only need to list Sinatra. After writing and saving the gemfile. Install the gems by typing ‘bundle install’.

[sourcecode language=”ruby”]
source ‘’
gem ‘sinatra’

In the folder with your files, type “ruby app.rb“, this will start a web-server with your application. The default location is localhost:3456, but this will be prompted in the terminal. Open a web browser, and type in the address and port-number to your web-server. You should now see the plain text “Hello world”.

A very simple output
A very simple output

Commit and push your application to Heroku

To publish your application to Heroku you will need to add all files to the empty git repository we created above. Add all files with the command “git add .” (The dot represents the current directory). Check that all files are staged with “git status“. Commit the changes with “git commit -m ‘wohoo. going live’ “.

Now, all the code is in the git repository and ready to be uploaded to Heroku. Write “heroku create” into the shell. After the command is executed a URL to your service on heroku should have been created and displayed by the command, the command should also have created a remote repository in your git file. This is transparent to you as a user, but you can verify by typing ‘more .git/config’. A line with ‘[remote “heroku”]’ and a couple of lines under this should have been added.

When this is done, you are ready to push your code onto Heroku. Type ‘git push heroku master‘ to make your local code available from the internet. As you add files and alter code, add these to the git, commit and push them to Heroku.

Push your code onto your EC2 instance with Git

Here is a little thing that has saved me a lot of work, and which I find quite neat.

I use the EC2 as my cloud computer. This page ( is hosted on a shared host, but sometimes it’s nice to have the flexibility to run things that are not supported by shared hosts, such as custom software and all that jazz. When I try out different web-things that are not only front-end or PHP I usually create a subdomain and place the code on an EC2-instance after initial development on localhost.

Since I now use different environments for development I have found this neat way of pushing code  from my local computer to the server. This is a lot easier than using FTP, and is more flexible than deploying to Heroku (which is – by the way – a brilliant super-easy way of hosting and deploying).

The idea is very similar to that used by Heroku, except that the setup is more complex and the good terminal tool is lacking. On the other hand it gives you greater flexibility to run your own instance and it may also be more affordable if you plan to make your code into a business with much traffic.

Don’t know what git is, or don’t have git installed. Github has some great documentation on installation and Git on what git is.

Setting up the Git-repositories

Locally I initialise a git repository in the folder I am working.

local $ cd the-amazing-test-project
local $ git init

Then I use SSH to connect to my cloud computer where I have a folder for remote git repositories (I store these in a sibling-folder to the root folders of my projects.)

remote $ cd git-repos
remote $ mkdir testrepo.git
remote $ cd testrepo.git
remote $ git init --bare

When this is done, we need to create a remote-link from the local repository, and create a post-update hook at the remote repository. This will make you able to push the code from the local git-repo onto the server and from there unpack the code and do other neat things like logging and restarting of servers (if necessary).

The cloud instance as remote repository

So now you have a local repository on which you work, commit and track your local files, and you have a bare repository in the cloud. Let’s make the bridge.

local $ git remote add web ssh://

Create an empty file in the local directory, use

git add .

to add this file to repository, commit the changes to the git repository:

git commit -am "Initial test"

Now you could push the repository to the clouds using:

git push web master

If you get an error message. Make sure that you have added the keys used to connect to the remote host to your ssh-keys. If not, you could use ssh-add to do this. Call the command ssh-add with the key as the only argument.

If you still experience problems. Enter the local repository with your terminal and then change to the .ssh directory where you will find a file named config. This content of the file should be something similar to this:

repositoryformatversion = 0
filemode = true
bare = false
logallrefupdates = true
ignorecase = true
precomposeunicode = false
[remote “web”]
url = ssh://
fetch = +refs/heads/*:refs/remotes/origin/*

Add a hook for deployment

Once you have a connection between the local and remote repository, we need to make a way for the remote repository to deploy our code and not just keep it safe and sound. Connect through ssh to the terminal of your remote computer and change into the git-repos directory and your testrepo.git folder.

Within this folder you should have a folder with hooks, and it is here we are going to add the last pieces of code to get our system up and running. We will utilize the server-side hook post-update to deploy our code and do other tasks needed. The post-update hook is a shell script which git executes after receiving a push. Add to this the following code:

GIT_WORK_TREE=/home/www/amazing_web git checkout -f

echo "the_amazing_web_project checkin at: <$(date)> " >> /home/www/logs/updates_log

The second line in this code excerpt will extract the data (when adapting this snippet, make sure the path after the equal sign is created), and the fourth line will add to a logfile the name of the project and the date.

You can now commit code to your remote server easy, and if you need to do any changes like rebooting the web-server you can add the code to the post-update script.

Start with Ruby on Rails

Over the last two months I have been looking into a new way of doing web-development, and found an ingenious timesaver in the relatively new and popular framework Ruby on Rails.

It all started as I wanted to add some back-end functionality to some of the technologies I have experimented with on Front-end development is exiting with new super-fast Javascript engines, expanded possibilities with the new CSS3 implementation, and easy-to-use frameworks such as Processing.js and jQuery. It is fun to make the pages pretty and and animations, but with expanded and more intelligent functionality it’s getting even more fun and with Ruby on Rails you can make a little application in just hours.

Ruby on Rails is a web-framework built on the very flexible language Ruby. It is based on a few very useful mantras such DRY – don’t repeat yourself –, and convention over configuration. If you have made any applications for the web you probably know that much of what you do goes into a pattern. With Rails you can rely on automatic creation of many of these tasks and just focus on the important stuff.

If you have designed a computer system earlier you have probably tried to stay true to the division between the Model, the View and the Controller. By distributing the responsibility throughout the code you can make something which is understandable for others, or future you, and prevent many of the pains a disorganised computer system may bring. Rails make this easy by having a strict folder structure. Once you create a new project you will always find the functions in their designated folders.

Installing Ruby on Rails is quite easy, and with the Ruby package-system Gem you can easily harness from the many hours people have spent adding functionality and interfaces to many of the interesting technologies and platforms which have emerged on the Internet. Geocoding, Twitter, Facebook, YQL and more is easy to use with Rails. By having software controlled by a package-system upgrades are made very easy and if you’re afraid of getting deprecated sometime in the future you may also freeze what versions you want to ship with your application.

You find great instructions on how to install both Ruby and Rails by using Google. As much of the functionality is initialised through a command line I would recommend you to use the Terminal on a Mac, or a taste of the various UNIX or Linux flavours available. If you are a Windows user, you can get access to an emulated Linux system through Cygwin.

If you really want to see what powers the “new” Internet provide today – in form of getting things done very quick and agile – make a couple of scaffolding-projects (a command to Rails which creates a controller with RESTful methods to a Model), put them under git version control, and push the code onto GitHub and Heroku. You can make something very cool very fast, and very cheap or even for free.

I don’t know whether this post is a ‘seller’, but if you think it could be interesting to try out something cool go onto the Ruby on Rails webpage and do a quick tutorial. If you think it is interesting a lot of resources are available online, and if you prefer screencasts there are some at iTunes and have also made two tutorials you can follow.

Go, make!


PS: This is just a very short ‘Have you heard about?’-post. I will try to write some hints and tricks later.