- What is Express? 4:05
- Install Express 4:28
- Review Installing Express 1 objective
- Review: Installing Express 5 questions
- Creating a Server in Express 3:23
- Creating a Route with Express 6:55
- Review: Your First Express App 5 questions
- Adding Multiple Routes to the App 4:34
- Setting Up a Basic Express App 2 objectives
Preview
Video Player
00:00
00:00
Adding Multiple Routes to the App
4:34Express 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.
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