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!
Join the DZone community and get the full member experience.
Join For FreeSinatra 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 sinatraIf 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:
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
endRunning 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=4567Now, 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.
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.linkDescription }}
{{ parent.urlSource.name }}