Well.
OK.
Very enthusiastic now.
We're actually getting the web app and writing code in this section in this video we installed.
EXPRESS Now we're ready to go.
But we need to discuss what we're going to make with our first most basic pass at a Web site.
So here's a nice little but hopefully you think it's nice a little diagram I made of a typical request
and response cycle that we'll be working with an express.
So here's a computer let's say it's blues my cats.
And then there's our express app that we'll be creating which is node javascript and blue types in the
name of our app.
Let's just say it's GWW dot app dot com Jihad center a request is sent to our express app saying hey
I would like the slash page and slash right here is referring to the the URL that we're asking for the
path after.
So if you notice I'm on web dev out slide's dot com.
This is basically like our entire express app what will be creating and then individual pages we ask
for by you know varying what comes after the slash.
So if you take a look if you never noticed that before the path that comes after slashing a web page
that is usually what dictates what content you see.
So when we don't ask for anything if I just go to web dev dot slides dot com that's going to be the
home page and the way that we would kind of write that is the path is slash just forward slash.
Nothing.
OK so.
Hi there.
I'd like the home page please.
And then the Express app has to figure out what to do.
So that's sure.
Here you go and sends back our super simple hello from our web app.
That's it.
It just is one line of text says hello from a web app.
No colors no animations nothing like that and there's no logic involved to start.
Every time blue goes to this page she gets Hello from our Web site.
Now what we're working towards is creating dynamic pages that will vary that will say hey we have 500000
users or here's a list of all of our users in the database or something like that that varies depending
on when the user asked for it who the user is.
There's a whole bunch of different conditions.
So that's the flow we're trying to get.
We sent a request asking for a particular thing in our express app has to figure out one how to handle
that.
How does our trust app know what we're asking for.
Second of all how does it respond.
So it's these two arrows that are really the important part the request and the response.
So let's get started.
Here's what the code looks like.
So there's a little bit here that we have.
Well we haven't seen any of this.
We've seen requiring.
So all we're doing is importing Express and saving it into an express variable then we're doing this
weird thing that we haven't seen where we're actually executing the entire express package that we just
imported.
And we're saving that to another variable called the app.
Basically these are the first two steps of any express application.
Copy and paste them every time.
I mean they're not very long so you could just type it but you can treat them as just cookie cutter
every time.
Then every time we refer to this app like we have here app don't get an app.
Listen both of those are referring to this app.
So anytime we work with Express it's going to be a lot of apps.
Something after I get apt get amped up.
All these other things which are on the documentation I can see over here we have all these apps delete
APTA enable apps get doubtless an app listen Param all these different things.
They all start with app.
Of course if we named this variable something different.
Apple then this would be Apple does get an apple but listen.
So so far this doesnt do anything.
These are just two lines to require stuff.
The magic is really here and here.
The first thing is what's known as a router.
This is the bread and butter of express pretty much every web framework.
What it does is this code inside is only triggered whenever a incoming request is made to this path.
So we're basically defining the code that runs when a user asks for a home page where the path is nothing.
It's just slash and what are we going to do.
Well we are going to send.
This is a special method from Express.
Hello from our Web app and rez is coming from here.
There's a lot to take in.
I know rez is the response object request is the incoming request.
So every route there is a callback.
Just like when we were working with my ass.
Q Well a callback is code that runs after something happens or at a later date.
So this code only runs whenever a request is hit to slash.
So eventually we'll have code where we have five or six routes different web pages.
We want to run different code depending on the Web page that's being asked for.
So this is how we do it.
This is basically saying if a request comes in for Slash run this code we could have another one down
here that says if a request comes in for a slash log out log in then do something else show the log
in page.
So that's the first bit then every route has a function a callback with two arguments a request and
a response request again is the incoming request.
So if we wanted information from the incoming request from the user which we'll be working with later
when a user types their email into the form to sign onto our waitlist that information is sent to us.
And so we'll need to work with the request coming from the user to this arrow that will contain the
information.
Hello.
I'd like to add my email PLU Jima that come to your database.
And so then with the request we'd be able to pull it out of there.
The response is what we're sending back.
It's this arrow going that way.
And so that's why raise send hello from our Web site.
We'll send this response of course you don't have to name it wreck in rez you could call this request
in response or you could call it our one and our two apple and orange.
All that matters is that you refer to it the same.
And then we have this second component and this is also kind of cookie cutter.
You'll have this in every app app.
Listen.
And all that this does is start a server.
So this starts the server going we have to tell it what port which on cloud 9 will always be using 88.
And then if we want we can give it a callback function.
And this is just a line of code that will run once we start our server so it will just say in our terminal
Hey you're listening on port 80 80.
You don't have to have this.
So let's go over to cloud nine.
And the first thing I'm going to do is make a new file.
So instead of join this new file and it's going to be app.
J.S. and I'm going to just start by requiring express just like we saw
then I'm going to do our app equals express which is referring to this executed as a function.
So we have app there.
Let's just see if it works.
Nothing will happen.
We may get an error if we didn't install express but we did.
So everything is good then.
Let's start actually at the bottom with our app.
Listen when we tell it the port which is if you're not familiar with the idea of ports think of it as
the entry or exit point on a computer you can have 20 50 or 100 different ports for different things
going on the same time.
You may have had to work with ports if you ever had to like mess with a firewall that was blocking something
you didn't want it to block.
Or if you work at an office where they don't know they don't allow you to go to certain Web sites that's
running on a certain port anyways.
Aptos and ADHD.
And we could just leave it at that like this.
But if we do that and I started up notice my cursor has gone to the same thing that happened with the
minuscule connection when we didn't and the connection it just hanging.
And then because I started this server it's listening and port 80 80 to see any incoming requests but
we're not doing anything.
And it's also just not very you know it's not a great experience to just see a blank cursor there.
So we can just add this blank callback and do we'll just cancel that log server running on ADHD and
it's just a nice message for us developers to see.
So now if I do it you can see of course that we get onto that log server running on ADHD.
And that's just because this code runs whatever we put in here will run only once that server starts.
So that's the first thing.
But now we have the task of actually writing the code so we have our server it's going but we can't
actually reach it.
We can't do anything with it.
I don't have anything to respond with.
So actually what I just said is kind of like we we can reach it we could request it but nothing would
ever come back.
And actually if I try and preview it right now so to do that you can click on Preview preview running
application.
This is hitting this server but we're not getting any response.
So I'm going to just leave it here for now.
We'll come back to that.
We'll know that our app is working.
If we get a response here to do that we just have to do our app get.
And then you are the path which is slash function request response and then in here we put some code
so we could start with just a constant log someone requested us just like that.
What do you think will happen.
First thing you have to do is restart the server any time you change this code in here.
The server was already running.
We need to save the file and restart.
But now if I try and request slash so I'll just hit enter here.
Notice what happens says someone requested us because this code ran.
But over here we still don't see anything.
So cancel that log is only printing to the console here the terminal.
So now I'm going to do is open a new tab and put this in that tab so that we have our app and then our
terminal down here and I'm going to close this one just to make more space.
It's the same thing.
Notice though every time I hit enter I get someone requested us but if I tried to go to slash log out
or something that doesn't exist I don't get someone recourses because that this code is only happening
is only firing off when requesting slash.
And you might be wondering about the get part if you're not familiar with HTP requests.
There's a couple of different types different verbs get in post or what we'll be working with.
I get requests though.
Think of it as just asking to see information you're not sending any data with it.
So when we are asking for our home page of join us we're just trying to see information to get request
but when we are trying to join we are sending an email and that is going to be a post request.
We'll get there in a little bit.
I know it's a lot of stuff and overwhelming.
If you've never done web development so hopefully you understand this is not a webdav course but there
are some great went out there and I highly recommend if you're curious and you are enjoying this part
that you continue down that path.
Okay enough of that.
So rather than just cancel that log there's this other thing we can do which is response send.
And then we can put any string in here like you've reached the home page.
I'm sorry about that siren.
It's like 100 degrees in San Francisco today.
Well it's a lie it's 90 degrees.
I have to have the window open.
OK.
It's not too bad.
Now we need to restart the server.
This time we now have some different code.
Same thing if we hit slash on this app that is running on ADHD which in Cloud Nine This is where you
are and yours will be different.
You have a unique you are all you need to access but this is where your app will be running just like
when we first installed node and I showed you that chat app into same idea.
This is where your app runs by default.
So now all we need to do is hit that page but we need to ask for Slash rather than slash log out.
If I do Suslov yet again I get nothing if I just do slash or nothing.
We get our message.
You've reached the home page and that is our most basic web app.
Of course you could change this text something that people ask a lot.
Second you have to register that sense and the answer is No.
You can only have one every route is going to respond with one thing.
But the real answer is that you're usually not going to use red and you'll instead be responding with
files.
So we'll have a file of h t m l to respond with our nice formatted page with style and fonts and colors.
For now this is a very basics so I'll stop here.
You can feel free to move on to the next video where we add more routes but at the very end I'll take
some time to review if anyone is curious or anyone feels like you need more review of how this works.
So we started by requiring Express which is the library of that framework we installed.
Then we execute it and saved into to her app variable.
And really there's a lot of magic happening.
That's what a framework does.
It takes care of stuff in the background.
But now what we've done is first things first we started up our server app doubtless in 1880.
And every time we do that our server starts running.
And basically that is this block right here represented by this block.
And I'm just sitting here listening to patient server nobody you might talk to it for years or maybe
ever but as soon as someone sends a request.
And in our case the request goes to this URL node in my ask you will learn with code does the nine users
that I know yours will be different.
But this is where I make a request to and that corresponds to our server we started down here.
So there's an invisible connection here that's kind of taken care of for us by Cloud 9 or by any computer
although you're you're you are I would be different if you weren't using cloud 9 of course.
But whenever we're running here our server that's waiting and listening for requests coming in then
we write code that differentiates between something like log out to log in.
We don't have any code expecting log in.
So that's why we get an error it says cannot get by you and I don't.
It's basically our server saying I don't know what you're talking about.
All that our app knows about is slash.
That's the only thing that will respond with Oh I know that.
Let me give you that.
You've reached the home page.
Otherwise we get cannot get whatever we do.
But we do have this one case where it works the home page and again the typical terminology for this
is the route route the home route empty route basically slash so apt get slash.
This code runs and all this code does is it responds with you've read the home page.
One thing that's interesting to take a look at there's a lot here but if I do a contact log request
this will contain all the information from the incoming request from this arrow.
There's going to be a lot of stuff in there.
So if we take a look try it again and I make a request I'll refresh it by clicking over here.
We got printed out this giant thing.
This is all the information contained in that request.
So all of this is put together by Express it's handled for us.
Let's see if there's anything interesting to take a look at.
Basically I can't find anything terribly interesting or that would be very useful without me having
to explain a ton of other stuff.
But this contains all the information it really.
You only get one or two things usually that you care about.
And here this is all behind the scenes stuff that it works with.
With that said when we make our request that is sending our e-mail when we type it into a form and hit
submit that e-mail will be contained in a request somewhere and we'll need to pull it out which we'll
get there at some point.
All right.
Next up we're continuing on this but we're going to add a couple other routes.