Woo och, very enthusiastic.
Now we're actually getting to 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 app.
So here's a nice little hopefully you think it's nice a little diagram I made of a typical request and
response cycle that we'll be working with in 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 WW dot app.com g hat 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 slides dot com.
This is basically like our entire Express app, but we'll be creating and then individual pages we ask
for by varying what comes after the slash.
So if you take a look, if you never noticed that before the path that comes after a slash and 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 a web dev slides, that's going to be the home page.
And the way that we kind of write that is the path is slash just forward, slash nothing.
Okay.
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 it sends back our super simple hello from our web app.
That's it.
It just is a one line of text.
It 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 app.
Now what we're working towards is creating dynamic pages that will vary, that will say, hey, we have
518 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 asks 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 send a request asking for a particular thing, and our Express app has to figure out, one, how
to handle that.
How does our Express 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 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, get an app.
Listen, both of those are referring to this app.
So any time we work with Express, it's going to be a lot of app, not something app about get out,
get app out, all these other things which on the documentation you can see over here we have all these
app delete app that enable app get app list and app params, all these different things.
They all start with app.
Of course, if we name this variable something different Apple, then this would be Apple.
Get an apple.
Listen, so so far this doesn't do anything.
These are just two lines to require stuff.
The magic is really here and here.
First thing is what's known as a root.
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 SQL.
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 or slash log in, then do something else.
Show the login 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, the incoming request from the user, which we'll be working with
later, when a user types their email into the form to sign on to our wait list, that information is
sent to us.
And so we'll need to work with the request coming from the user into this arrow that will contain the
information.
Hello.
I'd like to add my email blue at gmail.com 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 Rez send hello from our web app.
We'll send this response.
Of course, you don't have to name it Rec and rez.
You could call this request in response.
You could call it R one and R two, apple and orange.
All that matters is that you refer to it the same.
And then we have the 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 starts a server.
So this starts the server going we have to tell it what port which on cloud nine will always be using
8080 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, your app's listing 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 us new file.
And it's going to be RPGs.
And I'm going to just start by requiring express just like we saw
then I'm going to do var 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's good then let's start actually at the bottom with our app.
Listen and 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, 100 different ports for different things going on.
At the same time, you may have had to work with ports if you ever had to mess with a firewall that
was blocking something you didn't want it to block.
Or if you work at an office where they I don't know, they don't allow you to go to certain websites
that's running on a certain port.
Anyways.
APT listen A.D. 80 and we could just leave it at that like this.
But if we do that and I start it up, notice my cursor has gone to the same thing that happened with
the MySQL connection.
When we didn't end the connection, it just hanging.
And that's because I started the server it's listening and port 8080 to see any incoming requests but
we're not doing anything and it's also just not very it's not a great experience to just see a blank
cursor there so we can just add this blank callback and it will just console.log server running on 8080
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 console.log server running on 8080 and that's just
because this code runs whatever we put in here, we'll run only once the 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 a lie.
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, we 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 the 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 console.log.
Someone requested us just like that.
What do you think will happen?
First thing I have to do is restart the server.
Anytime 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 console.log is only printing to the console here the terminal.
So now what 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 requested
us because this code is only happening.
It's only firing off when we're requesting a slash.
And you might be wondering about the get part if you're not familiar with HTTP requests, there's a
couple of different types.
Different verbs get in post are what?
We'll be working with a get request 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.
It's a 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 web dev course, but there are some great ones 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 console.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.
That's a lie.
It's 90 degrees.
I have to have the window open.
Okay.
Hopefully it's not too loud.
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 8080 which in cloud nine this is our URL.
Yours will be different.
You have a unique URL 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 logout.
If I do slash logout again, I get nothing.
But 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 is Can you have two reasons?
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 resend.
You'll instead be responding with files.
So we'll have a file of HTML to respond with our nice formatted page with style and fonts and colors.
For now, this is a very basics, so we'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 the framework we installed.
Then we execute it and save it to our app variable.
And really there's a lot of magic happening there.
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 Atlas in 8080 and every time we do that our server starts running.
And basically that is this block right here represented by this block, and it's just sitting here listening.
It's a patient server.
Nobody 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 and my SQL learn was called C non users at IO.
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 nine or by any
computer, although your URL would be different if you weren't using Cloud nine, of course.
But whatever we're running here, our server, it's waiting and listening for request coming in.
Then we write code that differentiates between something like Log out or let's do log in.
We don't have any code expecting log in.
So that's why we get an error it says cannot get log in.
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 it will respond with.
Oh, I know that.
Let me give you that.
It's you've reached the home page.
Otherwise we get.
We cannot get whatever we do, but we do have this one case where it works.
The homepage.
And again, the typical terminology for this is the root, root, the home, the root, empty root,
basically slash.
So get slash.
This code runs and all this code does is it responds with you've reached the home page.
One thing that's interesting to take a look at, there's a lot here, but if I do a console.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 it would be very useful without me having
to explain a ton of other stuff.
But this contains all the information and really you only get one or two things usually that you care
about in here.
This is all behind the scenes stuff that it works with.
With that said, when we make our request that is sending our email, when we type it into a form and
hit submit, that email 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 with this, but we're going to add a couple other routes.