You now have express serving up the contents of the public directory in this video.
I want to take a break from adding anything new to the node j s application and I want to focus on how
we could continue to build out the public folder adding our other assets into the mix and using them
in our HDL files.
So things like CSX style sheets to style the application client side JavaScript to add some dynamic
user interaction and images to show on the screen.
Now let's go ahead and kick things off with the CSX.
We're going to add if you're not familiar with CSX that's OK we're only going to use a little bit of
CSX in this class and they CSX.
We do use.
I'll walk you through.
So let's go ahead and kick this process off now.
The file that we're going to create needs to be loaded by the browser which means it needs to go in
the public folder as this is the only directory set up to be exposed by the web server so we can put
our CSX file in the public folder.
And I'm actually going to stay organized and create a sub directory called CSX for all of my style sheets
though for the moment we'll only have one inside of here.
We can create our brand new style sheet.
I'm going to call this Stiles dot CSX for now.
We have very simple Web pages where we just render a title for each page since we only have one thing
showing up.
We should probably add a style to that so we can actually see if our style sheet is loading correctly.
All we're going to do is change the color of the title.
We're seeing to start we define which elements we're trying to style in this case.
It's just our H ones.
So I'm going to type out a one followed by an opening and closing curly brace in here we define all
of these style properties we want to apply to those headers and for the moment we're just going to apply
one which is going to be color.
Color allows you to set the text color right here after the colon.
I'm gonna type out gray followed by a semicolon and there we go.
We have a completely valid style sheet.
Now just because we have it created in the public folder doesn't mean it's actually going to be used.
If I were to head over to local host three thousand the root of the site we're gonna see that it's not
visible here and it's not visible on any of our other pages as well.
The title still shows up in black as opposed to gray.
That's because we haven't loaded it in in our HDL files.
So let's go ahead and do that starting with index done HDMI out right here.
I'm gonna go ahead and setup a new element inside of head.
This is link right here less than link greater than and the link is an empty element which means it
actually does not have a closing tag like we see with H1 and its closing tag here or body and its closing
tag down below link sits just like this.
Now we set up on a link to attributes these are key value pairs allowing us to define specific values
link to set up a style sheet expects those two to be set right here.
The first is Rel which is short for relationship.
What exactly are we linking in in this case style sheet.
Is the value we have to apply then each ref This is the path to the file.
We're trying to load.
Now it's important to note that this path is relative to our current location and it's absolute start.
Is the public directory.
What do I mean by that.
Well dot forward slash is obviously going to leave us in this public directory where index dot HDL lives.
From there we could use C Ss forward slash styles dot CSX and that would indeed work.
This is a relative path.
So if I go ahead and refresh things I can see that now my title is great which is great.
Now that's the relative path version.
We can also use an absolute path the absolute path starts with a forward slash.
Now typically if you started a path with a forward slash on your machine that would bring you to the
route of the hard drive.
But this is being accessed in the browser and thank God it doesn't have access to your hard drive otherwise
anyone could put up a Web site that reads files you wouldn't want them to read.
This is relative to the web server route which we set up as the public folder.
So that would be forward slash CSX forward slash styles dot CSX.
And this is that you are well we're going to end up using now if we were to save things and refresh
things in the browser we can see that once again we do still indeed have the gray style showing up.
So we created a styles sheet in the public folder.
We loaded it in and we were able to style our application from here we could add other style sheets
and we could add more content to these style sheets to create a complex dynamic web site.
Now from here we could take the link element.
We can copy it over to our other files to make sure these style sheet loads there as well.
I'm going to paste it into both HDL files and I'll go ahead and save things as well.
So that's loading in the style sheet.
I also want to show you how you can load in a client side JavaScript file to get that done once again
and we're gonna have to add a new file to the public folder.
And this is gonna be a J.S. file like we did with our style sheets.
I'm going to create a new folder in the public directory called J.
S and in the J S directory we can just make a single style we can call this one something like app J
J.S. and this is a javascript file which will actually fill out a bit later to do something meaningful
for the moment.
We're just going to do something not meaningful and print a message to the screen so we can at least
see if it's loading up right here.
Client side JavaScript file is loaded.
Perfect.
So go ahead and print some message in your javascript file.
We can then go ahead and actually close that down as we're not going to make any changes to it for a
few lessons and from here we're going to make sure that it gets loaded in to index dot HCM out.
We're actually not going to load it into the other pages and you'll learn why a bit later.
So right here how do we get that done to do that.
We use a script tag in the head.
Now script is not an empty element which means we do setup an opening and closing tag which you can
see that Visual Studio code automatically completed for me.
And then we provide the path to the file.
Much like we did in the H ref attribute though we do it with the script tag via the source attribute.
So source equals right here.
That would be forward slash J.S. forward slash app dot J s perfect.
Now that we have this in place we can make sure that our message shows up when we run the HD CML file.
Now it's not gonna show up on any browsers page but it will show up in the developer tools.
We can open those by going to the settings menu more tools developer tools.
And once we're here we're gonna see something pretty similar though a little more complex than what
we had when we debug node j s we're just looking for this console tab where we can view things that
were output it to the console and right here I have my message client side JavaScript file is loaded.
So we have a CSX file we have a javascript file.
Let's go ahead and wrap things up by adding an image into the mix as that's one of the last common assets
you would definitely end up using if you were building pretty much any kind of Web site out there.
This means we are going to need an image we can load into one of our H2 PML files.
We're gonna get a profile picture of ourselves and put that on the about page.
So it shows up under some description about what the Web site is all about.
Now if you have a picture of yourself you can go ahead and bring that into the public directory.
I'm going to use a picture of myself at links dot Meade dot I O forward slash.
Pick one.
Now obviously you probably don't want to use a picture of me but if you don't have a picture of yourself
handy you can always use what I have at links dot Mead dot I O forward slash pic to.
This is a picture of a robot and you can use that for your application.
So either image would work just fine or an image you have on your machine.
I'm going to go ahead and grab the picture of myself and once I have that downloaded I'm going to make
sure it gets into the right directory.
So I'm going to open up my finder or the file explorer on Windows.
I'm going to navigate to the downloads area and find my picture from there.
We have to get it into the desktop file.
So I have to copy it to the clipboard.
I'm going to use the keyboard shortcut but you can always use the right click copy image and then I'm
going to go to desktop followed by that into the node course directory where we have web server then
we go into the public folder.
And right here we don't have a place for images.
We could just stick it right here alongside of our HDMI file but we could also create a new folder for
those right here I am G inside of there.
I'll paste in that file I copied before.
So now that we have the image in the images directory in the public folder it's going to be accessible
to anyone who has an internet connection.
I can see it showing up right here and we can actually load it in to our page to do that right below
the H one.
We are going to setup an image element.
This is also an empty element.
So there is no closing tag.
And we specify the path to the image using these source attribute like we did with the script.
So forward slash image forward slash me dot PMG is going to get the job done.
Now if we save things we can pull up the about page and make sure it's actually showing up over in the
browser I'm going to go to forward slash about Dot HDL and what do I see.
I see the title with the picture of me down below.
If I were to head over to the other pages I would not see this picture as it's only listed here.
Now we could always go ahead and target this AMG element if we wanted to.
Over in these styles file.
Let's go ahead and add a couple of new lines and we're gonna set up another set of styles.
This time I'm going to target my image elements.
We just have one.
I'm going to set up the curly braces and we're gonna make the image a bit smaller than it currently
is.
I'm gonna say that I want the image to be two hundred and fifty pixels wide.
So with equals so right after with we have the colon space then 2 5 0 p x 4 pixels followed by the semicolon.
And we're done.
Now we can go ahead and refresh the page and we can see our image shows up at a more reasonable size.
Now that we have this in place we've taken a little tour of all of the different assets we can include
in our web server as we're building out our Web sites.
That's where we're going to stop for this little tour of the front end.
We have h to UML javascript CSX and images all being loaded in with our server in the next video.
We're going to turn our attention back towards node j.
S and we're gonna continue to build out and expand on our application.
I'm excited to get to it.
So stay tuned and I'll see you in the next one.