This course will be retired on June 1, 2025.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
We'll talk about how Sinatra can help you create web apps. Then we'll show you how to create and run a simple app.
If you'd like to know more about Ruby Gems and how they're installed, check out our RubyGems course.
We showed you how to set Sinatra's :bind configuration option in this video, but that's just one of many options. If you'd like to learn about the rest, here's the official documentation.
Troubleshooting
Here are some possible problems you might encounter, along with potential solutions for each. If you can't solve your issue with what's here, use the link on this page to ask a question in our Community forum.
"Workspace Unavailable":
- Either the server isn't running, or your browser can't connect to the preview using the current options.
- Did you add
set :bind, '0.0.0.0'within your application code? - Did you start the server from the console?
No "Port 4567" option in Workspace Preview menu:
- Previewing particular ports isn't available in some Workspace environments. Copy your code to a new Workspace based on the Ruby environment, and you should have the "Port 4567" option.
"This site can't be reached":
- Did you start the server from the console/terminal?
- Did you specify the port when typing a URL into your browser?
"Sinatra doesn't know this ditty":
- You're connected to the server, but Sinatra doesn't know how to handle your request.
- Did you make a typo in the URL?
- Did you make a typo when specifying the path in your code?
"Someone is already performing on port 4567.":
- Another app, possibly another Sinatra app, has already claimed port 4567 on your machine.
- Look for any other terminal windows that might be running a Sinatra app. If you find one, press Control-C to halt the app and free up the port.
- Try specifying a different port when you run your app. To run on port 4568, for example, use "
ruby myapp.rb -p 4568".
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
When you type in the address bar of
your browser, you're entering that URL.
0:00
Ones that you click also contain URLs.
0:04
Those URLs include
the address of a web server
0:07
which is another computer on the network
that delivers web pages to browsers.
0:10
URLs also include the name
of a particular thing,
0:14
resource that you want from the server.
0:17
Your browser sends a request for that
particular resource to the Web server.
0:20
The server's job is to get
the appropriate resource and
0:25
send it back to the browser in a response.
0:27
One way that the server can generate
such a response is to send it to
0:31
a Web Application.
0:34
The application needs
to parse the request,
0:35
find the name of the resource being
requested, generate HTML content, and
0:38
insert that HTML into a response for
the server to send back.
0:42
That's a lot of steps.
0:46
That's why web frameworks
like Sinatra exist.
0:48
Sinatra will handle parsing the request
and generating the response for you.
0:50
Then, all you have to do is write
the code that will generate HTML content.
0:55
And thanks to Sinatra's template system,
generating HTML is easy, too.
0:58
Let's try installing Sinatra now.
1:03
You'll need a working Internet
connection for this step.
1:05
Note that you can also use
workspaces with Sinatra.
1:08
If you are using workspaces,
there's no need to install Sinatra there.
1:10
It's already pre-installed for you.
1:14
The Sinatra library is
distributed as Ruby gem.
1:16
If you're not familiar with gems,
check the teacher's notes for more info.
1:19
We can install it from our terminal
by typing gem install Sinatra.
1:23
Or if you get a file permission
error while installing,
1:28
you might try putting sudo, that's S.U.D.O
and a space on the front of the command,
1:30
but we're gonna skip that here because I know
it's not necessary in my environment.
1:35
RubyGems will automatically download and
1:39
install several gems that Sinatra depends
on, and then will install Sinatra itself.
1:41
The libraries are pretty small,
so it's a fast process.
1:45
Now, it's time to create
our first Sinatra app.
1:49
We'll show you how to set it
up on your own computer first.
1:51
Then we'll switch to using workspaces for
the rest of the course.
1:54
For later videos, you can follow along
in whichever environment you prefer.
1:57
If you have any problems, check
the teacher's notes on this video for
2:00
troubleshooting help.
2:03
So first,
I'll show you how to run an app locally.
2:05
In our editor,
let's create a new file called produce.rb.
2:07
And we'll type in a few
lines of code here.
2:14
Our goal is just to get this up and
running right now.
2:16
We'll go back and
explain the code in more detail shortly.
2:18
So we're going to load the Sinatra
library first with require Sinatra.
2:22
And then,
we're gonna set up a Sinatra route.
2:29
That's gonna respond to HTTP get requests.
2:32
We'll explain that in a little bit.
2:35
And it'll expect those requests
to have a path of slash Apple.
2:38
Will type a ruby block here which
will be invoked every time this route
2:43
gets matched.
2:46
And we'll have it return
the string here's a juicy apple.
2:47
Be sure to save the file when you're done.
2:56
Now, in your terminal, change to
the directory where you just saved to
2:58
produce.rb if you're not already there.
3:02
So, CD produce.
3:05
That's where I saved it.
3:07
Just as we've done with all our
ruby scripts in previous courses,
3:09
we'll type ruby space, and
the name of the file to run.
3:12
We'll hit enter,
3:18
our app will run, and Sinatra will start
logging debug messages to the terminal.
3:19
Now, we need to visit our
Sinatra app in a web browser.
3:23
The app is running on your computer, so
3:26
we'll need to establish a connection from
your computer to that same computer.
3:28
We'll do that using the special host name,
local host.
3:33
So we'll type http://localhost
in our browser address bar.
3:37
There's one more thing we need to
add to the URL before we can connect
3:44
connect to the app.
3:47
Note that part of the output here in
the terminal where it says port=4567.
3:48
This is the network port that Sinatra
is listening for connections on.
3:52
We need to specify that
port as part of the URL.
3:58
We do that by typing
a colon after the host name
4:01
followed by the port number 4567.
4:04
We'll be talking more about ports and
how they work shortly.
4:07
For now, just hit Enter, and
your browser will send a request.
4:10
The request reaches Sinatra, which
returns a response, but it's an error.
4:14
Not that here's an apple
is the response we want.
4:18
It says Sinatra doesn't know this ditty.
4:21
This is Sinatra's version of the 404
error that you've probably seen on other
4:24
websites.
4:28
It means the resource being
requested wasn't found.
4:29
Looking at our code, we see get apple.
4:32
The /apple string needs to be added
on to the URL we're trying to load.
4:35
So we'll add /apple on to
the end of the browser URL.
4:40
We'll hit Return,
the browser will request a new URL.
4:44
And Sinatra will respond with our text.
4:47
That's it.
4:50
With just four lines of code, your app
is responding to browser requests.
4:51
When you're done testing the app,
it's important to shut it down so
4:55
the network port is
available to other apps.
4:57
Just go to your terminal and
press control-C to halt Ruby.
4:59
If you're in workspaces,
there's an important additional
5:03
step that you'll need to follow for
every Sinatra app you create.
5:07
By default, Sinatra is set up to only
accept connections from the same computer
5:10
it's running on.
5:14
But if you're previewing
your app in workspaces,
5:16
you're actually connecting
to a treehouse server and
5:18
your app won't respond to requests
from your computer at home.
5:20
In workspaces, this will show up
as a workspace unavailable error.
5:24
The same error you'd see if your
app weren't running at all.
5:28
The code in this workspace is identical to
the code I just ran on my local machine.
5:31
We need to configure this app to accept
requests form any computer that connects.
5:36
We do that by setting a Sinatra
configuration option called bind.
5:40
So I'll go up to the top of my code,
right below the require Sinatra line,
5:44
and call a method that
Sinatra provides called Set.
5:49
The first argument is a symbol with the
option to set, which we'll do colon bind.
5:53
And the bind symbol.
5:58
The second argument is the value
you want to set the option to,
6:00
the string zero dot
zero dot zero dot zero.
6:03
This will set Sinatra up to accept
connections from any computer.
6:07
Make sure to save your
work when you're done.
6:11
That's all you need to know about
configuring Sinatra for right now.
6:14
But if you ever want to learn more,
check the teachers notes for this video.
6:17
Now, let's go to the workspace console and
type ruby, a space, and
6:21
the name of our .rb file,
just like we did from our local terminal.
6:25
Ruby space produce.
6:29
.rb.
6:31
Just like before,
6:34
we'll see some log messages,
including one showing the port 4567.
6:35
So, we'll click our workspace
preview button and choose port 4567.
6:38
A new preview window will open showing
Sinatra doesn't know this ditty again.
6:44
As before, we'll add the string from
our code on to the end of the URL, and
6:51
hit return /apple.
6:54
And then, we'll see the text.
6:57
Your Sinatra app is
running from workspaces.
7:01
Again, it's best to shut the app
down when you're done testing it.
7:04
Go to your console window and
press Ctrl+C.
7:07
So that's your first Sinatra app.
7:10
Again, if you have any
problems while testing it out,
7:12
be sure to check the teacher's notes.
7:15
Don't worry if it still seems a little
mysterious how everything worked.
7:17
Up next, we'll explain all the details of
how Sinatra responded to your request.
7:20
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up