Sinatra is a lightweight domain-specific programming language and web application library that is used for writing web applications. It provides a faster and simpler alternative to Ruby frameworks such as Ruby on Rails. Sinatra is written in Ruby and the code for Sinatra applications will be written in Ruby too. Sinatra routes browser requests to code that can handle those requests. Then it will render templates back to the browser as a response. For more information on Sinatra, refer to the official documentation
In order to use Sinatra, we’re going to need three pieces of software installed: Ruby, RubyGems, and Sinatra. Sinatra depends on having Ruby and RubyGems.
The easiest way to install Ruby and RubyGems is using the Ruby Version Manager (RVM). RVM allows you to have multiple Rubies, with their own sets of gems (gemsets), installed.
1 . (Optional) Install nodejs
, gunpg2
and curl
. When using Rails, is is required to install Node.js. The asset pipeline compiler of Rails requires a Javascript runtime. The version of Node.js
being installed does not matter. If you do not use Rails, skip this and proceed to the next step.
apt install nodejs gunpg2 curl
2 . Import the signing key to be able to verify the RVM packages downloaded in the later step
gpg2 --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB
3 . Install Ruby Version Manager along with a stable Ruby version
\curl -sSL https://get.rvm.io | bash -s stable
4 . Update you shell environment to be able to access Ruby
source /usr/local/rvm/scripts/rvm
5 . Confirm that Ruby is installed
ruby -v
ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-linux]
Install Sinatra just as any other gem
gem install sinatra
which returns
Successfully installed sinatra-2.0.5
Parsing documentation for sinatra-2.0.5
Done installing documentation for sinatra after 1 seconds
1 gem installed
1 . Create a new file that you can call testapp.rb
nano testapp.rb
2 . Paste the following
require "sinatra"
get "/" do
"OMG, a big HELLO to my first app with Sinatra!"
end
3 . Run your little app. The parameter -o 0.0.0.0
will bind the application to all interfaces of the server. Without this parameter it will only be accessible from your localhost.
ruby testapp.rb -o 0.0.0.0
[2018-08-17 09:40:22] INFO WEBrick 1.4.2
[2018-08-17 09:40:22] INFO ruby 2.5.1 (2018-03-29) [x86_64-linux]
== Sinatra (v2.0.3) has taken the stage on 4567 for development with backup from WEBrick
[2018-08-17 09:40:22] INFO WEBrick::HTTPServer#start: pid=31619 port=4567
The response tells us the port that it’s running on. This time it’s 4567
.
4 . Point the browser to http://server-IP:4567
Calls to methods like get
, post
, put
, and delete
are called routes in Sinatra. They take a path, and a block that handles a request. The request is being taken over by the web server, routed to a piece of code that handles the request and then specifies the response.
In the example above, The get ‘/’ do
part of the code is very important. It is telling what to do when getting a slash, if there is no specified path in the URL after the port.
1 . Update the testapp.rb
file to match the following
require "sinatra"
get "/" do
"OMG, a big HELLO to my first app with Sinatra!"
end
get '/index' do
"Welcome to the index. It will help you find the information you need"
end
2 . Run your little app
ruby testapp.rb -o 0.0.0.0
As you notice, when adding the /index
after the port number, the webpage displays the message entered in the testapp.rb file.
3 . Change the get / do
route to the following
get '/' do
redirect to('/index')
end
The redirect to
sends the user to the index page. You can use redirect
to move your users anywhere around your website.
Embedded Ruby, also known as ERB file (Embedded RuBy file), is a file type that enables writing HTML and embed Ruby code in it. Embedded Ruby tags are placed inside the html tags – Use <% %>
tags to execute Ruby code or <%= %>
to print out HTML.
Taking the same example as above, we will play a little more with the index. In the rb
file paste the following:
get '/index' do
@songs = [{title: 'Charles Trenet, Le mer', url: "https://www.youtube.com/watch?v=qEkd1qWonj8"},
{title: 'Edith Piaf, Non je ne regrette rien', url: "https://www.youtube.com/watch?v=t6wjCcWC2aE"},
{title: 'France Gall, Poupée de cire poupée de son', url: "https://www.youtube.com/watch?v=rRva0YOVtcI"},
]
erb :default
end
If you are familiar with Ruby, the []
are used to create an array or a list, to iterate easily through.
Each item in the @songs
array is called a hash and is denoted by {}
.
In a hash items are stored in key/value pairs, enabling the access to a value by its key.
The last line is redirecting to an ERB file which automatically looks for a file called default.erb
in our views folder. If you did not create this earlier, do so now.
1 . Create a new directory. We will call it views
.
mkdir views
2 . Edit a the default.erb
file in this directory
nano views/default.erb
3 . Paste the following
<head>
<title>Famous French Chansons</title>
</head>
<body>
<h1>A list of the most loved chansons ever</h1>
<% @songs.each do |song| %>
<h3> <%= song[:title] %></h3>
<p> <a href="<%=song[:url]%>"> Video </a></p>
<% end %>
</body>
Inside the first erb tags (<% %>
) the each
method on our @songs
array is called. This enables going through ‘each’ item in the array, and then inside the pipes, each item is reffered as |song|
.
Then create a header (<h3>
) tag for each song and place the song title inside the header. As each song is actually a hash, it is possible refer to each value by its key (song[:title]
/ song[:url]
).
Open a paragraph (<p>
) tag, and enclose an anchor (link) (<a>
). The href attribute of the anchor tag tells where to direct the link. To redirect to the url of the song, use another group of erb
tags to get the desired information out of the @songs
array and song hash.
4 . Run your app
ruby testapp.rb -o 0.0.0.0
which displays
Route method names correspond to HTTP 1.1 request method names to make things easier to remember.
Note: Routes are matched in the exact order that they are defined in your code, this means that second route in the below example will never get matched because we have the exact same pattern further up in the code.
get()
- Performing basic HTTP GET requests like loading pagespost()
- Used when posting form dataput()
- Used when updating resourcespatch()
- Similar to post(), but used when updating one field of a resourcedelete()
- Used when deleting resourcesoptions()
- Determine options available for an associated resourcelink()
- Link relationships between existing resourcesunlink()
- Unlink relationships between existing resourcesWhen building user facing web application, you’ll be using get()
and post()
methods the majority of the time.