Your First App7:25 with Jay McGavren
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.
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.
- 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".
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 up