Join our free workshop and get a Treehouse discount code! 💼 Register here!

🤑 Join the Treehouse affiliate program and earn 25% recurring commission!

Join our free workshop and get a Treehouse discount code! 💼 Register here!

🤑 Join the Treehouse affiliate program and earn 25% recurring commission!

Well done!

You have completed Build a Simple Dynamic Site with Node.js!

Sign up for Treehouse Back to Library

Preview

Sign up for Treehouse Continue

Video Player

00:00

00:00

00:00

2x 2x
1.75x 1.75x
1.5x 1.5x
1.25x 1.25x
1.1x 1.1x
1x 1x
0.75x 0.75x
0.5x 0.5x

None
English (loading)

Use Up/Down Arrow keys to increase or decrease volume.

Home Route

5:40 with Andrew Chalkley

In this video we'll handle the home route or the root path on our site.

Teacher's Notes
Questions?
Video Transcript
Downloads
Workspaces

[MUSIC] 0:00

We have the server up and running. 0:04

But it responds the same way, no matter what path we add to the end of the URL. 0:05

Let's make sure that that doesn't happen by dealing with the home and user routes. 0:10

So, let's first create a function called homeRoute. 0:16

[BLANK_AUDIO] 0:22

And we'll wrap all the sudo code that we wrote for handling the, the home. 0:27

We'll want the request and 0:34

response as parameters. 0:38

So similar to the createServer up here where we've got the request and response, 0:44

we'll be putting the handlers in here that will deal with all the different routes. 0:49

So let's move that from there down to show 0:58

search and I'll do response. 1:02

Right, we'll just get rid of this interval, we don't need that anymore. 1:08

And every web page that we will have will have a header or 1:13

a head where all the things in the hat, head tags are similar. 1:18

So we'll just type header here and then we'll have. 1:23

[BLANK_AUDIO] 1:26

Search here and at the end we'll have the footer all at the end of the body. 1:32

[BLANK_AUDIO] 1:38

So we can handle the hermRoute request and response. 1:47

And let's just try this out to make sure that what we've done hasn't broken 1:55

anything. 1:59

So we create the server. 2:00

The homeRoute handler gets the request and the response, 2:04

the same request and response that the server gets in. 2:09

And then we can choose to write to that response with a header, 2:13

a search field, and a footer. 2:18

These are just gonna be placeholders until we get our templating working. 2:21

[BLANK_AUDIO] 2:25

And yeah, we've got header, search, and footer. 2:36

So, let's see what happens when we do \chalkers. 2:39

[BLANK_AUDIO] 2:44

It does the same thing again. 2:48

So, we need to restrict that for, just the URL for the homeRoute. 2:50

So how did we do that? 2:55

So let's go to the node.js website. 2:58

Click on Docs, then API Docs, and then HTTP. 3:01

And let's take a look at this request here. 3:07

It says the, the request is an instance of an IncomingMessage. 3:10

So an IncomingMessage is an object that is created by the HTTP server or 3:15

the ClientRequest and is passed in as the first argument of the request response. 3:22

So the, the request is the incoming message. 3:28

Now what kind of properties do we have on an incoming message? 3:32

We've got http version, headers, raw headers, trailers, 3:35

raw trailers method URL. 3:40

So let's take a look at this. 3:44

So. [BLANK_AUDIO] 3:46

The URL will be status/ryan. 3:50

So if, if you were typing in /status? 3:53

Name is equal to Ryan, the URL would be the whole thing like that. 3:59

So we can do the request.url and just look for the slash. 4:03

So, if 4:10

request.url. 4:12

So that's the property on the incoming message, which is the request, 4:21

is equal to forward slash. 4:25

Then just do this. 4:34

Cool. 4:37

Let's try this out, so. 4:39

Press Ctrl+C. 4:41

That kills the app. 4:44

Let's run it again. 4:46

Go back to port 3000. 4:48

Okay that's cool. 4:49

So the home route is actually showing now. 4:51

So let's go to \chalkers. 4:54

Hit Enter and, if, you may think, oh, it's still showing it. 4:59

But actually, down here in the status bar at the bottom, 5:03

it says it's waiting, because we're not even handling it anymore. 5:08

We're not giving a response. 5:11

This will probably just time out on the browser, and 5:13

it will say that it doesn't exist, this path. 5:16

So, there's a timeout error. 5:19

[BLANK_AUDIO] 5:21

And eventually you'll see this, Bad Gateway. 5:24

Basically, the server hasn't responded at all, or there's something wrong. 5:27

So the, the server has not done its job properly. 5:32

So, in the next video, we're gonna take a look at creating that user route. 5:36