DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Building a Site With Sinatra — Part 1

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!

Andy Hawthorne user avatar by
Andy Hawthorne
·
Jan. 11, 16 · Web Dev Zone · Tutorial
Like (1)
Save
Tweet
7.63K Views

Join the DZone community and get the full member experience.

Join For Free

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:

[erb]
<%= yield %>
[/erb]

main.rb

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
end

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.

Sinatra (software)

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

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • 6 Quick Tips for Building an App
  • Privacy and the 7 Laws of Identity
  • What Is Cloud-Native Architecture?
  • Take Control of Your Application Security

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo