Building a Site With Sinatra — Part 1

DZone 's Guide to

Building a Site With Sinatra — Part 1

Sinatra is a Domain Specific Language (DSL) written using Ruby. It’s great for putting a site together quickly and a good introduction to using Ruby too. Let’s get stuck in!

· Web Dev Zone ·
Free Resource

Sinatra is a Domain Specific Language (DSL) written using Ruby. It’s great for putting a site together quickly and a good introduction to using Ruby too. Let’s get stuck in!

Setting Up

You are going to need a current version of Ruby installed. RVM is still the best way to get up and running, in my opinion. It’ll work if you are on a Mac or Linux. Windows users should use the RubyInstaller.

There are plenty of tutorials around the web explaining how to get Ruby installed. So, I won’t spend ages going through it here.

You will find some tips about running Rails on OS X El Capitan here. Although the post talks about Rails, there is some Ruby-related stuff there too.

If you are using a Mac, you will definitely need XCode installed. You can get it from the app store if you haven’t already.

Although OS X already has a version of Ruby, you’re still better off running RVM to get control over your Ruby versions.

To install Sinatra, you get on the command line and run this:

gem install sinatra

If RVM is installed correctly, you will see a bunch of stuff being installed. Google any error messages that come up if necessary, and then the fun can start...

Setting Up an App

There are various ways of setting up a directory structure for a Sinatra app. Here’s a way that always works:

App directory structure

The public folder is for assets like images and stylesheets. Using the public folder means that Sinatra will be able to do some clever stuff for you.

Let’s say you want to add a stylesheet of your own. All you need to do is this:

<link href="/styles.css" rel="stylesheet">

Sinatra will automatically look in the public folder for your stylesheet. Just as I said... clever, eh?

The file called main.rb is where all your code will go. The views folder will contain the stuff your users get to see.

Adding Bootstrap

There are Ruby gems you could use, but the easiest way is to add Bootstrap manually, just like you would with other frameworks. You do need some extra info, though.

First create a file in your views folder called: layout.erb (erb = embedded Ruby). Add whatever layout code you want to use, and then include the calls to Bootstrap and jQuery in the <head> as you would normally:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

When you have worked out where you want your content from the views to appear, add this:

<%= yield %>


Now, you need to create a view called home.erb. Add whatever HTML you would like to this file. Bear in mind that it will be fed into your layout in the yield point you’ve set.

In main.rb create an action like this:

require 'sinatra'

get '/' do
    erb :home

Running the App

Get back on the command line and run ruby main.rb.

You’ll see something like this:

[2015-12-30 17:18:25] INFO  WEBrick 1.3.1
[2015-12-30 17:18:25] INFO  ruby 2.2.1 (2015-02-26) [x86_64-darwin15]
== Sinatra (v1.4.6) has taken the stage on 4567 for development with backup from WEBrick
[2015-12-30 17:18:25] INFO  WEBrick::HTTPServer#start: pid=1327 port=4567

Now, you can point your browser to: http://localhost:4567 and see your Sinatra site up and running.

In the next post, we’ll flesh out the site a little and add more features.

ruby, sinatra

Published at DZone with permission of Andy Hawthorne , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}