Welcome back in this lesson I'm going to show you how we can write.
H m l.
In a separate file and we can send that file back in the response rather than what we've been doing
so far using redstart send.
There are three main objectives here.
The first is to use redstart render to render him out to send back a file from each file and that will
make more sense once we talk about what each of us is.
And that's the next objective.
Explain what Ejaz is and why we use it.
And then lastly pass variables to Ejay as templates.
So to get started here I'm going to need a new Express app and I'm going to go through creating the
basic express app from scratch which I won't continue doing in every video but it still is pretty early
on in the course.
And I just want to make sure you get used to seeing it and doing it because it's something that you'll
be doing nonstop.
So I have a directory called More express where I'll be working from for this unit and I'll make a new
directory inside of that and we'll just call this Ejay us demo.
And then instead of Ejaz demo we'll run NPM in it and I'll just speed through this.
So that name is fine.
Version is fine description is empty.
I always like to change this to app.
Yes.
Just a personal preference.
Hit enter a few more times.
You don't need to fill any of those and there we go.
And now if we do allow us we have a package that Jason let's create our act out J us and we'll also
run NPM install express dash dash save.
There we go.
Now let's open up the jazz file and start adding some code in there.
And rather than just doing ls and then clicking on J.S. and clicking on open I recently found another
way of doing that.
That Cloud 9 recently added which is if you type C9 space and then the name of a file or the path to
a file.
So C9 base app.
J Yes that will open it up for you in the editor.
It's much faster than having to type ls and then click on the file and then click on Open.
So let's get the basic express code in here so far express equals require express and then var app equals
express execute it as a function.
One thing that you will occasionally see is this where someone said Savar app equal to require express
and then just run it as a function immediately.
Most people though will do it like this in two seperate steps and most commonly you'll just see Xpress
and app that those can be anything.
Now let's get the act up.
Listen going at the very bottom which will start the server so it would need the port which is process
that EMV port and then process that D-NV IP and those are environment variables that cloud 9 has set
up that we're accessing the port and IP address.
And then I add in my callback that will run once the server has been set up once it's listening and
we'll just see what comes about log.
The server is listening just like that and will save.
Now let's add in our first route and we will do the route route.
I always like to start there and that's always a confusing phrase to some of my students because this
word that I pronounce route some of them will pronounce as root.
I try to make it very clear when I say roots.
I'm only talking about R O T as in this.
The root route.
OK so let's add that in apt get root or slash and then our callback function will be run whenever a
request to get requests is made to slash and then will have these two objects request in response and
we'll go ahead and just call the rez send and we'll just do a simple thing.
Welcome to the home page.
Just like that should all be review at this point.
Let's start the server up so node j.
Looks like everything's good.
Let's now go to the root page here and refresh.
Welcome to the home page.
Obviously this type of content a single line of text is pretty boring.
What we can do to spruce it up a little bit is we can go back in here and make this some H-2A Mel.
If we wanted to just like that and then we can add in below that and H-2 that says blah blah.
Just like that.
There we go.
And if we save this and restart the server.
And then we go back here and refresh.
We get HVM albums being rendered to us but that's still incredibly painful to actually type out an entire
page.
It's technically possible but it would be so difficult.
It's just not a good idea.
So luckily there's an easier way where we can write all of our code in a separate file all the time
that we want all the C Ss and yes all the front end javascript that we want to send back to the user
so we can use a method called render and that render method lives on the response object whatever we're
calling it.
In our case revs so rest don't render.
And then we give it a name of a file like home page or home dot aged him or Dogstar aged him out or
something like that.
And of course we need to have that file created and it needs to have some content in it.
But even before we do that there is a small issue I'll get rid of this line and the problem is when
we use Express we don't write plain h m l files.
There are ways of doing that.
It requires a little more setup but most of our web apps aren't going to be just standard Tim static
files that are sent back.
What we're looking for are dynamic html files which are called templates and in the second half of this
video we'll introduce those.
But for now I'm going to go here and change this to E.J. s and all that I'll say about E.J. is that
it stands for embedded javascript and that you'll learn a lot more about it in about five minutes when
it get request is made to slash our code will render a file called Dogstar.
Yes.
And let's change it to home just because that makes more sense with the route route.
And so we need to create that file and we actually don't create it in the same directory as actually
us.
What we need to do is make a new directory called views and that's not an arbitrary name that's a directory
that express is going to look for.
So whenever we render a file whatever it's called it's going to look first in the views directory and
try and find this exact file inside a fuse.
So now let's create that.
So I'll do a touch views slash home that Ejay us just like that.
And then the next thing I want to do is add some content.
So let's open that file with that new C9 command C-9 views slash home.
E.J..
Yes and let's add some stuff in here.
This is the home page.
Let's fix this.
And let's also add an image and I have an image I'd like to use here.
This is something called a palm ski.
It's a Pomeranian and a husky mix.
Allegedly this is a full grown Parsky which is pretty crazy if that's true.
It looks like a miniaturised husky or just a permanent husky puppy.
Anyway so we'll copy this URL and go back.
And of course you can do any image that you'd like.
You don't have to go find that or typeless you are Ellaby yourself and will save.
And now we'll close out of this and we should be good to go.
Except for missing one thing and I'm actually going to let express tell us what we're missing.
We'll get an error message.
So I'm going to clear this just to make some more room for you.
And now I'm going to start the server.
And when we go to the route route it will call the render method which will look for home.
Yes.
Inside of a directory called views.
And then once it finds it it will take the content and send that back in the response so it we'll go
back to our app and refresh and we get an error message here it says cannot find Montreuil.
E.J..
Yes.
And what that means is that express is looking for a package called Ejay us that it needs to use in
order to render and Ejaz file.
So we need to NPM install Ejay us and this will all make sense why we're using Ejaz in just a few minutes
.
But for now just trust me NPM install Ejay us and we'll do dash dash save.
And once that finishes we can just do node.
J.S. again and refresh the page now and we get this is the home page and our adorable puppies last full
grown Tomsky.
So now we have a file of h t m l that we've written that we're now sending back to the user and that's
being rendered in the browser.
And that's great but this is still extremely limited for web applications.
This will only send back the exact same page every single time and in most web apps that's not what
we want.
Maybe the home page is the same or the log in page is the same.
But then once the user has logged in for example there's usually a message that says welcome back calls
or welcome back.
Adorable Parsky puppy slash adult.
Let me show you what I mean with a quick example.
So I'll go back and add in a new route and our route is going to be something like Slash.
Fall in love with and then a thing like Rustie and then we can also go to fall in love with a palm ski
.
I think that's how it's spelled.
And we want an HMO file that will show us a message that contains the variable from the route that path
parameter.
So it would say something like you fell in love with rusty so to do that you need to define or get slash
fall in love with Slash thing.
That's what we'll call it.
And then we need our request and response inside the callback.
And just like the last exercise will capture thing which will be VAR's thing equals request up harams
thing and then we can start with this simple red dot send just like we did with the animal speaking
exercise.
The pig says oink.
The cow says moo can do the same thing here.
So we'll just say you fell in love with a plus thing.
All right.
So this is a review and if I restart the server now and I go back and now I go to slash fall in love
with Slash ske we get you fell in love with Tomsky which isnt exactly grammatically correct but then
again neither is the word pomps.
So I'll go back and now what we want to do is figure out how we can send an H to him I'll file back
that says you fell in love with plus and then some thing we can start by creating the file and we'll
just call this file inside the views directory and call it whatever you want of course but I'll just
go with love E.J. as to keep it short and then we'll fill that in.
So we need C-9 views slash.
Love that.
Yes we have that open and let's start by just adding in you fell in love with and then we need to fill
in the blank.
But we don't know what to put here yet so we'll just leave it like that and let's put a note here that
says P.S. This is the love that Ejay us file just so that you know it's coming from the Ejaz file.
It's not the redstart send that we have right now.
In fact to get rid of that.
So what we want to do is render that file so read is not render.
And the name of the file is love that E.J..
Yes it will automatically look in the views directory which is right there.
There we go we have two files let's start the server up Node.
Yes will restart and refresh.
OK.
So our file is here.
You fell in love with and we need to fill in the blank right here.
And I know this is a really simple example which is the point I don't want to confuse you with something
crazy just yet but this type of logic is really important where we can fill a template in with data
coming back from a database or data that a user has provided where it's not a static kill file.
That is exactly the same every time.
We basically want to add variables into HTL and that's what each Yes lets us do.
So E.J. S stands for embedded javascript.
It lets us embed javascript code variables if statements loops inside of H Timo.
So it's how we could do something like.
You fell in love with and then here this won't work just yet but we could put our variable called thing
let's just do it in all caps thing variable.
But this won't work because it will just treat it as regular HMO and it will just show us the word thing
variable.
We need to do something to tell each of us that this is javascript code not teach to him I'll treat
this like javascript.
Luckily it just gives us a way of doing that.
It's a little bit weird when you see it for the first time.
It looks like this.
So we have our brackets and then percent signs and then equal sign on the opening bracket and whatever
goes between these two brackets here is going to be treated as Javascript.
So I'll show you what I mean we can just use something like five plus five which in regular H M L and
I'll do that actually to show you five plus five.
Without these Ejay Yes brackets will just print five plus five but if we do it right here we'll actually
get 10 printed out.
So I'll save this template quit or start the server again node after J us and refresh the page and we
get you fell in love with five plus five ten.
And I totally get it.
If I pause five ten is a complete catch all right all right.
So we'll go back.
So we don't want five plus five to be printed there.
But we actually want is the thing variable.
We'll just call it the thing VAR or it let's just do thing far.
And this needs to come from our code over here.
So what we need to do is pass this value thing to our love that E.J. as template and we want to print
it out and while we're here also get rid of the five plus five.
So we get you fell in love with and then we need to define the thing far and you might think we could
just do this var thing.
Var equals request up from slot thing.
And you might be hoping that expressed automatically sends all those variables somehow to this template
.
And it just knows about thing var.
Unfortunately that's not how it works.
And I'll show you that restart the server I'll get an error message and it tells me nothing var is not
defined.
So now I need to go back and define thing bar.
And the way that I do that is actually pass it through to my loved E.J. s template and I do that on
the dot render line when you pass it through as an object.
And in that object I can put multiple pieces of data that I want to have in my template.
So rather than things are just going to call it thing to make this clearer and then here I'm going to
pass data through and I'm going to say in the template thing var should be equal to thing.
What this will do is take the value of thing and stick it right here.
So it will look like a thing far is equal to Rusty.
And then over here thing var will be replaced.
All of this would be replaced by rusty.
OK so we'll leave it at that.
Go back here and why don't we just start by hard coding it as resti just like that and will restart
the server and I'll refresh the page and I get you fell in love with Rusty.
So rather than doing a string the next step is just to go back to what we had which is the entire thing
variable save and I'll pass that through under the name thing bar and then we render that here with
there.
E.J. has tagged this wonky looking thing.
Restart the server again go back.
Now I'm getting you fell in love with Parsky.
And if I go to you you fell in love with Tater Tots that's also reflected here.
This is a very powerful concept that we'll be using.
Like I said and pretty much every app from here on out having these dynamic pages having itched him
all responses that can change depending on what the user asked for in specific pieces of data in the
request.
The other thing I'll show is that this is just regular Javascript.
So right here I can do things like to uppercase and this will be run first and then it will return something
that will be printed up like rusty.
So it's just regular javascript and we'll talk more about what should go in here and what shouldn't
.
Because there are some rules you don't want to clutter your aged him out all of your Ejaz template with
tons and tons javascript.
You want to keep it to a minimum but for now I'll do this and save.
And this will be the very last thing we do.
Restart the server refresh.
And now I get a capitalized version.
All right so now let's recap everything we talked about.
There's quite a bit in this lesson.
First thing is that we can send back the contents of a file using redstart render like we did here and
here and those templates need to exist in the views directory express automatically looks there.
The next thing we talked about his Ejaz which stands for embedded javascript and it's what enables us
to have dynamic templates HDMI out that will change depending on some data that we provide.
We saw that we needed to do each Yes and then have our file be called something DOD Ejay Yes.
And then we also needed to run NPM install Ejay us and then the last thing is that we can use Ejay us
brackets which are very weird at first to type.
You probably aren't used to using this part of the keyboard all that much but there are brackets where
the percent sign and an equal and then on the other side it's just a percentage sign and whatever goes
inside is treated as JavaScript code first and then whatever that code returns is then printed to the
HMO and to pass data through.
We can pass an object in the red dot render call where we have key value pairs.
It's just a regular javascript object.
And in the template we have access to the variables that we define are the properties of the object
.
In this case thing are which is equal to whatever the value of thing is which changes every time.
And in here we can then use thing for.
OK so I know there's a lot in this video a lot to digest.
We'll be getting a lot more practice with these concepts in particular.
E.J..
Yes and that E.J. has brackets and then passing data to a template is something that we'll be doing
in every video from here on out