1 00:00:00,920 --> 00:00:07,280 We had made our app with one route so far, but it doesn't actually serve HTML yet. 2 00:00:08,875 --> 00:00:12,218 Let's have a quick preview of some improvements we'll make in this video. 3 00:00:12,218 --> 00:00:16,435 Here's an app I'm running on a different port, 3001. 4 00:00:16,435 --> 00:00:18,580 I'm on the root route, and 5 00:00:18,580 --> 00:00:23,160 as you can see we're getting some text with an h1 tag now. 6 00:00:25,110 --> 00:00:32,960 Also, if I type in slash hello, I get a different page. 7 00:00:34,380 --> 00:00:37,680 I did this by adding another route to the app. 8 00:00:37,680 --> 00:00:38,760 Now I'll show you how. 9 00:00:40,170 --> 00:00:42,310 Here we are back in the app.js file. 10 00:00:43,440 --> 00:00:48,396 The first thing I'm going to do is change the name of the request and 11 00:00:48,396 --> 00:00:50,440 the response parameters. 12 00:00:50,440 --> 00:00:55,135 Let's shorten this to req and res. 13 00:00:58,814 --> 00:01:05,900 Don't forget to update the response.send to res.send. 14 00:01:05,900 --> 00:01:10,170 In all of the express documentation as well as the examples around the Internet, 15 00:01:10,170 --> 00:01:16,265 you'll always see req and res. 16 00:01:16,265 --> 00:01:19,030 Let's start getting used to this convention. 17 00:01:19,030 --> 00:01:22,380 Speaking of learning about express on the Internet, 18 00:01:22,380 --> 00:01:26,440 I just want to let you know that express has some fantastic documentation. 19 00:01:27,840 --> 00:01:31,040 Throughout this course I'll refer to the documentation. 20 00:01:31,040 --> 00:01:36,890 The most useful aspect of the documentation will be the api reference. 21 00:01:36,890 --> 00:01:39,520 As you can see, it's well organized. 22 00:01:39,520 --> 00:01:44,090 With these links on the right-hand side that can take you to descriptions of every 23 00:01:44,090 --> 00:01:45,080 express method. 24 00:01:46,080 --> 00:01:49,400 I'll refer to these methods throughout this course. 25 00:01:49,400 --> 00:01:52,350 I'll also provide links to the most commonly used methods 26 00:01:52,350 --> 00:01:53,135 in the teacher's notes. 27 00:01:54,470 --> 00:01:58,280 For starters, let's check out the responses send method. 28 00:02:02,864 --> 00:02:03,619 You can see, 29 00:02:03,619 --> 00:02:07,484 there are a number of parameters that we can pass into this method. 30 00:02:07,484 --> 00:02:09,700 But this is the one I wanted to show you. 31 00:02:10,970 --> 00:02:15,250 You can drop HTML right into the send method as a string. 32 00:02:16,430 --> 00:02:21,270 Let's do that in our root route by adding h1 tags around the string, 33 00:02:21,270 --> 00:02:22,100 I love treehouse. 34 00:02:24,750 --> 00:02:32,600 Now when I refresh the page, I can see the string is inside a heading tag. 35 00:02:34,100 --> 00:02:39,450 Taking a look in the terminal, it's not very clear what the process is running. 36 00:02:39,450 --> 00:02:44,370 In fact it's not very clear that anything is happening in the terminal tab at all. 37 00:02:44,370 --> 00:02:45,060 Let's fix that. 38 00:02:46,490 --> 00:02:49,960 The listen method can take the callback function a parameter. 39 00:02:52,770 --> 00:02:53,606 In our callback, 40 00:02:53,606 --> 00:02:56,962 we're going to add a message that paints a picture of what's going on. 41 00:03:11,999 --> 00:03:14,588 Now when nodemon restarts the server, 42 00:03:14,588 --> 00:03:18,490 we see a message that the server is up and running. 43 00:03:18,490 --> 00:03:20,100 And which port it can be found on. 44 00:03:22,150 --> 00:03:26,030 Let's add one more route to the app to just see what it looks like. 45 00:03:26,030 --> 00:03:30,135 I'll copy the root route and paste it below itself. 46 00:03:32,592 --> 00:03:34,751 Change the first parameter to slash hello. 47 00:03:34,751 --> 00:03:40,638 Then I can change the heading tag to say, 48 00:03:44,726 --> 00:03:52,215 Hello, JavaScript Developer. 49 00:03:52,215 --> 00:03:56,820 Save it and now our app has two routes. 50 00:03:56,820 --> 00:03:58,730 Let's request them both in the browser. 51 00:04:01,210 --> 00:04:06,990 Refresh the page, and I love Treehouse is on the home room. 52 00:04:08,590 --> 00:04:17,360 And if I go to slash hello, we see that the new route works. 53 00:04:17,360 --> 00:04:20,190 Our website has two pages now. 54 00:04:20,190 --> 00:04:22,850 You could make a pretty nice site with what you know so far, 55 00:04:22,850 --> 00:04:27,600 serving HTML from different routes with the res.send method. 56 00:04:27,600 --> 00:04:32,630 But there's a better way to serve html from Express in templates. 57 00:04:32,630 --> 00:04:34,500 Lets look how we do that next.