Routes are essential to any web framework. Learn how to create one in Express.
Express handles requests through routes that we can setup in the app. 0:00 From a user's perspective, a route is just like a URL. 0:04 Like teamtreehouse.com/about, teamtreehouse.com/home, 0:08 or teamtreehouse.com/account. 0:14 It's called a route, because it's the path a user takes to access data on a server. 0:17 From the application's perspective, 0:23 a route also called an end point, is a command to run a specific function. 0:25 Which in turn sends a response back to the client. 0:31 For example, about tells the application to let the contents for the about page. 0:35 Home might direct users t the frontpage of the app. 0:40 And in account route, might trigger logic that alert content from a user's account. 0:44 When you type your URL into your browser and 0:50 hit return, the browser sends what's called a get request to the server. 0:53 This means, you are asking to view or get a web page. 0:58 Get is known as an HTTP verb, 1:03 because it represents what the client wants the sub to do. 1:06 In this case of get the client is simply 1:10 asking the server to return something, but what? 1:14 The is where the URL comes in, which is more like a noun or 1:18 a resource as its called. 1:22 The URL tells the server what to get for the client. 1:25 Get request are the most common requests made by browsers, and 1:30 a server responds to a get request by sending information off in a web page. 1:34 But a browser can also send information to the server, for example, 1:40 when submitting a for to order something online this is called a post request. 1:45 A client sends the values of the form, and 1:51 the server receives them and processes those values in some way. 1:55 There are other HTTP verbs besides get and post, but 2:00 we won't cover them in this course. 2:04 Feel free to check out the teacher's notes for other resources on HTTP requests. 2:06 What happens when the client makes a request to a route that the server 2:14 isn't set up to respond to? 2:18 For example, a URL like 2:20 https://teamtreehouse.com/does-not-exist. 2:24 In this case, the server would send back an error, like a page not found error. 2:33 This is commonly called a 404, because of the associated status code. 2:39 There's a link in the teacher's note where you can read more about status codes. 2:44 Speaking of 404's, if I open up the DevTools in my browser, 2:50 you can see I'm getting a 404 error code. 2:56 Again, that's because express doesn't have any resources to return for this route. 3:01 Let's change that by adding one. 3:08 To create a route, I will use the get method on the app object. 3:11 The get method is used to handle the get requests to a certain URL. 3:19 For this example, we're going to create a route for the root route for our app. 3:26 In other words, this is the route to follow if a visitor just visits our site 3:31 without specifying a particular folder or file. 3:36 For example, when you type in teamtreehouse.com, 3:40 you get treehouse's root route. 3:44 Then if I go to Stories, which is teamtreehouse.com/stories, 3:48 you get the Success Stories for some of your students. 3:55 The root route is also one we visited when we got the four of four. 3:59 To indicate the site's root route we use the slash as the first parameter. 4:05 The first parameter is sometimes called the location parameter. 4:13 The second parameter of the get method 4:18 is going to be an anonymous callback function. 4:20 This function is going to take two parameters, 4:23 a request object And a response object. 4:27 This callback will run when the client requests this route. 4:38 We'll talk more about the request and response objects throughout this course. 4:43 For now, we're going to use the response's send method. 4:49 The send method sends a string to the client. 4:58 Now when we refresh the page, you notice we still get an error. 5:04 The reason is because even though we changed our code, 5:09 the express server is still serving up the old code. 5:13 The express server needs to be restarted to apply the new route, and 5:18 the changes we've made. 5:22 We can do this from the command line by hitting Ctrl+C to stop the server. 5:24 Since the server is stopped, 5:30 we'll need to start it back up the same way we did the first time. 5:32 When we visit local host 3000 now, we see our application now works. 5:37 One more thing, if you don't have nodemon installed yet, 5:46 I would recommend you doing that for this course. 5:50 I'll be using it throughout this course to restart the express server. 5:53 It's also generally a good thing to have on hand for node development. 5:58 Without it, you'd be restarting the server every time you made a change to your code 6:02 which can get really old, really fast. 6:07 To install it, just type npm 6:10 install -g nodemon and hit Enter. 6:14 To use it, make sure that package.json has the property main and 6:22 it points to the right entry file for your app. 6:27 In our case, the entry file or 6:30 file that will run to start the express app is app.js. 6:33 Now I can just go to my terminal and type nodemon, and it will run the right file. 6:38 Congratulations on your first express app. 6:47 On the next video, 6:50 we´ll make some adjustments to enhance our basic application. 6:51
You need to sign up for Treehouse in order to download course files.Sign up