- 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
Creating a Route with Express
6:55Routes are essential to any web framework. Learn how to create one in Express.
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