Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Express Applications will have several (and often many) routes. Let's set another route up and see how it allows us to serve different content, depending on which route a user visits.
Express Documentation
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
We had made our app with one route so far,
but it doesn't actually serve HTML yet.
0:00
Let's have a quick preview of some
improvements we'll make in this video.
0:08
Here's an app I'm running
on a different port, 3001.
0:12
I'm on the root route, and
0:16
as you can see we're getting
some text with an h1 tag now.
0:18
Also, if I type in slash hello,
I get a different page.
0:25
I did this by adding
another route to the app.
0:34
Now I'll show you how.
0:37
Here we are back in the app.js file.
0:40
The first thing I'm going to do is
change the name of the request and
0:43
the response parameters.
0:48
Let's shorten this to req and res.
0:50
Don't forget to update
the response.send to res.send.
0:58
In all of the express documentation as
well as the examples around the Internet,
1:05
you'll always see req and res.
1:10
Let's start getting used
to this convention.
1:16
Speaking of learning about
express on the Internet,
1:19
I just want to let you know that express
has some fantastic documentation.
1:22
Throughout this course I'll
refer to the documentation.
1:27
The most useful aspect of the
documentation will be the api reference.
1:31
As you can see, it's well organized.
1:36
With these links on the right-hand side
that can take you to descriptions of every
1:39
express method.
1:44
I'll refer to these methods
throughout this course.
1:46
I'll also provide links to
the most commonly used methods
1:49
in the teacher's notes.
1:52
For starters,
let's check out the responses send method.
1:54
You can see,
2:02
there are a number of parameters
that we can pass into this method.
2:03
But this is the one I wanted to show you.
2:07
You can drop HTML right into
the send method as a string.
2:10
Let's do that in our root route by
adding h1 tags around the string,
2:16
I love treehouse.
2:21
Now when I refresh the page, I can see
the string is inside a heading tag.
2:24
Taking a look in the terminal, it's not
very clear what the process is running.
2:34
In fact it's not very clear that anything
is happening in the terminal tab at all.
2:39
Let's fix that.
2:44
The listen method can take
the callback function a parameter.
2:46
In our callback,
2:52
we're going to add a message that
paints a picture of what's going on.
2:53
Now when nodemon restarts the server,
3:11
we see a message that the server is up and
running.
3:14
And which port it can be found on.
3:18
Let's add one more route to the app
to just see what it looks like.
3:22
I'll copy the root route and
paste it below itself.
3:26
Change the first parameter to slash hello.
3:32
Then I can change the heading tag to say,
3:34
Hello, JavaScript Developer.
3:44
Save it and now our app has two routes.
3:52
Let's request them both in the browser.
3:56
Refresh the page, and
I love Treehouse is on the home room.
4:01
And if I go to slash hello,
we see that the new route works.
4:08
Our website has two pages now.
4:17
You could make a pretty nice
site with what you know so far,
4:20
serving HTML from different
routes with the res.send method.
4:22
But there's a better way to serve
html from Express in templates.
4:27
Lets look how we do that next.
4:32
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up