In the last video you learned how to use Express to send back HDL that allowed us to render some h t
an L for pages like the home page.
See and hear and the about page which we configured down below.
Now we are indeed sending back HDL but typing HDL in a string in a javascript file is gonna get out
of hand really quickly as we add more to the given web page.
It would be nice if we could write our HDL in separate H2 CML files and have the express server serve
those up and we can.
So what we're gonna do is configure express to serve up an entire directory of assets that could contain
h t CML files CSA s files client side JavaScript videos images and more.
So let's go ahead and start this process off.
First up let's create the directory that we're gonna serve up.
This is gonna live in the web server folder alongside of node modules and alongside of source.
And I'm going to call this public anything that goes inside of here.
It's gonna be served up as part of our Express server.
In here we can put an H2 UML files and our other assets for the moment let's add a single file index
dot HDMI out index dot HDL as a special file the name means that it's gonna get served up by default.
So this is the page that will eventually show up at the root of our Web site.
Now let's go ahead and actually create a very basic HDL document.
I'm gonna start up top with my doc type so I'm going to open and close the carrots then.
Exclamation mark.
Doc type to specify what type of document this is.
And it is indeed an HDMI document.
Den down below we can add the document itself.
We start off with our h t tag opening and closing that inside of there we add two other tags we add
a head tag where we're going to configure other things later on like setting up the style sheet for
this document and below head but still inside of each UML we're going to set up body where we're gonna
put everything that's going to display on the screen for the moment we're gonna display just one thing
using the H one element which we already used.
I'm going to display a title and I'll use something different.
And just so we can see the change I'll say from a static file.
Perfect.
So now we have this basic HDL document in the public folder.
The goal is to teach express how to serve up the contents of that directory.
And one important piece of information we need is the path to the public folder.
And it can be a relative path.
It needs to be an absolute path from the route of your machine.
Now to get that done node actually provides us with two very handy variables.
So we're gonna have a quick aside to talk about these variables then we'll actually integrate them into
the application to point express to the public folder.
Right here though let's go ahead and just use console dialog twice.
We're going to print to values that node provides the first is underscore underscore dir name which
is short for directory name and the other in another console dialog call is underscore underscore file
name.
Now if we actually go ahead and run the program it's going to print the value for both of these to the
console.
I'm gonna save the file node mine is gonna restart things and what do we see down below.
The first one dir name that contains a path to the directory.
The current script lives in so the app that J.S. script lives in the source directory and down below
I have the complete path from the root of my hard drive all the way to the source folder.
Now obviously your path is going to look a bit different if you have your application somewhere else
on your machine and your name is not Andrew which it's likely not though shout out to all the other
Andrews and the other string we have printing is the underscore underscore file name value.
This is very similar to dir name though instead of providing the path to the directory the file lives
in it provides the path to the file itself.
Now we're going to use the dir name variable to get the correct path to the public directory.
We currently don't have that path but we can do a little path manipulation to get it.
Now it's important to note that both of these values they're provided by that wrapper function.
So if you remember when we debug node j s we saw that our code gets wrapped in this function and that
function provided various things to our code like the required function which we've used plenty of times
before.
That is also where dir name and file name come from.
Now it does name and doesn't get us exactly there but it's pretty close.
This is pointing to the source directory.
We need it to point to the public folder so we can provide express with that path.
Now there are two ways we could do this.
We could use a little string manipulation to try to break this string up and get it to what we want
it to be.
But there's actually a core node module called Path that provides us a ton of great utilities for working
with paths.
This is done in a cross OS compatible way and that's the tool we're gonna use.
We can find more about path by heading over to the node j asked documentation at node j s dot org.
I mean I click on docs head over to the API docs and from here we are going to scroll down to P for
path now path provides us with a couple of methods that makes it easy to manipulate string paths.
We're only going to use one that is path dot joint.
Let's go ahead and see how it works over in visual studio code.
I'm going to start by loading this core module in now typically Oliver require my core modules before
I require my NPM modules.
And that's done just to stay organized.
It is not necessary.
So right here.
Const path equals.
We are going to require a path and there's no need to install it since it is a core node module.
It is built in and now down below.
We can use it.
I'm going to remove file name from our second call to console dot log.
And we're gonna use path inside of here to try to manipulate the path correctly.
I'll leave this first call in place so we can see the original path we started with right here.
We'll be using path dot join no path dot join is indeed a function so let's call it as such and it's
going to return the final path and we pass to the individual pieces to the path.
And it does the job of manipulating the string for us.
Let's start with just one argument to join underscore underscore dir name.
Now if I'm gonna do this and save the file what I'm gonna end up getting is the exact same path for
each by providing just a single argument to join.
We haven't actually joined any paths together since we just have one from here though we can go ahead
and pass in a second argument a string and manipulate that path.
So if I wanted to go up a folder I could use dot dot to get that done.
Now if I were to save the program I can see that dir name it points to source.
Well my second log points to the web server folder from here I could use forward slash dot dot if I
wanted to go up another directory and now I can see that the string is pointing to the node course folder.
Now for our purposes we don't want to go up to folders.
I want to go up a single folder getting out of the source directory then I want to use forward slash
public to point to the public directory.
If I go ahead and save African J.S. down below that is exactly what I get.
We originally had a path to the source directory.
We used the path module to get a path to the public directory and now we can go ahead and configure
express to serve that directory up we can serve up the directory by adding a single line right here
after we create the Express application.
This is going to be a call to app dot use now app dot use is we're going to explore in detail in about
three or four lectures for the moment.
We're going to gloss over what exactly it's doing though I promise we'll explore it in detail soon.
For now all you need to know is that it's a way to customize your server.
And in this video we're going to customize the server to serve out that folder.
Now we need to pass to it something else and there's something else we're going to provide comes from
Express.
We are going to call express dot static so express dot static is a function.
We're calling it and we're passing its return value into use.
Now static takes the path to the folder.
We want to serve up and we have that.
It's right here in console log.
It starts with the path call to join.
And it ends right here with the closing parentheses for the join call.
I'm going to copy that to the clipboard.
I'm going to paste it in.
And there we go.
That is our single line in place.
Now we can always undo that change and create a separate variable and reference that.
So for example I could create a const right here I could call this one.
Something like public directory path.
And then I could store the value on that variable and then I could reference the variable down below.
Either way would work.
I'm going to pass.
Public directory path to the static function getting things done like we had before.
Now we can remove our console dialog calls and our server is all set up.
We generate the path to the public folder we provide it to static which in some way configure is our
Express application and now we can test things out and to test things out.
We're gonna go to the root of our web server so make sure to save your files over inside of local host
three thousand.
I'm just gonna refresh this home page and what do I see I see from a static file showing up.
So this is the contents of our HDL file which we set up in the public folder.
Now we could also visit this H2 UML page by providing the explicit path so local host colon three thousand
forward slash index dot HDMI out but since index down H2 UML has a special meaning when related to web
servers.
We can also leave the path off if we're just going to the root of the site.
This makes sure that something loads if they don't explicitly provide a path.
Now this also means that we're never going to see the other root handler.
We set up down below Express is going to work through your application until it finds a match for that
route.
In the case of our Express static call it is indeed going to find a match.
It's going to find index dot HDL and that's going to match the route you are L because the file has
a special name which means that this is never actually going to run.
So we could remove it as it no longer serves much of a purpose.
So here we still have four distinct pages though one is coming from that static directory.
Now that we have everything set up it's gonna be up to you to add a couple more pages into the mix.
So let's talk about what I'd like you to do.
I'm gonna pace some challenged comments in right here right here.
Your goal is to create two more H2 PML files.
So in the end of the day both the help page and the about page.
Those aren't going to get set up as individual routes like we're currently setting them up.
Those are going to get served up as HDL pages and we're going to put those in public.
Now weather is going to stay exactly as it is as that'll actually serve up Jason a little bit later
so up above.
What are you gonna do.
You'll create an HD AML page for about with the about titles showing up and then you're going to create
an HDL page for help with the help title showing up.
Step 3 you're going to remove the old root handlers for help and about down below and 4 you're going
to visit both HDL documents in the browser to make sure you're actually seeing the files to test your
work.
Now when it comes to creating those files you can always use the contents of index dot H to UML as a
template and you can just swap out the title text.
Take some time to knock that out test your work and when you're done come back and click play
how that go.
I'm going to kick things off with step number one.
I'll be creating the h t AML page for about so right here.
I could call that something like about Dot HDL and then I'm gonna start this off using the contents
of index dot HDL so I'll highlight everything copy it to the clipboard.
Bring it over to the new file and paste it in from there.
I'm going to swap out the H one with the old text and I'll replace it with about next up we can set
up the help page so that is step number two.
I'm going to create a new file in the public directory that's gonna be help dot HDL and we'll paste
the same boilerplate in there.
Swapping out the title once again with help.
Now that we have this in place we have steps 1 and 2 done from there.
We want to remove the old root handlers so I'm going to remove forward slash help and forward slash
about and last up.
We're going to visit both in the browser to make sure they're showing up correctly.
So over here I have index dot HDL.
I'm gonna swap that out for about Dot HDL.
I see my about page which is great.
Then I'll swap that out for help dot HDL and right here I see my help page which is also fantastic.
So now we have a static directory where we can put all of the assets that are gonna make up our Web
site in the next video.
We're going to explore how we can include other assets like CSI s files client side JavaScript images
and more.
Now remember for the moment this one line is not supposed to make complete sense.
We're adding it now so we can actually serve up the directory but in three or four lessons we'll cover
what it's doing in detail.
All right I'll see you in the next video when we're gonna continue to build out the assets for our site.