Up until this point our express reps have sent back completely unstaged h t m l no javascript included
no C Ss just pure h t m l.
In this video I'm going to show you how we can start to include assets like a stylesheet or some Javascript
.
And I'm also going to show you how we can dry up our templates using what are known as Parshall's.
So let's get started.
I'm using the same app that I've been using for the past two videos where we have our app.
Yes and we have three main routes.
We have the route route which renders the home that Ejay as template that has an H1 and the adorable
image of the Palm C and then we also have the fall in love with Slash thing.
The variable thing route which will then render the love toward each template and it will display you
fell in love with and then whatever we wrote in the route.
And then if statement and then a little paragraph at the bottom and then we also have the slash posts
route that renders the posts E.J. as template and inside of that.
We have two loops.
Now let's say that we want to include some styles.
So as you know by now I like the color purple.
Let's say I wanted to make all of the bodies purple all the text color on all the different templates
should be purple.
Let's start with the Post page and what I could do is include a style tag so that style opening and
closing and then I can write my style in here body and will do color purple just like that and save
.
And remember that this isn't really the ideal way of including styles and I'm showing it to you first
for a reason because we're going to refactor it and improve it in just a moment but let's just make
sure it works.
So color purple on the body.
Let's start the server node app.
Yes let's go over to the browser and refresh on the Post's page and you can see we get purple.
And if I went to another route I don't get purple.
And that's because they're totally separate templates and we only added the style tag to the post template
.
So if I want everything to be purple on all three templates I could add in another style tag in home
that Ejay us and the same style tag on love.
Yes and save restarting the server refresh my page and I get a purple H-1 here and if I go to fall in
love with Rusty I also get purple text here from that style tag.
There are two main issues facing us here.
One is the issue that this code is being repeated three different times.
If you want identical styles on three different templates there has to be a better way to accomplish
that.
And there is.
And we're going to address that second.
We're going to start by addressing this issue of using the style tag which is not a good idea.
What we want to do instead is use an external style sheet and linked to that style sheet using the link
tag.
So I'm going to write that link tag first which won't work because we don't have a style sheet yet but
we'll create that second.
So link and we need to provide raúl equal style sheet and then.
And this needs to be the name of our style sheet and we'll just call it Dot.
SS Okay so this is only on the Post's E.J. as template will save now.
And let's go create that apt.
C Ss except rather than creating it in the same directory as are apt J Yes we're actually going to make
another directory where we'll put all of our style sheets all the javascript's that we write and then
any other assets that we want are available and we're going to call it public and they can be named
anything but public is a very common and conventional name for this directory.
Well make sure when the right place.
And then make directory public and will also create inside a public public slash app that see assess
which is the name of our file here and save and you might be thinking OK wait a minute shouldn't this
be public.
Slash assess.
And unfortunately the answer is no.
We will leave it as apt upsy SS will tell express that our style sheets and javascript's are inside
of the public directory and it will serve the public directory up for us so that we can link to things
by just using the file names so I'll show you that in just a moment.
Let's open up the public slash app that see SS file and add in some styles.
Let's do something different.
Will do body or background.
It's going to be hideous.
We will do background us yellow and color still purple.
OK so now we have a really gross style she defined we can close out of here and we'll know if it's working
.
If this post E.J. as template shows up with a hideous yellow background in purple text it's not going
to work just yet but I'll show you just so that you see that for yourself.
So Noad apt.
J.S. and we go back and refresh the page and we need to go to the post page and we don't get anything
.
And if I open up the consul here I get an error that says failed to load research.
The server responded the status of 404 and it couldn't find apparat success.
And the reason for this is pretty straightforward.
When you create a web app and we use Express to start a web server it doesn't just automatically serve
every single file that it sees it doesn't know that we want to do that.
And the default is to not serve anything at all.
Aside from the views directory.
So if we want anything else we need to tell express explicitly hey I need you to serve my public directory
or whatever other directors we have.
We need to tell express to do that and likely express provides an easy way for us to do that inside
of our act.
Yes up top I'm going to add an app to use and then in parentheses.
EXPRESS Does static.
And then in parentheses again the word public which is the name for our directory.
And this will tell express to serve the content of the public directory.
And now if I restart my server and refresh the page over here close the consulate we get our yellow
background and our purple font and we don't get any errors in the council.
And if you want to include those style sheets on other pages you would just go and copy this link tag
and put it up top.
And of course we could have multiple style sheets as well if we wanted to and we could just link to
them by giving them different names and making sure they're both in the public directory.
Before we move on to Parshall's want to take a moment to show you a really quick thing we can do to
make your code a little bit shorter notice that we're typing home that each E.J. yes loved.
E.J. has posted E.J..
Yes this is really minor but we can actually tell express that we're going to use Ejay us ahead of time
and we can leave these off and just write home and evolve and it will automatically expect the files
to be Ejaz files.
And to do that we use app data set view engine and then we pass the second argument as E.J. s just like
that.
And if we save restart the server it will now expect those files to be Ejaz files.
And if we refresh.
Nothing should change at all.
It still works.
And now we don't have to explicitly say that Ejay us.
So that's a very minor change.
The next thing I want to show you is a little more significant and it's going to help us dry up our
template.
Right now we have this style sheet.
This link to the style sheet repeated in all the templates but there's also something much more significant
that we're missing which is our entire time boiler plate.
We're missing the duct tape here.
Andrew missing are aged him old tags and all the regular boilerplate that we expect head and inside
of the head.
We need the title and we'll give our app the title.
Call it demo app and then we need the body as well.
And then inside the body we should be putting this content and then we need to do that exact same thing
on all of the other files.
And I'm not going to do that because it's a waste of time and there's an easier solution where we don't
have to copy this code and put it on every single template just like we shouldn't have to copy this
single link tag and put that on every single template as well.
And the way that we get around that is by using what are called Parshall's and Parshall's are basically
files templates that we can write that we can include in other templates will create a template that
looks like this.
So we'll have the upper half of our boiler plate everything in the head.
This will almost always be the same on every single page that we create on a given site.
Same style sheet the same title.
So we'll just make this its own template.
And then at the bottom we'll make this its own template here.
And then in between the two will have our content that changes depending on what template we're on or
depending on what page we're on.
So what we'll do is basically turn this into its own template.
Turn this into its own template and then we just use those templates we refer to them in each one of
these files.
So we would say something like And this isn't valid code but we would do something like include header
template and then at the bottom would do the same thing except for the footer.
So we need to create those templates or Parshall's and to do that we'll make a new directory instead
of views and we'll call that directory Parshall's.
So we'll do and make directory views slash Parshall's just like that.
And then instead of Parshall's we're going to make two files and the first one will be use slash Parshall's
slash hetter that each us and then we'll make another partial exact same except footer and you could
also call these like top and bottom Ejaz first and second whatever you want to call them but header
and footer is definitely the standard name.
So I'll make those two files and then I'll open them up and this time on the school over here and open
up the header and I'm going to copy in this boilerplate just cut it out and put this over here instead
of header.
So this is what we want at the top of every page and then instead of footer all that we really want
is the bottom of our template which is just the body and the closing team tag.
Just like that.
And if we wanted something else.
So I'll do something a little more obvious.
Let's just do a paragraph at the bottom that says something like trademark or some other footer text
that we would see on a Web site.
We'll just leave it at that.
And so we expect to see this on every page where we include the footer.
Partial.
OK.
So the two partials are done.
Close those out.
Fix this one just like this.
All right save.
And now we want to include the partials.
So let's start with our love.
Each of us and now we'll include that header partial.
So we need to use a new bit of code in Ejay as tags erate include.
And then the name of the file which is just hetter and we don't have to add that Ejay us because it
is already looking for Ejaz files.
So just include header and this actually won't work right away and I'll show you why.
Let me put the footer one aswell in here.
And if I start the server make sure I'll just clear some space here and then node.
Apogee Yes.
And if you refresh the page and this is only included on the love study J.S. template.
So we need to go to slash.
Fall in love with resti and we get an error.
No such file or directory.
Yes demo slash views slash hetter.
E.J. Yes.
So this tells us two things.
One it knows it's supposed to be an Ejaz file.
It's looking for a header.
Yes but it's looking directly in the user directory.
But we want it to look in views slash Parshall's slash heterodox Ejay us as you can see here views slash
Parshall's.
So we need to change our path here a little bit and we need to change it to say Parshall's slash Hetter
and Parshall's slash footer.
However that's still not going to fix it.
And I'll show you one more time what happens when I start this up again and refresh the partial has
been included just fine.
And if we go to the elements you can see that we get the footer at the bottom and we have the body.
And each time closing tags but the styles aren't being applied.
It should be purple and yellow and it's just black and white.
And if we look in the head we do have our link tag and it's linking to a file called apcupsd.
SS But this isn't working.
And if we look at the sources tab you'll see that we have this Rustie file that was sent back and it
has our header and it has the main content and it also has the footer.
So this is like the one assembled file because remember we send one thing back one response.
So it makes this one file for us with our three Parshall's or two Parshall's Plus our content and it
sends this back.
And then there's also this ACT-UP see says that's totally empty.
And what that means is that we've linked to our APS-C assessed incorrectly.
So it's just appearing as an empty file and it's a really simple fix although we need to do is add a
slash right here.
I went through all that for a reason which is to show you the importance of paths and making sure that
we have our paths set up correctly.
So there's a difference between ACT-UP success and slash after the assess when we add the slash.
It basically says look for us says not in the same directory that you're in right now but in the root
directory.
Let me show you a better illustration.
Right now it's looking for success in the same directory as this Rusti template.
Now if I go save it with the slash and restart the server they go back here and I refresh now.
Take a look.
Our styles work.
Also notice we have the file with the h t m l and we have our apt the SS that is now outside of that
directory it's not in the same folder and it has the correct styles which means that it found the file
that we needed to find.
So that slush seems like it's very minor but it's actually an important detail.
So slash and then the name of our style sheet anything inside the public directory.
So eventually it will look something like Slash stylesheets slash ACT-UP see assess and then we'll have
a script tag where we have our source code to slash scripts slash maynt.
Yes.
And so we'll have inside the public directory scripts directory and stylesheets directory.
For now though we only have one style sheet so we'll leave it like this.
Let's quickly finish up and add in the partials to the other files as well.
So in this one our home that each of us will pay set in and then at the bottom pasted in a swell and
change it to be footer and save and then post it.
Yes.
Same thing.
We want the header and footer.
Get rid of that as well on all of the files.
Parshall's slash footer.
And that should be good for us.
Let's refresh restart the server back here and this should look the same.
Now if we go to the right path we also get our styles and if we go to slash posts we get the styles
there as well.
All right.
So let's recap all of this.
One of the first things that we did was create the public directory and add a style sheet inside of
it and in order for that to work we had to make sure to tell express to serve the public directory.
Then once we did that we made a small change which was to tell express that all of our templates will
be yes unless otherwise noted.
So we don't have to write each Yes after every template name.
And then the big change that we made was introducing Parshall's.
So we made a directory called Parshall's can be named anything.
Some people call it layouts Parshall's is also very common.
And then we had two files or header and footer and the whole point of this was just to help dry up our
code so that we didn't have to add this to every single template.
Instead we go to our template and all that we have to do is write include Parshall's slash hetter and
we're not limited just to header and footer we might have one for the nav bar if we have a nav bar on
every single page.
We could have another partial that we include old Parshall's slash neph.
So there aren't any rules on what we can and can't do.
But most common are header and footer.
All right so that's it