In the last section we generated our express project and we spoke a little bit about exactly how traffic
is wrapped around inside of an express application in this section we're going to add our first little
route handler to express and we'll talk a little bit more about how Express is internally organized.
So going to change back to my code editor or see me to my terminal to start I'm going to make sure that
I'm inside of my server directory and then I'm going to start up my code editor inside of here.
Now note that I use the atom code editor and that's why I am able to run the command.
Adam datt if you do not have Adam installed on your system you will not be able to run this command
and you'll have to start up whatever code editor you like to use yourself.
OK.
So I now have my code editor open inside of my server directory inside of here.
You'll find the package doc some file that we generated previously.
If we open that up we'll see the list of dependencies that we currently have installed into our project.
Right now we only have express inside of the node modules directory.
Is the Express dependency and everything that express itself depends upon.
And so as you look at this list of folders these are all dependencies that the Express library itself
depends upon to run correctly.
So Express is one of many things that we're going to be using throughout this project inside of this
structure.
You'll also notice a package dash Lockart based on file.
Now you're only going to see the file right here.
If you are using at least NPM version 5 and as a reminder I really would like to use NPM version 5 throughout
this course because we are really going to be depending upon some features that are provided by it.
OK.
So that's enough to start to create our first express server and create a new route handler.
We're going to make a new file inside of our server a directory called index G-S.
By convention we usually call the root file or kind of the start up file inside of a node project index
j us.
Now you can certainly find other projects that use different root file names maybe start ups or web
japes whatever it needs to be.
But for us we're going to be going with convention which is to use index.
J.S. then inside of here we are going to create a brand new Express application and then add some logic
to create our first route handler.
At the very top of this file we are first going to import in the Express library by writing the command
Konst app or excuse me Konst express equals require Express.
Now a little bit of a talk about javascript modules throughout the course you'll most right here do
I use the required keyword to get access to the Express library in this course.
We're going to be using what is referred to as common japes modules on the server side.
Because at present the node J.S. runtime only has support for common J.S. modules.
When I say common just modules this is a system implemented in no Jey us for requiring or sharing code
between different files.
Now the reason that I specifically mentioned common J.S. Right now is that you might have previously
gone through other courses or other content or even your own applications where you use a different
import syntax that looks like import express from Express like Lysa hoops to us as we go this import
syntax right here.
Makes use of a different module system called.
Yes 20:15 modules.
No genius does not have support for as 20:15 modules at the time of which I created this course.
Now there are some work arounds for getting around that but at the end of the day those work arounds
just makes the setup and development of our project a little bit more challenging.
So on the server side of our application we're going to use common G-S modules.
But on the front end like on the re-act side of our application we get much easier access to yes 20:15
modules.
So on the re-act side of things we will be using the import syntax.
OK.
So sorry for that digression but that's always a very Come question.
You know why are we using require here so I just want to cure that very quickly.
Now that we've imported or required in the Express library we will use it to create our first express
application by writing Konst app equals express like lifeso inside of a single node yes project or a
single project.
We might have several different express applications and so by calling express like a function it generates
a new application that represents a running express app through this course we're only going to using
a single app.
Now we definitely feel comfortable saying that the absolute vast majority of projects that you'll probably
ever work on are going to use a single application inside of them.
This app object right here is used to set up configuration that will listen for incoming requests that
are being routed to the Express side of the out from the node side and then route those requests on
two different route handlers.
So all of these different route handlers that we're going to be creating over time will be all associated
or somehow registered with this app object right here.
Now just two more little lines of code that I want to write.
We're going to write down the next line of code that is going to create a route handler and associated
with a given route.
So let's write the code out and we'll talk about what's going on with it.
I'm going to say app dot get I'm going to give a first argument of a forward slash and then a second
argument of an arrow function like so this arrow function is going to have two arguments which really
receive with the names of Rec. and rows and then finally inside of the arrow function body I'm going
to add the line rez dots and will pass to it an object that says chi colon.
They're like so.
OK.
So this is our first taste of a route handler with Express.
Now there's a lot of stuff that is going on with this line of code right here.
Before we do a full explanation of what's going on I want to add one last line of code and then execute
this project.
We're going to test it out and see if it works or not and then we'll do a full discussion about everything
we've added.
So one last line of code I'm going to say app.
Listen and then pass in 5000 like so OK.
So again we're going to come back and talk about what's going on right here.
But right now I want to run this project and figure out exactly what's going on.
Or excuse me I want to run it and test it out.
So going to change back over to my terminal and then once over here I'm going to run the command node
index Geass like so now it will appear that things just kind of hang right now and that's OK that's
exactly what we want.
I'm going to let that just sit.
I'm going to change over to my browser and I'm going to access local host colon 5000 I'm going to copy
this link for you over to my code editor local localhost Colan 5000.
OK.
So now when we go back over to our browser we're going to see a little message that says Hi there.
Now as what you see in your browser might be just a little bit different.
I'll tell you right now you might just see some plain text.
I have a chrome out on that formats this data right here which we refer to as Jason.
A little bit more nicely.
So OK we put it together some express application we ran it at the terminal and then it looks like we
somehow got some message communicated to us from this code that we wrote like you know right here is
high there but hey what's going on right here.
All right like what does all this stuff doing.
So let's take a quick break.
When we come back we'll talk about exactly what is going on with all this logic right here.
So I'll see you in just a second.