Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Express Basics

Well done!

You have completed Express Basics!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Adding Multiple Routes to the App

4:34 with Andrew Chalkley and Joel Kraft

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.

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