OK it will come back.
So this lesson is one that I'm pretty excited about making.
I hope that you enjoy it.
We're going to be writing our very first express app before we actually do that.
I want to take 30 seconds.
It'll be really short I promise.
Just review two important topics how an existing app works so the dog app that I've already shown and
then the basics of the HTP request response lifecycle.
OK let's get started.
I'm going to begin by talking about HTP requests and responses.
So remember when I go to a u r l like Google dot com and I hit Enter I'm asking for a web page I send
an HDTV request and that request has a particular verb or type.
Is it a GET request or a POST request or some of the other ones we haven't really seen yet.
And then I potentially send some data along with the request and the server that receives my request
the server that I'm requesting Google has some code that decides what page to send me back.
So it sends me that Google home page or maybe it sends me the Google logon page or the G-mail page or
a page says My password is incorrect whatever it is.
The server is deciding what to send back.
And then it responds with a response.
So I send a request server side code figures out what I'm asking for and then it does some stuff and
then send feedback a response that is fundamentally what we're going to use Express to do.
So I have this dog demo app that you may remember.
It's very very forgettable.
Just a simple app that has a database that we've connected to and a user can view all the dogs in the
database.
Each dog only has a name and a breed entirely useless.
But it is nice and simple and I think it's a good illustration of how Express works.
So we have some code in here.
Things like requiring Express and requiring a database.
But most importantly are these three chunks and these are called wraps and we'll be writing our own
routes and just a few minutes routes or the code that are responsible for listening and receiving those
requests that I talked about and then deciding what to send back.
So in this case we have code that is listening for a request to the home page just to slash then we
have some code that's listening for a get request to slash dogs and we have some other code that's listening
for a post request on slash create dogs and then inside of the routes we're running some code.
In this case we're just rendering the home page.
So that's going to respond with the contents of our home page which is another file somewhere else in
this one.
When someone asks for slashed dogs as a get request we find all the dogs and then we render the dogs
page and send all the data for the dogs.
Along with that.
And when someone creates a dog we're sending a post request to create dog.
We're going to add a dog to the database and then redirect them back to the dog's page where they can
view all the dogs.
So don't get too intimidated by the syntax and all the different pieces will be introducing this one
little bit at a time.
But the very first thing that everything starts from is this idea of a route and routes are just bits
of code that will run some other code depending on the request that is received on our server.
So then that brings me to the next point which is starting our server.
So we have to run the file which is called apt.
Yes node apt.
Yes just like that.
And then it needs to go.
In this case to port 3000 which will actually be different for us in cloud 9.
But if I go to Port 3000 and I refresh I get the home page because I made a request to slash and there's
some code that when I make a request to slash sends me the home page.
Same thing if I go to slash dogs there is another bit of code that is listening for a request as a get
request to slash dugs and it sends me all the dogs back.
And then lastly I can make a new dog and hit submit and that sends a post request to slash create dog
.
And this code is wrong.
All right.
So that's all I wanted to review before we move on to writing our own code.
The one big takeaway from all of that if you just totally slept through it the one big takeaway is routes
routes are important.
Rasner how we listen for particular requests and then run some other code depending on the requests
that we get.
OK so now it's the moment that you've been waiting for.
Hopefully you've been waiting for this.
We're going to go ahead and create our first express app so I'm going to go back to cloud nine and I'm
going to make a new directory.
I'm just going to call it first express app and CD into that and then I'm going to make a new file app
yes and then we'll open that up and we'll start just constantly logging our express app.
We'll go here and save and let's just run it.
And all right we get our console log.
So now what we need to do is install Express and if I go back to the Express docks you can see we just
run NPM install express and I did mention in the last video that we were going to talk about dash dash
save in this video and we are going to keep it until the very end.
It doesn't make a difference at all in the functionality of Express.
So we're going to leave it until later in the video.
So we want to install Express and if we type LS Of course there isn't a node modules directory yet but
if we do NPM install express I'll take a moment.
This is definitely a bigger download than the other things that we've installed so far.
I now have a safe LS a node modules directory or I really refresh my file tree.
You see no modules I have express and instead of node modules there are a lot of directories.
A lot of files and this is all of the logic all of the code that makes the framework that we don't have
to write ourself.
So we'll close out of that.
And the next thing that we need to do of course is require expressed in our application so we'll do
far.
Express equals require express just like that.
And that will then import the module express.
But unlike the earlier libraries or packages we've seen like Cat me where we said var Cat me equals
require Cat me and then to use it all we had to do was say Cat me.
In this case Cat me only has one thing that it does one simple function just like knock knock jokes
only had one function as well.
Well Express has lots and lots of different methods so we can't just execute express like this.
To use it although we will be executing it and saving it to a variable which most people call app.
So var express equals require express that just includes all the contents of this express directory
and then we execute it and save it to a variable called app that everything that we do with Express
will be app dot and then some method that express comes with.
Now that we have express installed and initialized it's always a good idea just to make sure that it
works.
So let's try running node apps.
Yes.
Nothing should happen as long as we don't get an error.
That means that we're good to go.
Now we're going to define our first route.
We're going to make it very simple application.
When you go to slash you're going to get a message that says hi.
And when you go to slash goodbye or let's just do buy you'll get a message that says good bye.
And then also do one more which is when you go to slash dog you get a message that says meow.
So three different routes three different places we can make a request to and we can get three different
responses depending on where we request.
So the syntax for defining a route looks like this.
We'll start with this first one.
The high there and we write app dot gets an app to get takes two different parameters.
The first one is the euro or the path which is slash.
In this case because we're trying to make a route when a user makes a get request which is what they
get here means we will see apt up posts later on and even update the leads and patch and put some of
the other HTP verbs.
But getting posts are the most common.
So apt get when you get requests made to slash which is also called the root path or just the route
.
Then we want this code to run which is a callback function and this callback function takes two different
arguments requests and response.
Again those are whatever we want them to be called totally up to us.
But you'll see this most often and I think in fact on the official express docs that's what they use
req in rez.
Some people actually type it all out request and response but reckon rise is much more common to see
so reckon Reds are actually objects inside of this function request is an object that contains all the
information about the request that was made that triggered this route and response will contain all
of the information about what we're going to respond with.
So I'll show you that in a little bit will cancel that log it will see what it looks like.
But to start we're going to write rez dot send.
Hi there.
And this is just a way of responding with some text but if we go to the page of our app once we serve
it once it started then we expect to get the text.
Hi there printed out to us in the browser this isn't going to work just yet though.
Because if I run this note app yes nothing happens because we're missing one really important part of
code in Express.
We actually have to write the code to tell it to listen for different requests to do that.
EXPRESS gives us a method called listen.
So all right.
Apt up listen and then we need to provided the port to listen on and I'll show you in my example here
.
I was listening on port three thousand but because we're on cloud nine we have to do things a little
bit differently.
We need to listen on process that NVI ports.
So all of this code will actually just return a number like 3000 except it returns the number of cloud
nine server that we have to use.
So this is a variable.
It's called an environment variable and the environment variable that we're working with is called port
.
So this will return a number but we don't hardcoded the number in.
It's coming from cloud nine.
There's one other piece of information that we should pass in which is process that EMV IP.
And this is a line that you can just copy and paste from app to app.
We'll be using it at the bottom of every single application that we make with Express.
So it's one of those just cookie cutter lines that we need to use.
This tells express to listen on a particular port that cloud 9 wants to and a particular IP that cloud
nine expects it to as well so to summarize we initialized express safety to the area will we defined
a single route when we make a get request to slash.
We should see a they're sent back in the response in our browser and just defining the route isn't enough
.
We then have to tell the app to listen on a particular port an IP address.
And now we just need to start the server with node apps that will run the entire contents of the file
.
You'll see our cursor changes.
We can actually type commands anymore because our server has started.
There is one small thing we can do to improve this.
So when it Control-C out of that and we can pass in callback function to APT listen as well.
And inside of here we'll just you cancel that log server has started just like that and save it now
going to clear and start the server again and we get this message that says server has started just
so that it's clear what's happening with our consul now to visit this site unlike the local version
that I showed with sublime and the dog demo where I went to local host Colan 3000 Clubine actually hosted
online at your own you are well and you can find that by clicking on preview and click on Preview running
application and that will open up a new tab.
And if we want to we can just use the tab here.
I prefer to copy the role and open up a new tab and paste that in so that I can actually just use it
in the browser without having to go through cloud 9 is fake browser so close out of that and you'll
see though my role is the name of my workspace web dev who camp dash my user name dot C-9 dot.
So whatever you're serving in that workspace which right now is this one file apt.
Yes instead of first express app will be at the row that is given to you for free automatically when
you create a cloud nine workspace and more exciting than that.
We can see that we get high there.
It's working and making a request to the root of the server just slash.
And I'm getting high there.
And if we try doing something else like this you'll get a message that says cannot get that you are
will this path that I added.
So let's add in another out now.
The exact same pattern.
Let's do the buy route.
So we want an app don't get slash.
And then our function request response just like that.
And we will send red dots and goodbye just like that and save that.
Now if we go to slash buy and hit enter.
You'll see that it still doesn't work.
And that's because we have to restart the server.
So any time we make some changes need to restart the server.
For now I'm going to show you a tool that will help us so that we don't have to constantly restart it
.
But for now I need to do node Abdulle J.S. again save or refresh this time if we go to slash by.
I now get my goodbye message and if I go to the root I get high there.
So let's do one more now.
Let's go back.
So apt get sloshed dog or call back with requests and response and then instead of that we're going
to respond.
RAZ And meow.
What was I thinking.
Why did I say meow.
All right well I'm going to go with it.
Definitely should have female but if I start my server again I restarted Control-C to quit and they
hit the up arrow and I run node after JSC again and I go back here I refresh.
And now I go to slash dog get me out and I can go to slash by the gate goodbye and I can go to slash
nothing and get high there.
So that's all we're doing for this very first express app.
Before we move on.
I'm going to open up postman and test our application out.
So we're going to make a get request and we'll do it to the slash dog route just to test it out and
rather than local hosts 3000 slash dog we need to make a request to this you Arel slash dog.
So I'm going to copy this and go back to postman and just paste that you are Ellen.
And before we do anything else you know resize this and resize this window as well and we can close
or shrink this down a bit it's going to make a request to this Web Dev Bootcamp dash learn with Colt
C9 Daddy-O slash dog of course.
This you also will match your own cloud 9 count.
And what I'm going to do is instead of my app dog I'm going to add a Dalt log.
And it's just going to say
someone made a request to slash dog and we'll save that and this console blog is going to appear down
here.
It's not going to appear in the browser inside of the JavaScript debugging console.
The front and con. It appears in the node console here that we have started by running node apps.
Yes.
So if I restart the server and I'll start by just showing you if I move this over here and I refresh
the page let me go to another page and refresh.
And now if I go to slash dogs or dog watch down here it says someone has made a request to Slashdot
.
So that's just to show you that that code is triggered as soon as we make a request and it's not only
triggered by our browser but we can also trigger it by using postman which I'll show now.
So all I need to do is hit enter here or send and we got another.
Someone made a request to slash dog but also a full screen postman.
Now let's look at what was sent back.
So the body is just meow.
I don't know what I was thinking I'd do it now but we got some text back meow and we can do the same
thing by going to just the right path and sending a request and we get high there and we can also do
slash by.
And we also get the same thing.
So this is to show you that these requests it doesn't matter where they originate from if it's from
a browser.
A phone with the browser if it's from a terminal somewhere or something like Postman it doesn't matter
.
Our server is just listening for any request that's a get request to three different routes.
Dog by and the route route and when it gets one of those requests it will then respond with some simple
text.
All right.
So that's all I wanted to cover in this first intro to express app.
I know it's really really simple it hasn't amounted to much yet as an application but trust me the order
that we're going in is very very deliberate.
We're starting small and we're going to add one piece at a time the next few pieces that we'll add are
responding with HQ mail files.
So rather than read that send there's another method that we'll use to send an entire file of H.T. mail
back and we'll also introduce a concept called Raut variables or path variables.
OK I'll see you in the next video