In this video you're going to learn how to set up a 4 0 4 page for your express server.
So when things go well we'll still show the user the content they were looking for.
But if someone provides that you are all and we're not sure what to show them we'll show them the fluoro
for page instead.
So right here local host three thousand forward slash help.
That is something we explicitly setup support for in Express.
Let's try another U.R.L. which is not going to work over here.
That would be something like local host colon three thousand forward slash pretty much anything.
As an example forward slash me.
We do not have support for forward slash me in our server.
And when I try to visit the page you can see that we get a generic text based error message and this
is coming from Express cannot get forward slash me.
So instead of showing this message we want to show a nice helpful page we could render some HDMI all
to show them a message and we could even include links back to the home page so they can find a page
that actually does exist and then look for whatever they're looking for again.
Now to set up the four or four page four routes which we don't have support for We're gonna need to
customize our Express application just a little bit what we need to do here is set up another route
handler using app dot get we've used that plenty of times before to set up Route handlers like this
one for the route this one for forward slash about forward slash help and forward slash whether at the
end below all of those just before we start up the server we're gonna add one more call to app dot get
and in a moment we'll talk about why it needs to come last.
Now right here we're gonna pass in these same two arguments we've used every time that we called app
dot get the first is the string the second is the function and that function is still gonna get called
with the request object and the response object which we'll be able to use to do whatever it is we need
to do.
Now the real question here is what do we use as the U R L we're trying to match previously we explicitly
typed out the URL for this.
There is no one explicit match it's everything else everything that isn't listed up above to match everything
else.
EXPRESS provides us with the wild card character we can use in our you are L's and right here this means
match anything that hasn't been matched so far.
Now what do we want to do with all of that other stuff.
Well in a few moments we'll render a real handlebars H UML page for the moment though we can just send
back a message as text.
So I'll use response dot send to send back a string saying something like my 4 0 4 page.
Let's go ahead and save app dot J.
S and see what happens.
I'll refresh your forward slash me and what do I get I get my content I get my forum for page showing
up if I refresh.
Forward slash help I would expect to still see what I have here and if I refresh things that is exactly
what's happening.
So now we have to answer the question why does this work.
Why does app dot get need to come last after all other routes are set up.
Well this has to do with how Express is going to end up matching the incoming request with the correct
route handler when Express gets an incoming request it starts to look for a match.
So as an example let's use a forward slash help.
Way up at the top it's going to look through how you set up the application in order.
So first stop it's going to look for a match in the public folder.
There is no forward slash help so it needs to continue looking for a match.
Next up it looks at this handler for the route.
This is not the route.
So this is not a match.
Next up it looks at Forward slash about.
This is not a match either since the U.R.L. is forward slash help and then it looks at this one and
this is a match forward slash help matches up with the U.R.L. on the incoming request.
That means the help page gets rendered and it stops.
It does not look at the other matching routes below because it already found its match so it doesn't
need to continue to look and it won't.
Now what happens for a page like a forward slash meet right here.
It's once again going to start way up top it's going to look for a match in the public folder which
it won't find it's then going to go through all of these routes none that match the route forward slash
about forward slash help and forward slash weather.
None of those are matches it then finds this root handler and with the wildcard character we're saying
everything's a match.
And that's exactly what happens.
Forward slash me is considered a match and the 4 0 4 page gets sent back.
So there we go.
That's all it takes to set up a root handler for a forum for page Inn Express.
Now the wild card character doesn't have to sit all alone there in the you are all and to explore that.
Let's go ahead and work through one more example before I set you off on your challenge to actually
render a HDL forum for page.
Let's go ahead and start with forward slash help.
So imagine that we have a Web site and forward slash help serves as a sort of starting point for our
help.
Documentation.
There is no specific advice there but it links off to other articles.
Maybe one of them is something like forward slash data we visit forward slash data and this is a real
page which shows us some information about the data being used.
Now maybe there are other you are owls after forward slash help that do not exist like forward slash
help forward slash test.
We don't have an article for that that doesn't exist in the 4 0 4 page shows up.
Now we could continue to show the generic forum for page or we could show one to someone we know is
trying to look for help because they are on forward slash help but are not finding the article they
expected.
This could allow our messaging to be a bit more specific and obviously it will allow us to explore a
new technique with Express so over inside of our app.
J.S. file just before our forum for handler.
We're gonna add just one more call to app doc get right here.
You are well followed by the function and this function like all of them.
We get the request and the response.
Now we are gonna use the wildcard character inside of here but it's not going to be the only thing I'm
actually going to start with forward slash help forward slash.
Then the wild card character.
This is going to match any page that hasn't been matched so far that starts with forward slash help
forward slash right here.
We could once again use response.
Dot send it to just send back a simple text based message and I could say something more specific like
help article not found perfect.
Now if we save aspect J S we can see this showing up when I visit forward slash help forward slash test
I refresh the page and what do I get I get help.
Article not found.
Now if I go to a root that does exist like the forward slash help root I do indeed still get that content.
So by using the wild card character we can match either every request or we can match a bunch of requests
that match a specific pattern.
In this case matching anything after forward slash help forward slash as long as it wasn't matched previously.
So if I did have a handler for forward slash help forward slash data that could still run and this would
be a catch all for help for all fours and this would be a catch all for any four or four that occurs.
Now it's challenge time and down below.
I have some comments outlining what I'd like you to do right here.
Your goal is to create and render a 4 0 4 page with handlebars.
That's going to be for generic for all for errors and 4 4 0 4 errors related to help documentation.
So step 1 you're going to create a single new view in that views directory and that HDL page is going
to render the header and footer now right in between the header and footer.
You should use the partials for both of those.
It's going to render an error message which will also be provided to the template.
Now the reason needs a specific view is gonna have the error message provided is because we're gonna
provide a different error messages depending on which one of these two fired.
We will say Page not found for generic for all for messages and we will say a help article not found.
If this is the handler that ends up running so in the end of the day when you visit a you are l like
forward slash what I would expect to see page not found when you visit the U.R.L. forward slash help
forward slash units.
This handler is going to run and I would expect to see these page rendering help article not found.
So take some time to knock all of that out and the hint is that you should only create a single new
handlebars file you want to set it up to be used in both situations.
Taking in the error as one of the data values past to render all right knocked that out.
Test your work and when you're done come back and click play
how'd that go.
I'm gonna kick things off by creating the new view we're gonna need down inside of the views directory
I can create a new file and we can call this something like 4 0 4 dot H B S now in here we want a full
H TSL page remember this is a view and not a partial.
Now maybe you built it up from scratch.
If so props to you maybe you copied and pasted one of the other views gutting it and changing it to
fit your needs.
That would work as well.
So right here I could take the index page as an example I could copy it.
I could bring it over to the forum for page and change it to fit my needs.
First up we're not going to load the javascript file into this page so I'll remove that.
The only external file we're going to load in is our style sheet.
And from there we already have the header and footer in place which is great.
That brings us to step 2 making sure we render a message in between the two.
So right here inside of a paragraph I'm going to provide the actual message.
Now you could have called this anything you wanted to.
I'm going to call mine an error message.
Perfect.
Now we have this generic error page that can be used for both of our 4 0 4 routes.
It's time to take things into app dot J S and actually swap out our response.
Dot send calls with response dot render.
I'm gonna kick things off with the generic forum for page so down below I'll remove everything inside
of the callback and I'll replace it with response dot render.
And in this case what am I rendering I am rendering the 4 0 4 view we created.
Down below.
And what data Am I providing.
Well I know I need to provide a title and name because those are used by the header in the footer and
I also want to provide a value for my error message which I just set up support for.
So right here title I could say something like 4 0 for name.
I'll continue to put my name as the person responsible for the page.
Then after that we're going to setup error message matching up exactly with what we used inside of the
view and we can pick a message for this one.
Now for the generic forum for something like Page Not Found.
Would get the job done before we go any further.
Let's test out our work.
I'm gonna head into the browser and go to a page like forward slash.
What which does not exist when I do.
What do I get I get for a four page not found and I could then click a link over to a page that does
exist which is great for me here.
Let's go ahead and make sure that when someone visits a bad help article they get the four for a page
but with a different message.
So for that we're going to remove response dot send and I will replace it with response dot render.
Once again we are still rendering that floral 4 page just with different content.
Right here.
Let's provide that content.
Title I could say something like floral for or floral for help.
Name.
I'll stick with the same value we've used before and then.
Error message.
And this is going to change instead of printing.
Page Not Found.
I'd like to go ahead and print help.
Article not found.
So right here inside of quotes help article not found.
Excellent.
So when someone has a generic forum for they get this when it's a help specific forum for they get what
we have above now we can test things out making sure the help for all for works.
I'm going to remove the challenge comments I'm going to ensure that all files are saved and then we're
going to move over into the browser forward slash help forward slash data would get the job done.
And right here I see help article not found which is fantastic.
From there I could click over to the help page and I could view an article that actually does exist.
So using the wild card character with Express is going to allow us to set up more complex match routing
instead of just matching exact routes we can provide the wild card to match a wider range of you or
else.
All right that is it for this one.
I'll see you next time.