OK welcome back in this lesson we're going to pick right up where we left off and continue to talk about
routing and express a three main objectives.
The first one is to show what is called the splatt or Star Route matcher.
And then I want you to write routes containing route parameters.
So we'll talk about how we do that what route parameters are.
And then lastly I want to have a quick discussion about Raut order.
Let's get started.
I'm using the exact same first express app that we used before.
It's just a single act.
Yes.
And a node mandrels directory with the Express installed APTA yes has our Hi There are by and are slash
dog routes and we're just going to continue to add to this in this lesson.
The first of those objectives that I'll hit is introducing the splatt or Star Route matcher before us
or you any new code.
I'm just going to start up the server so node I've done yes.
Make sure it starts ok then I'm going to open up the tab where I'm actually visiting the app and I want
to show you this message first.
So this happens when you try to access one of your applications when the server isn't running at all
but the server is running now.
So if I refresh now I get my hi there or if I go to slash Doug I get me now.
But when I want to show is if I go to a route that doesn't exist like Slash dogs and I hit enter and
I showed this earlier I get a cannot get slash dogs and that will happen for whatever route that I go
to unless it's one of the three that we've defined.
Slash dog and slash by.
So if we want to have some sort of catchall some sort of message that we respond to every other route
except for by dog and the route we can use the star.
So that looks like this will do an apt get and we just get star and we proceed with everything else
exactly the same.
And instead of here we'll just do a red dot and you are a star just like that and save.
So this code will be triggered this line here will run.
Whenever our app gets any get request to any you know aside from these three that we've already defined
so I'll show you that now you have to restart the server.
Ok restarted it.
Refresh the page nothing should change.
But now if I go to some random chipper ish route and I hit enter I get you are a star.
But my other routes are unchanged.
If I go to slash that still works if I go to slash dog that still works but if I go to jibberish I get
you are a star.
This is especially useful if you want to have some sort of error message or area of web page that you
show a user anytime they try and access a route that isn't defined or one that you're not expecting
you can show some sort of message or some HDMI template that says Page Not Found.
Let's go back now to our editor and I'm going to try something where I'm going to copy this or cut it
and move it above the other routes and just save it so don't change anything.
Aside from the order where now my star route the catchall comes first and then I'm going to restart
my server Control-C and then up arrow.
Now I'm going to go back and refresh the page and this shouldn't change because this is still jibberish
.
So it's still hitting that catch all route and not hitting any of the other routes.
But if I try and go to the root page I still get you are a star if I try and go to slash dog I get your
a star and if I try to go to slash buy I also get your star.
So this gets at that third objective which is I wanted to have a discussion about the order of routes
and that discussion boils down to this order of route's matters.
So in this case if I put this catch all out the star that matches everything if I put that first then
nothing else will be matched ever.
The key concept is that the first route that matches a given request is the only route that will be
run.
So for one request we'll never have this code run.
And then this code if one of these callbacks is running if it's being triggered then we're done.
So that request has then been handled and it never moves on to these other routes.
But let's say and we going to move this back down to where it was let's say that this is my code and
someone makes a request to slash dog.
First thing that will happen is expressed is going to check if it matches this route.
Was it a get request to slash.
The answer is No.
So then it checks this one.
Was it a get request to buy.
Nope.
So then it checks this one.
Was it a get request to slash dog.
The answer is yes.
So it runs this code and then it's done.
It doesn't move on and check this one at the end.
So of course I put this first it's problematic because it overrides any of the other routes that we've
defined.
And I'll just always respond with a star which although it makes for a great motivational Web site it's
not the behavior that we're looking for in a real web app.
And the last objective that I want to talk about which is definitely the most important one is something
called route parameters to help introduce route parameters.
I'm going to use Reddit dot com and show you some of its routes for those you who aren't familiar with
readed I highly recommend that you avoided at all costs.
Don't listen to what I'm about to say.
You will lose all productivity in your life the way that it works is that people can post different
posts whether it's a link or an image or a video or just some text.
Two different subeditors and there are thousands and thousands of different subsets each one with a
category.
So right now I'm looking at the soccer subtended I could also go to the gaming one or to music or to
funny or to news or movies.
And each one of those has content that is related to that topic.
So in this case I'm on soccer sub read it and noticed the route Reddit dot com slash are slash soccer
.
So when I asked the server for Reddit dot com slash slash Socker it parses the route and it realizes
we're looking for soccer posts goes to the database gets all the soccer posts and sends them to me in
the response.
But as I mentioned earlier there are thousands and thousands of different subjects and I can assure
you that Reddit is not set up like this where there's a route for every single read it.
It's not apt get slash our slash soccer and I'll just shorten that and then another one for music and
another one for movies and so on.
Ten thousand plus times.
That is not how red it works.
This code is not dry at all.
Remember dry stands for don't repeat yourself.
In fact it's very wet write everything twice.
Although it's more like write everything 10000 times.
So rather than define a separate route for every single subset it we could define a pattern.
And this is what red it does.
They have a pattern that something like Slash or slash a sub it name.
But if we just leave it like this as slash our slice of bread at name it will only match when I go to
slash our slash Sublette it name and they match it exactly the same.
Before I show you how we get around that when you go back to read it and click on one of the posts.
So this post here I'm going to click on it and look at the route.
So it's ready to come.
Slash our slash soccor slash comments slash this crazy string it's an IED slash the title of the post
or part of the title.
And when you go to this route you get all of the comments that correspond to this post to the post that
has that title.
And of course there are millions and millions of different posts on Reddit and they don't each have
their own route defined.
So there's not a route that looks like this inside of the server code something like this would be insane
to have for every single post.
Especially because the posts are all created by users and nobody who's writing the code can anticipate
all of those different posts.
So instead we would want some sort of pattern where we have our slash sub read it name.
In this case soccer slash comments slash and Id slash title and just like the one above where it had
Sublette it name.
This will only match if we literally type word for word character for character are such a subset it
name slash comments slash ID slash title.
So to make it into a pattern we make use of what are called route parameters or route variables and
in other frameworks people call them path variables as well.
They're very very simple to implement.
If I want to define a pattern where we listen for a get request to slash our slash anything else afterwards
any single Sabet it name.
All you have to do is put a colon right there and that tells express to not actually match character
for character subset of name but to make it a pattern where relistening for Slash are slash any word
afterwards.
So let me comment this one out for now and let's finish this up with our request and response and open
it just like that and all it'll do is read is does send.
Welcome to a subject and we'll just save that and restart our server.
Now if I want to see this message I need to go to a route that matches this pattern.
So let's go back and refresh and if we go to slide by we still get the same thing.
If we go to that page we so get the same thing.
But now if we go to slash our slash puppies I now get a message that says Welcome to a sub Reddit.
So slash our slash puppies follows this pattern and so slash our slash soccer or any other subset that
I could come up with.
But it is important to note something like this wouldn't work.
Slash our slash soccor slash hello that no longer works because this is a different pattern.
So it's not like a wild card where it says slash or slash anything else afterwards.
What it really means is match anything that comes in with Slash or slash any single thing following
it.
So not slash are slash at name slash something else but slash slash soccor slash slash puppies.
And I'm saying slash are a lot and it's getting really annoying.
So let's move on down here and I'll show you how we can convert this one.
It looks exactly the same.
We just put a colon in front of anything that we want to be a variable and anything that we want the
user or the application to be able to change.
So comments should always just be comments on every reddit post.
It always is the name of the sub Reddit like soccer slash comments slash the ID slash the title of a
post so comments its always there and this will now be matched if I go to a rout.
Let's finish this out function request response must come up with a route to match this one.
I got a little message here which is really nice from Cloud 9 telling me that it wasn't expecting this
print to see.
That's because I wasn't calling a method.
So now let's do a red dot send and I'll just Welcome to the comments page just like that and all save
and restart the server now to match this route.
I need to go to slash our slash sublet it name slash comments slash an ID anything slash a title that
can be anything as well.
And let's do that now.
We'll go to slash slash soccer slash comments slash any ID.
We'll do one two three but it doesn't have to be numbers.
It could be a word.
It doesn't matter at all.
And then slash a title like my first soccer game and if we hit Enter we now get Welcome to the comments
page.
But of course I can change this and make it some random string.
And then another title that's a random string or just numbers.
And I still match that pattern.
So it's not checking for the fact that something is letters or words or has underscores or that it's
at least 10 characters it doesn't care.
There are ways of doing that.
But all this cares about is a pattern of chunks of text followed by and divided by slashes the last
and most important thing is how we access this data out instead of our route handler.
So if I wanted to send a message here that was you know welcome to the soccer Sublette it when the user
goes to slash slash soccer.
But I want it to change too.
Welcome to the puppies.
So I've read it when they go to our slash puppies.
I need a way to access that out.
And you know what was the value of sublet it to him and expressed gives us a nice and easy way to do
that instead of this request object.
So far we've only been working with the response residents and but the request object contains all the
information about the incoming request.
Let's just do a simple con. log requests and we probably won't actually be able to see all that much
because there's so much there that it will only print out a small subset of it.
But let's just try and restart the server and hit this route.
So our slash submit it name to soccer.
And here you can see it actually does print the whole thing out.
And so there's a lot of information coming from that request.
That's all being printed out here.
And what I'm looking for is something called request parameters which should be where we go right here
.
It's an object that contains all of the route parameters and their corresponding values.
So in this case sub redit name is equal to Socker because I went to slash our slash soccer.
So what we can do is let's do cancel that log requests stop harams rather than the entire thing and
save and then refresh or restart the server.
And now if I go to slash our slash hello it will say that subtended name is hello.
They can do the same thing for puppies.
And there we go.
Let me show you the same thing when we have multiple path parameters like we do here.
So I'll just put that right there.
Save restart the server again and then will trigger this route by going to our slash puppies slash comments
slash an ID slash title.
My core is cute and hit enter and we get.
Welcome to the Commons page.
And if I look in the terminal I'll see that we have three different route parameters three different
harams.
Subset it name as puppies ID is 1 2 3 4 and title is my Corgi is cute.
Wrap this up when we respond with Welcome to a subset it let's actually make it.
Welcome to the puppy spreaded.
Welcome to the whatever spreaded.
And to make it a little bit more fun let's make sure it's all uppercase.
So what we'll do is make a variable far and we'll call it sub it equals request up harams sub redit
name has to match exactly what we called it here.
Remember it's just inside of this request.
Harams object rather than just responding with welcome to a subset it will do.
Welcome to the space.
Plus I've read it plus I've read it so that will be welcome to the puppies.
Read it and it won't be uppercase.
So to make that uppercase we can use to upper case we can do that here or we could do it right here
on Sublette it and I'll get rid of that semi-colon and save and restart the server.
Let's go back and trigger that route again.
So this one won't trigger it.
This is for the router that has multiple parameters.
We just want our slush puppies and I get.
Welcome to the puppy.
Ready.
Now if I do are slashed puppies or are slash dogs all grown up or cats and I now have a dynamic web
page.
All right so let's wrap this up really quickly and go back to when we use the star instead of a route
definition.
It will match anything that comes in at all and along with that the order that we define the route's
matters.
So if we put the star Routemaster up top no other routes will run below it.
But if we put it at the bottom which is where it normally goes it will behave as a catch all sort of
as an else statement.
If no other route is matched otherwise match the star.
Lastly we talked about route parameters which we can use to define a pattern in a route that doesn't
have to be matched word for word or character for character.
Just has to be matched in the same pattern.
So something like this where I can have Slash are slash any subset it named after it.
All right so that's it.
So in the next video we're going to do another exercise and this time you'll be writing your own Express
app from scratch and you'll be using rope harams in some of he wraps