Node.js Tutorial for Beginners - 15 - Connect Video Lecture | The Complete NodeJS Developer Course - Back-End Programming

alright guys now that we know the basics
of how to set up a really simple web
server what I want to do is I want to
introduce you guys to a server framework
called connect so a lot of the
functionality that we would commonly
write to handle user requests has
already been written for us and packaged
up into a nice framework called connect
so how do we install the connect module
well the first thing that we need to do
is go down to this terminal right here
and your guys are going to you know
probably cry when you see how easy this
is type NPM install connect and that's
it
what this is going to do is it's going
to go on the internet look for this
package called connect it already knows
exactly where to go download it and
install it and configure it with your
project so check this out
we can now use connect one line of code
how easy was that
now this little installer right here
it's actually I don't want to say more
complex but we have some additional
options and what I'm going to do is the
Vote an entirely new tutorial to showing
you guys how to use it in all the
different options and commands you can
use but for right now check it out again
what that did is it went and downloaded
and installed connect so if you look in
your node underscore modules directory
we now have it all right there pretty
stinking awesome did a lot for one line
of code eh alright so now let's figure
out how to use this module and what it's
all about alright so the first thing we
need to do is actually just require it
import it so require of course it's
called connect and in this example what
I'm going to do is I'm also going to use
HTTP from the last tutorial so before we
can start using this connect framework
the first thing we need to do is we need
to create a connect dispatcher now this
is pretty much the core connect object
and you can think that as a function
that just takes the request and response
arguments so whenever the user makes a
request to your server it's going to
look to this right here
to pretty much determine how it wants to
handle that request so if you just name
it app and this is actually pretty
standard to name an app and all the
connect examples online that's what they
do so I thought might as well follow
Convention again since this is
essentially just a function that takes
the request and response argument
whenever we're setting up our server
HTTP create server what we can do and
actually I probably type that too fast
all right so as you can see create
server it takes a request listener as an
argument so that argument is actually
this object right here simple enough and
now of course we need to give it a port
to listen on I think less toriel we used
AAAA as well stick with that one and
after our server is up and running might
as well log something out to verify it
server is running so right now if we try
to connect to our server nothing is
happening but if we run this bad boy
then check it out so we have connection
but right now it says cannot get for
slash this means that it can't even get
the home page because obviously we uh
you know we just have like the really
bare basics right now all right let me
add just a little bit all right
so essentially like I said whenever we
connect to the website to our server
what it's going to do is in our code
it's going to look to app right here to
say how do you want me to handle this
request that is embarrassing um okay so
let's continue here pretend that didn't
happen dart so the first thing that we
can do is we can use a method called use
so inside here we write a little chunk
of code in the code to handle user
request is called middleware so at first
let me just make something really really
easy we'll call a function called do
first and of course these functions they
take
the request which is the years who
request the response I could type which
is the response that we're sending back
and they also take a third optional
parameter called and next and I'll show
you guys in like two minutes why we need
this third parameter so just so we can
have something going on whenever they
request you know whenever they make a
request on the server we'll just do
something really stupid and log out the
word bacon to the terminal alright so
that is pretty much how we can set all
that up again we don't even use the
request response or Next right now I'm
just showing you guys a real quick
example servers running we just refresh
the page and check it out it says bacon
pretty stupid seems like we could do
that before so what is one of the
benefits of using connect well one of
the reasons people like this is because
you can actually take this middleware
and stack it on top of each other so in
other words whenever you have a stack of
middleware these functions can get
executed one by one one after each other
so you can actually have a function
called do first and another one called
do second now that's where this next
parameter comes in and actually let me
copy this real quick all right so now we
have two pieces of code two functions
that we want to run do first and do
second so if we type next
and let's for the second one we'll just
log out to now alright so what's going
on here
what is this next keyword what is this
stack in nonsense I was talking about
check this out actually let me stop that
it's annoying me all right now running
beautiful art so whenever the user
connects to our website whenever they
make a request to our server what's
going to happen is it's going to say ok
app how do you want me to handle this so
it's going to go up to this app object
and it says you obviously want me to use
this function do first so what it's
going to do is it's going to run first
do first and then it's going to look for
a method called next if it has this
method then it's going to go to the next
object in the stack which is do second
so hopefully if I didn't you know do
anything stupid or forget any semicolons
whenever I run this and the user makes a
request it's going to call bacon go to
the next one which is do second and tuna
so let's see what's going on bacon in
tuna now again you don't always have to
have this next right here what you can
do is you can actually make some kind of
logic again um this would typically be
something like you're going to test if
the user like has permission to do this
thing or that but if they actually I
guess that's a Python code I'm a little
used to type in Python but we can do is
you can actually decide if you want to
call this next method or not so let me
clear this out run this again and let's
make another request so again if you
don't call it then of course this second
object in the stack
it never gets called and that's why tuna
was never Rin alright so that was pretty
interesting I guess but not really that
useful still don't really understand why
connect is so popular well to be honest
that was a you know just a really simple
demo the reason that people love using
connect is actually for this in addition
to just using you know some plain old
middleware what you can also do is
have an optional argument of a path so
let's say that you had a couple
different pages on your website this was
the home page it's not running right now
but we'll say that we have like a
profile page and like a forum whatever
so what you can do is you can actually
type the path profile and then we'll
just make a function called profile
after this so essentially what's going
to happen here is whenever the user
makes a request for the profile page
you're going to call a function called
profile so this might be like displaying
the profile picture or whatever so
function profile I'll just say uh your
response so again I'm not actually going
to display a picture or anything I'll
just log out like um user requested
profile RISM alright so again whenever
they go to their profile it will run
this function and just so I can show you
guys it we can have more than one we'll
say that we have a forum as well make
another function called forum and we'll
say user requested forum all right so
now let's kick this off and check it out
so our home page again nothing new there
however if we go to profile and let me
show you guys this so we don't have
anything logged out right now however
I'm going to go to profile hit enter and
check it out user requested profile and
it'll be the same thing for forum again
what we would do here is actually
display something on the screen for them
but that is pretty much how we would
handle different um user requests
depending on the path so eventually what
we're going to be doing is we're going
to be using logic similar to this to
inspect the path to figure out what
request is a user making what webpage
are they trying to go to and then we're
going to be able to call a function that
displays the HTML of the CSS and all the
brains behind our app in the nice neat
way so there you go
thank you guys for watching and don't
know what I'm going to be talking about
in the next
but it's gonna be awesome so see you
then