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 almost 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.