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
Routes are essential to any web framework. Learn how to create one in Express.
More about HTTP
HTTP Basics (Treehouse Course)
HTTP request methods (MDN)
HTTP response status codes (MDN)
Chrome DevTools
To open Chrome's Developer Tools, you can go to "More Tools > Developer Tools" in the menu. You can also use a keyboard shortcut:
- Mac: alt + cmd + I
- PC: ctrl + shift + I
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
Express handles requests through
routes that we can setup in the app.
0:00
From a user's perspective,
a route is just like a URL.
0:04
Like teamtreehouse.com/about,
teamtreehouse.com/home,
0:08
or teamtreehouse.com/account.
0:14
It's called a route, because it's the path
a user takes to access data on a server.
0:17
From the application's perspective,
0:23
a route (also called an end point)
is a command to run a specific function.
0:25
Which in turn sends a response
back to the client.
0:31
For example, about tells the application
to load the contents for the about page.
0:35
Home might direct users to
the front page of the app.
0:40
And an account route might trigger logic
that loads content from a user's account.
0:44
When you type your URL
into your browser and
0:50
hit return, the browser sends what's
called a get request to the server.
0:53
This means,you are asking to view or
get a web page.
0:58
Get is known as an HTTP verb,
1:03
because it represents what
the client wants the server to do.
1:06
In this case of get the client is simply
1:10
asking the server to return something,
but what?
1:14
The is where the URL comes in,
which is more like a noun or
1:18
a resource as its called.
1:22
The URL tells the server what to get for
the client.
1:25
Get requests are the most common
requests made by browsers, and
1:30
a server responds to a get request by
sending information off in a web page.
1:34
But a browser can also send information
to the server. For example,
1:40
when submitting a form to order something
online this is called a post request.
1:45
A client sends the values of the form, and
1:51
the server receives them and
processes those values in some way.
1:55
There are other HTTP verbs besides get and
post, but
2:00
we won't cover them in this course.
2:04
Feel free to check out the teacher's notes
for other resources on HTTP requests.
2:06
What happens when the client makes
a request to a route that the server
2:14
isn't set up to respond to?
2:18
For example, a URL like
2:20
https://teamtreehouse.com/does-not-exist.
2:24
In this case, the server would send back
an error, like a page not found error.
2:33
This is commonly called a 404,
because of the associated status code.
2:39
There's a link in the teacher's note where
you can read more about status codes.
2:44
Speaking of 404's,
if I open up the DevTools in my browser,
2:50
you can see I'm getting a 404 error code.
2:56
Again, that's because express doesn't have
any resources to return for this route.
3:01
Let's change that by adding one.
3:08
To create a route, I will use
the get method on the app object.
3:11
The get method is used to handle
the get requests to a certain URL.
3:19
For this example, we're going to create
a route for the root route for our app.
3:26
In other words, this is the route to
follow if a visitor just visits our site
3:31
without specifying a particular folder or
file.
3:36
For example,
when you type in teamtreehouse.com,
3:40
you get treehouse's root route.
3:44
Then if I go to Stories,
which is teamtreehouse.com/stories,
3:48
you get the Success Stories for
some of our students.
3:55
The root route is also one we visited
when we got the 404.
3:59
To indicate the site's root route we
use the slash as the first parameter.
4:05
The first parameter is sometimes
called the location parameter.
4:13
The second parameter of the get method
4:18
is going to be an anonymous
callback function.
4:20
This function is going
to take two parameters,
4:23
a request object And a response object.
4:27
This callback will run when
the client requests this route.
4:38
We'll talk more about the request and
response objects throughout this course.
4:43
For now, we're going to use
the response's send method.
4:49
The send method sends
a string to the client.
4:58
Now when we refresh the page,
you notice we still get an error.
5:04
The reason is because even
though we changed our code,
5:09
the express server is still
serving up the old code.
5:13
The express server needs to be
restarted to apply the new route, and
5:18
the changes we've made.
5:22
We can do this from the command line
by hitting Ctrl+C to stop the server.
5:24
Since the server is stopped,
5:30
we'll need to start it back up
the same way we did the first time.
5:32
When we visit localhost:3000 now,
we see our application now works.
5:37
One more thing,
if you don't have nodemon installed yet,
5:46
I would recommend you doing that for
this course.
5:50
I'll be using it throughout this
course to restart the express server.
5:53
It's also generally a good thing to
have on hand for node development.
5:58
Without it, you'd be restarting the server
every time you made a change to your code
6:02
which can get really old, really fast.
6:07
To install it, just type npm
6:10
install -g nodemon and hit Enter.
6:14
To use it, make sure that package.json
has the property main and
6:22
it points to the right entry file for
your app.
6:27
In our case, the entry file or
6:30
file that will run to start
the express app is app.js.
6:33
Now I can just go to my terminal and type
nodemon, and it will run the right file.
6:38
Congratulations on your first express app.
6:47
On the next video,
6:50
we´ll make some adjustments to
enhance our basic application.
6:51
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