This page is a work in progress.You can help improve it. →

Building Web Applications with Sinatra

Making our first web app


  • Gem for producing web applications

  • Install with gem install sinatra sinatra-contrib

  • Initial sinatra (hello world) app

    require 'sinatra'
    get '/' do
    "Hello, World"
  • Breaking down the sinatra code require 'sinatra' - require the sinatra library get '/' do - defines a block of code to run whenever we GET the / URL "Hello World" - Whatever the block returns returns becomes the body of the page

  • Let's make an APP

    require 'sinatra'
    require 'sinatra/json'
    get '/' do
    json ['hello', 'world']

Parsing parameters

  • How can we send information to our application

  • Simplest way is via query parameters

  • We can tack these on to the end of our URLS: http://localhost:4567?item=3

    ITEMS = [
    "Pick up laundry",
    "Finish Homework",
    "Cook Dinner",
    "Read Book",
    get '/item' do
    number = params["number"].to_i
    json item: ITEMS[number]
  • Can also supply them in the URL

    get '/items/:id' do
    id = params["id"].to_i
    json item: ITEMS[id]

Let's put or items into a database

  • Combining SQL + activerecord + sinatra

  • Let's add the 'activerecord' gem to our sinatra app

  • require 'active_record'

  • Let's create a database:

    createdb items
  • Then lets create a table to store our items. We'll name the column text to store the text of the item. We'll also add a boolean to mark if it is complete.

    CREATE TABLE items(id serial, text text, complete bool);
  • Let's update our app to show us the items in our database

    require 'active_record'
    require 'sinatra'
    require 'sinatra/json'
    adapter: "postgresql",
    database: "items"
    class Item < ActiveRecord::Base
    # Get one item
    get '/items/:id' do
    item_from_database = Item.find(params["id"])
    json item: item_from_database
  • Then lets create an endpoint to show all the items

    # Get all the items
    get '/items' do
    all_items = Item.all
    json items: all_items
  • Let's add an endpoint to create a item

    # Create one item
    post '/items' do
    item_params = params["item"]
    new_item = Item.create(item_params)
    json item: new_item
  • And an endpoint to update a item

    # Update a item
    put '/items/:id' do
    item_params = params["item"]
    existing_item = Item.find(params["id"])
    json item: existing_item
  • And an endpoint to delete a item

    # Delete a item
    delete '/items/:id' do
    deleting_item = Item.find(params["id"])
    json item: deleting_item

Disabling CORS to allow a React front end to connect to this app

  • First install this gem:
gem install rack-cors

Then add this code before our first get/post/put/delete

# Allow anyone to access our API via a browser
use Rack::Cors do |config|
config.allow do |allow| '*'
allow.resource '*'

This is the beginning of our introduction to the concepts of REST (REpresentational State Transfer)

Tired of stopping and starting Sinatra after each code change?

  • Install the sinatra-contrib gem and use the reloader it provides
    • gem install sinatra-contrib
    • require 'sinatra/reloader' if development?
© 2017 - 2021; Built with ♥ in St. Petersburg, Florida.