All language subtitles for [English (auto-generated)] Node.js and Express.js - Full Course [DownSub.com]

this eight hour course will teach you

the fundamentals of node.js and express

so you can start creating backend and

full stack web apps using javascript

this course was created by john smilga

john has created a bunch of courses

including many of the more popular

courses on the freecodecamp youtube

channel

john's teaching is very hands-on so you

will create a bunch of projects while

you're learning what's up everybody this

is john from coding addict and welcome

to node and express tutorial video where

we'll cover fundamental building blocks

of node and express js framework now

since i want everyone to be on the same

page we'll start the series with node

and express fundamentals and gradually

move to more complex topics we will

build complex rest api with express.js

as well as full-blown mern application

in this comprehensive node.js course

you'll not only learn fundamentals of

node but also many related technologies

like express.js framework mongodb

as well as mongoose the main goal of the

course is to show you how to build

modern fast and scalable server-side web

applications with node

like in all my other courses to solidify

our knowledge we'll build a bunch of

cool apps and go through the steps of

deployment as well

lastly let me just say this if you're

like me and you enjoy learning new tech

by building projects

instead of going through the slides you

will enjoy this course

all right and let's start by answering

the most obvious question first what is

node.js

and even though there are plenty of good

answers out there the one that i like

the most is this one

node.js is an environment to run

javascript

outside of the browser

node.js was created in 2009 and it's

built on top of chrome's v8 javascript

engine

as you probably are aware of every

browser has an engine a tool that

compiles our code down to machine code

and chrome uses one by the name of v8 in

extremely simple terms the creator of

node ryan dahl ripped out the v8 engine

and build node on top of it since the

moment it was created node has evolved

tremendously

and while there are many things to like

about node i particularly enjoy large

community around node since that

tremendously saves time on feature

development as well as the fact that

with the help of node it's never been

easier to build full stack apps since

both front end and backend are

essentially built in the same language

and you guessed it that language is our

beloved javascript as far as course

requirements go

there are not that many

my expectation is that you are familiar

with basic html elements simple css

rules and have general understanding of

javascript especially es6 callbacks

promises and a sync await

since this is a node course

and i already have tremendous amount of

node content to cover i'm not going to

spend too much time on javascript

language fundamentals

while you can still follow along with

the course without knowing basics

it's crucial if you want to understand

how stuff works behind the scenes

as a side note if you need to brush up

on the javascript fundamentals i have a

youtube channel called coding addict

where i post a bunch of cool javascript

related content

specifically you might be interested in

js nuggets playlist where i cover a

bunch of useful es6 features as well as

asynchronous javascript topics so if you

need to jog your memory on javascript

fundamentals i suggest going to youtube

look for the channel by the name of

coding addict and then more specifically

the playlist by the name of javascript

nuggets when it comes to course

structure it goes something like this

in first section we'll get familiar with

node.js

as well as my dev setup

in the second section we're going to

install node.js and quickly cover some

general differences between browser.js

and node.js

then we'll spend some time on node.js

fundamentals in section 3 and after that

we'll learn what is express.js in

section number four

and once we're done with node and

express fundamentals so once we're done

with pleasantries

then we're after the races where

effectively in every section after that

we will build a bunch of cool node.js

apps all right and before we install

node let's quickly cover some major

differences between browser javascript

and node.js so essentially how node.js

apps are different from the browser

javascript apps

and let's start with the biggest one

when working on node.js app you have no

access let me repeat no access to

browser apis

since well they don't simply exist in

node there is no browser so there's no

dom there's no geo location no fetch and

all the other cool browser goodies you

see unlike browser apps that are

interactive for example user clicks the

button or toggles the nav and that sort

of thing

with node we build server side apps

and i know it's hard to picture that

right now but

our node apps will only consist of pure

logic without the graphical interface on

that note you know how in browser apps

we use a bunch of cool things available

on the window object

yeah sorry to break it to you but that's

also not available in node

so at no point in the course we'll write

document.queryselector

all right

and once we have covered things that

node.js does not have let's switch gears

and see some of the goodies that node

has to offer for example unlike browser

we can access file system

info about our operating system respond

to network quests just to name a few

also another major benefit of node is

the fact that it's based on versions

so unlike browser apps which depend on

the user's browser

our node app depends only on node.js

version it was built in

so in other words if we build a browser

app

and if our user's browser does not

support a specific feature

it is our responsibility to fix it

otherwise our app might have bugs

correct but when we're done building our

node app there's no rule that we have to

upgrade to a newer node.js version

and possibly break our app

we simply can keep running our node app

in the version it was built in and

without any worries go on about our day

lastly unlike browsers where modules are

optional

in node.js you have access to modules by

default and it's hard to imagine a node

app where you're not going to use them

as a quick side note under the hood

nodejs uses common js library for the

modules and while the general idea is

exactly the same as for the es6 modules

that we use in the browser syntax is a

bit different

as far as the install it's as

straightforward as it gets

just navigate to nodejs.org pick a lts

version

answer yes to all the questions

and if you don't get some weird bugs

congrats you have installed node

in order to check if everything went

correct just type node

version in your terminal

and you should see the version number if

you don't you'll have to troubleshoot

the error now as much as i would like to

help

when it comes to install it's impossible

for me to troubleshoot your local setup

so when it comes to troubleshooting

install errors i strongly suggest using

your favorite search engine instead

typically within a matter of minutes

you'll see a bunch of useful solutions

to your exact problem

lastly let's also talk about versions as

you can see at the time of the recording

i have two options

14 lts

or 15 current one

if you read the note docs you'll see

that for production apps they always

suggest using lts which stands for long

term support and therefore i will also

suggest the same but as far as tutorial

i don't think you'll have any issues if

you use the current version instead now

also since you're watching this in the

future your version number most likely

is going to be greater than 14 basically

greater than mine i definitely suggest

installing the lts option

that's offered to you instead of

downgrading to my version and if you're

stressing about content being out of

date

let me assure you that everything we

cover in the course will work perfectly

fine with your current note version

and eventually if some bugs do creep in

i will definitely update the course

content so long story short just install

your current lts version whatever it is

and you'll be in good shape so in my

case it is 14

i have two big buttons and of course

since i would want to go with lts i'll

click on left one

then notice we are getting the download

package and now i just need to go to my

downloads

and then crack it open

and then like i said we just need to

answer yes to all the questions so we go

with continue

continue

and yep i would agree

and again we just install and then we'll

be prompted for our passport

and once we add that one we should be in

good shape and then like i said once the

install is complete

and yep we'll move this sucker to the

trash then if we go to our terminal and

if i massively zoom in

and if i type node

version

there it is i should have my version

number which in my case of course is 14.

if you also can see the node version in

your terminal you are in good shape and

you can continue

with the videos

if not

please troubleshoot it because otherwise

everything we're about to do next is not

going to work since you haven't

installed node

on your computer

install is complete hopefully we all

have node on our machines now what

what do we do

for contrast with vanilla.js it was

somewhat easy right we create index.html

jam our javascript code whichever way we

prefer and browser does the rest it

evaluates our javascript code but

what about node how do we get node to

evaluate our code

and effectively we have two options

a repl which stands for read eval print

loop and cli executable which just means

running our app code in node if i have

to be perfectly honest reply is for

playing around and cli is essentially

for everything else in fact this is

going to be the first and most likely

the only time we'll use a rebel in this

course and after that cli is going to be

our best friend how do we spin up the

rebel well

we go to terminal and in terminal we

simply type

node and then no arguments nothing we

just press return or enter however you

would like to call the button and that's

it now notice we have this little angle

bracket that just means that we are in

the rebel and once we are in a rebel we

can do reply things what would be a

first ripley thing we can do well we can

simply type our name so cons

and the name is equal to john

and there it is of course now i can

access name and my name is john

as you can see

you're not going to write anything

serious in here and if you have written

any vanilla javascript apps you know

that of course we can also do the same

thing in a browser console

so we can also evaluate some code there

but of course we're not going to write

anything serious in a browser's console

so the same thing is for reple yes we

can come here we can play around but

when it comes to serious applications of

course you'll pick a cli executable

instead and in order to close the repo

we simply go with control and c

and as you can see we have suggestion

that we need to press it again and now

of course we're out of the rebel not bad

that bad we now know how the ripple

works

but what about a more serious node

application

how do we get node to evaluate our code

well we would need to start by creating

a project right so back on my desktop

i'm going to create a new folder

and surprise surprise i will call this

tutorial why well because we'll do

tutorial things

and i'm going to say tutorial now of

course if you want you can add node but

i'm just going to leave it as a tutorial

and then of course we'll have to use our

text error in my case like i already

previously mentioned i'm using visual

studio code

and my preferred method is just drag and

drop

and then instead of the folder what i

would want is to create a new file and

this is the case where you can literally

name it whatever you would want and in

my case i'm going to go with app and js

and in this app.js okay now we want to

write some more serious node program and

the program is going to be following

where there is a const so there's a

variable by the name of amount and as a

side note i'll make this bigger and i'll

probably bump up the font size just so

we can see a bit clearer

so we're gonna go with const and not

also close the sidebar hopefully you see

that i have the file by the name of

app.js

and like i previously mentioned we're

going to have a variable by the name of

amount and it's going to be equal to 12

and now let's set up a if condition

where if amount is less than 10 then we

simply cancel log small number and

otherwise we'll just say that the number

e is large so we go with if

and we're looking for amount

is less than 10 and if that is the case

we go with console log and we'll just

say

small

number

and otherwise if it is of course equal

or bigger than 10 then we go with

console log and we say

large

number

and at the end of the day we just write

console log hey it's my first note up as

you can see an extremely complicated

functionality and in this case i'm just

going to set up the template strings so

you understand that of course we can use

them here as well i'll say hey it's my

first

node app and if you want of course you

can jam the hello world there somewhere

as well since that is the traditional

approach with the first program

and then in order to execute this code

we effectively have two options i can

navigate back to my terminal

and i can zoom in like so and of course

now i'm in a root so i would need to

navigate to the desktop and probably the

fastest way is just typing cd and drag

and drop

my folder here okay so now as you can

see i'm in the tutorial and in order to

execute my code i just need to type node

and then app.js now keep in mind that

technically i could have done that from

the root

we just need to provide the full path

where i go to users blah blah blah and

then tutorial and of course the file

name is app.js and let me bump up the

font size even more and the moment we

run it check it out we have large number

and hey it's my first note app now if

you don't believe me

we can go back and we for example can

say that the number is nine

and of course again we would need to run

the code

and we're gonna go with node and then

app js beautiful we have small number

and we still have our hey it's my first

node up again the whole point of this

line here is just to showcase that not

only we can use quotation marks but also

we can use the template string as well

so that's one option but if you're

familiar with vs code you know that it

has this cool feature of integrated

terminal where effectively we have our

terminal

but

it is right away pointing to our folder

so we don't need to do this whole dance

where we navigate to the folder and then

run the app we simply can open this up

and the shortcut is control and tilde

and also keep in mind that of course you

can navigate through the tabs the

problem is that i always forget where it

is and effectively we need to go to view

and then you're looking for this

terminal command here

as you can see this would be a shortcut

and tilde and in here we have nice

suggestion that we already located in

tutorial folder and what do we need to

do well again we just go with

node

app.js why well because that is my file

name so for the remainder of the course

i'll use the integrated terminal that

comes with this code just understand

that both of them effectively do the

same thing and there it is now i run

node app.js because that of course is

the file name and i have small number

and hey it's my first node app and

that's how we can evaluate a more

serious code using node as i note if at

any point during the course you need to

compare your code to mine just navigate

to website

johnsmilk.com and the website is

johnsmega.com and then either in the

project page or in the homepage you'll

find node express tutorial project so in

the homepage you'll find it in the

latest project so just keep on scrolling

but if it's not here it's definitely

going to be in the projects page and you

can even filter it in order to save some

time so look for node in here like i

said the project name is node express

tutorial and not any of these links

will get you to the repo and at this

point you can either clone it 4k

or just simply download and you're

looking for this node tutorial and in

here you'll find

all the folders as well as the files now

keep in mind that eventually when we

start working on express

we'll have to get this repo anyway

because i'll use it for starters since i

have prepared some assets for you some

assets that we're going to use in our

examples so this is really up to you if

you want you can get it right now just

keep in mind that you'll have to get it

later anyway and once we have executed

our first code in node

let's quickly cover the concept of

globals

or global variables in node

and the emphasis is on the word quickly

yes there are more global variables

available but the idea

is not to spend half an hour in slide

bill instead i would want to give you a

general idea

and as we progress with the course don't

worry

we will implement them

and that way you can right away see them

in action not just some random general

description

and before we continue let me just

mention

that throughout the tutorial

the code from the previous video

i'm going to save in a file so for

example remember our first

complex app

with a mount and all that

so what i did

i created a file name by the one

hyphen intro js and then i just copy and

paste it this is what i'm gonna do

throughout the no tutorial part of the

course so that way you can always have

access to the code and if you ever need

to you can jog your memory now if you

don't want to use my one if you're

adding your own comments and all that

i would also suggest doing that where

essentially just create a file just dump

it and then that way you are slowly

progressing on the course and if you

ever need to go back and refresh your

memory you always have that option and

keep in mind that

if you would want to run this file you

simply go with node and then whatever

the file name right so in my case that

would be one

dash intro

js again i'm going to keep on numbering

them because i'm just annoying that way

but you don't have to that is really up

to you so back to the globals

when we work in vanilla.js applications

we know a

very cool thing is the fact that we have

access to the window object and the

reason why it's so cool because in the

window object we can get a bunch of

useful things right so for example we

can get a query selector so i can select

a node

i can get built-in fetch

and hopefully you get the gist

now i don't want to rain on your parade

but

you know there's no window

why well because there's no browser so

there's no window object so if you'll

try to access window

node will spit back the error and most

likely your app will crash

now there are some globals of course

there is this concept of global

variables and essentially what global

variables means that

anywhere in your application you can

access them so no matter how complex my

application gets

how nested it gets or whatever

i'll always have access to those

variables and again let me repeat these

are just some of the variables of course

there's more and i'm not going to spend

hours and hours talking about them i

simply want to give you a general idea

and then like i said we'll start using

them and you'll see them in action and

in my opinion

that's just going to make it way clearer

about what in fact they're doing and

some of the useful ones we have their

name so that would be underscore

underscore their name

just going to give us path to current

directory then we have also underscore

underscore filename which as you can see

is going to give us a file name then we

have require which is a function to use

modules

as well as the module that would be info

about the current module now these two

will literally cover them

in the upcoming videos because our next

big topic is going to be modules

so for time being

just remember that we have require and

module and you'll see them in action in

no time and then we have a very very

very useful one and that one is a

process and why it's so useful because

it gives us a info about the environment

where the program

is executed because we need to keep in

mind when it comes to a node app

at the moment yeah we're executing that

on our machines

but

when you deploy for example your api so

for example your server right where is

it sitting it is sitting on digital

ocean or herald core or whatever so that

of course is already a different

environment

and of course based on that environment

you can

make a bunch of decisions in your

application

again

if you'll take a look at the process

right now it's just going to be a

giant object

of gibberish data but trust me as we're

progressing we the course

will find a bunch of useful properties

that we'll implement in our application

now any of them you can simply console

log and you'll get that useful data so

you can just run console log and then

for example their name again i'm not

going to cancel log all of them probably

the biggest one is going to be the

process like i said you'll get a bunch

of properties that at the moment

will look like a gibberish and i simply

need to save and of course then we go

with

node and app.js we run that and there it

is now of course this gives me the path

so

if you're interested of course you can

console log rest of them

as well

but

in my case i'm going to stop

with their name now also very quickly

yes you have access to the console

so as you can see in order to cancel log

we have to use the console so that is

also something that is available

globally then just like

in the event ljs we have set interval as

well as set timeout so you can run these

ones and i'm not going to run both of

them but i'll show you set interval very

quickly just so you don't think that i'm

cheating

and the way it's going to look like of

course we have our callback function and

then i'll say that my interval is going

to run every second and i must type

hello world otherwise

well what kind of tutorial is this and

again we simply go back to node and then

app js and as you can see now

after every second i have hello world in

console and in order to stop it remember

the command was ctrl and c

and before we move on and start talking

about the

modules let me also mention something

else

where essentially we don't need to type

node and then app.js you can simply

write

node and then app however throughout the

course i'll probably keep on typing js

just because i'm annoying that would be

the first thing now the second thing and

this is not a node thing this is

actually a terminal

if you don't want to type it you can

simply go back to the previous command

and in order to do that you need to

press on arrow key up and check it out

the moment you press notice that was my

previous command

and then i have one before that so in my

case that is node and then app.js again

you don't need to add that just

extension but probably i will

and then you just go back to the

previous command and then press and

again you just execute that command and

of course if you want to clear the

console again this is not a node thing

this is a terminal i just type clear and

lastly

to answer the question that's probably

bugging you the most we always have to

just type node and then the file name

because as we're going to be testing a

special in tutorial it will probably get

annoying and the answer is yes

but only for now

once we learn about npm

the external packages which at the

moment i fully understand doesn't make

any sense at all then there's command

that effectively will restart our

application so we'll have to install

some

third-party module some external library

and that will do the job of restarting

the application for now yes all

throughout tutorial up until the point

where we cover that external library and

external libraries in general yes we'll

have to type node and then whatever is

the file

i know it's a little bit annoying but i

just don't want to skip ahead i want to

get us there with a full information of

what is happening so with this in place

with clear understanding of the

global variables in node now let's move

on to our next topic which is going to

be modules in node beautiful

and once we understand the globals in

node now let's talk about the modules

and first let's return to this command

notice we have here

node and then app.js

probably the question

that you have

is well does that mean that all my

application

needs to be in this one file

and the answer again is yes and no

yes you'll execute one file

but you'll split your code in modules

otherwise that would be literally insane

to jam all your code in one file

and effectively i'll just show you with

an extremely complex app and of course

extremely complex is in the air quotes

right now

and you'll see why we'd want to use the

modules in the first place so in the

next video i'll give you official intro

with a bunch of gibberish and all that

but for time being let's just build

super complex

app and then see why i would want to use

those modules

in the first place and if you have any

familiarity with es6 modules if you have

worked with them in vanilla.js or in

react.js you're already in good shape

the syntax is going to be tiny bit

different because you know it uses

common js but the general idea is

exactly the same

and we start with a simple function by

the name of

say hi you guessed it and then this

function is going to be looking for the

name parameter and then inside of the

function what do we do

we simply cancel log and we say hello

there

and then whatever is the name of the

dude or the gal that is being passed in

as a parameter and of course we can

invoke it and i can say say hi and then

pass in susan for example

and in order to make this interesting

i'll set up some variables as well so

i'm going to say const john is equal to

john

and you guessed it

since there's a john there also has to

be a peter and hopefully you get the

gist so imagine we would have a bunch of

names and then we have probably more

functions than this one but for time

being this is just going to be say hi we

copy and paste we invoke this function i

guess three times one for johnny boy

one poor peter

and then the first one we already have

for susan and what do we do we run node

app or app.js we run that and there it

is now of course in our concert we can

clearly see hello there susan blah blah

blah now wouldn't it make sense if the

names would be separate as well as this

function or the future functions that

we're going to create would be in

separate files

and then we can access them all

throughout the application

and

that way of course we would have smaller

files and more structure to our

application and that is exactly what the

modules allow us to do

and that's why we'll move on and start

talking about the modules in the next

video

beautiful

and once we understand the main problem

with this code where again the moment

code is technically still tiny but as

you can see it is getting bigger and

more annoying with every line now let's

talk about the modules and i guess let

me just give you the

main idea first and then we'll talk

about the implementations and

all that good stuff so first of all what

are the modules again if you're familiar

with es6 modules you already have the

idea but essentially that is

encapsulated code

and the key here is that we're only

sharing what we want

so we're only sharing minimum how would

that look like in real life well i can

go here with secret

and then i can type here super

secret and then since this variable

is in this file

as we can see you can access anywhere

okay so by mistake i can just access it

i can override it now of course you can

make an argument that i mean it is made

with cons but hopefully you get the gist

this is available to me everywhere in

this file so once we set up the module

you'll see what are the differences now

node uses common js library under the

hood that's what makes it happen

and then every file in node is a module

again let me repeat every file in node

is a module so those super powers

that we will cover in just a few seconds

we have them by default we don't need to

do anything we don't need to go to the

store and buy some javascript code no we

just get them by default

and the way the modules work well we

simply need to create a new file right

and i'll right away

set up the names here because of course

eventually this code will be sitting in

the file name by the three hyphen and

then the module basics or whatever but

the names as well as the function well

it's going to be in a separate file so

what i'm trying to say is that in a root

of course there's no folders or nothing

so everything is rude i'm going to go

with four again i'm doing that because

eventually this is going to be three

hyphen modules something i'm gonna go

with maybe names or you can type first

module whatever you would want and i'm

just gonna go with names.js

okay awesome and then i'll take these

three

variables

from my app.js and i'll copy and paste

in the names and then also what i would

want is to set up one more file and of

course this one will be

five

and

i don't know we can say second module

or so i'll say here utils

something generic so we set that up

and now of course what i would want is

to grab this function

from the mgs and copy and paste in the

utils and now sixty four thousand dollar

question

is this app gonna work

or is it gonna break and of course the

answer is it's gonna break because we

have no access right now to say hi

or to john or peter so

why don't we

go to the names and console log

something and as i said yes you can

console log this in the app.js it is a

file so by default it is a module but

since we'll do most of our work in the

names and new tools first why don't we

go to names and that way we can also see

how we can run the file just by using

node and what i would want to console

log is the global by the name of module

so in the names

go below or above the variables doesn't

really matter

and go with console.log and then module

and remember to run node and then

whatever is the file name so in my case

it is four dash and then names

js you run this

and you'll notice something pretty

pretty cool

where we have the object

and in that object we have quite a few

properties now the one that i'm

interested in the most

is this exports one

and it tells me that this export is an

object

and the way the common js syntax works

whatever i'm going to dump

in that export i'm going to be able to

access anywhere in the application

so that's the key

remember we're only sharing the minimum

so it's up to us

to

set those values in that export object

we decide what goes in there previously

remember

secret was accessible

everywhere in my app.js

now in the names i can be hey you know

what john and peter yeah

i'm sharing them anywhere in application

we can access that but the secret

variable no this is just going to be

local so i'm going to add here i guess

the

comment by the name of local and that

way at least we understand so this is

going to be i mean i'm not going to use

global

but i'm just going to say that

share so we're sharing this with rest of

our application and then if i know that

this is a object

and it is sitting in the module how does

that work well we go with module

then it is an object so we go with

export

and we have multiple ways how we can set

this up but the most basic one will

simply say that yep it is an object and

inside of that object there's going to

be two properties john

and peter now i can probably already

guess that we're using a es6 syntax

since the key name is exactly the same

as the value well we can simply pass it

right so we have john and peter so now

what happens in the app.js we can access

them so i can go back and this is the

case where we'll need to run that

require remember in the globals we

talked about this function

so in order to share them we need to

use

module.exports and essentially i'm

setting up the object like so where i go

with whatever values i would like to

share now in order to access them

i need to go with require

and

i can assign it to a variable or i can

simply require now in our case we will

assign it to the variable and i'll use

the same type of syntax where i'm going

to go with names just so we can

console.log that

and this is going to be equal to require

so that's my function and as a parameter

we need to pass in where the module is

located

so where is this data coming from

and always always always always

you will be setting up your module you

have to start with dot now sometimes

your modules will be two levels up i

don't know three levels up whatever then

of course you'll start with dot dot but

you'll always start with this one dot

because there's also going to be a third

party modules and there's going to be

built-in modules in node and then we'll

use just these quotation marks again

super super important every time you

create your own module you'll have to

start with dot and then forward slash so

essentially you're giving a path now in

our case what is the path well i'm

looking for the names right so i set up

here the path and then if i cancel out

the names

i should see something pretty pretty

cool where i go with names

and there it is now i'm going to run

node and then app js now keep in mind

we're not running names anymore we go

with node and app.js now of course still

complains that we have no access to hi

let me comment this one out so let's say

node and app.js

and check it out now of course we have

the object

with john john and peter and peter

and we explicitly said what we would

want to export so we go with exports and

that way

no one has access to the secret one so

this secret one is only for this file

and of course we can do the same thing

in the utils as well right so we have

the say hi

and we go with module and export

and i can just simply set it equal to

now the reason why i was setting this up

as a object because i had multiple

things at john and peter and don't worry

in the next video i'll show you

alternative syntax how you can also set

this up but in this case i have object

and then of course i'm setting these

properties and i said note this is just

my preferred way of

actually using the exports again there's

multiple ways how we can do that and i

will cover the other ways in next video

but this is just my preferred method

that's why i right away set my exports

equal to an object and then pass these

two properties and in utils since i only

have one thing i'm just gonna go with

say hi that's it i'm saying

that i'm gonna be exporting my function

so say say hi like so and once i have

exported my function

now of course i need to go back to the

app.js

import my function the same name

and i'm going to go with say

say hi

and that one is going to be coming from

the different file of course so we go

with five

and then utils

and notice here how we don't need to

pass in the js if it is ajs file we just

simply omit the extension as long as the

file name of course matches

and then

i can remove now if you want you can

cancel log but i already know that i'm

gonna have the function over there i'll

uncomment my say hi

so now of course there's going to be no

error and let's make a clear console and

again we run

the node and then app js and there it is

now of course we have a different error

where it says well john is not defined

all right but i know that

john is sitting in the names right so

here we have multiple flavors either

you can destructure it

so instead of going with names i can go

john and peter that is definitely one

option or

i can go with property names right so i

can say

names and then john

and then the second one is names and

peter names and peter and now hopefully

everything works otherwise you're

probably thinking that i'm just messing

with you there it is now we have hello

there susan john and peter

and effectively what we did we separated

our concerns again the main idea is that

every file by default is a module and

then when it comes to a modules we are

in charge what we are sharing and in

order to

export or make it something available

from this module we go with module

exports

and then we just set up the

functionality whether this is going to

be a object that we're exporting or

we're simply exporting as a function

so we set this equal to

to the exports and if you're familiar

with es6 modules

as you can see this is very familiar to

the export

default and then whatever you're

exporting as default whether that is a

function whether that is a react

component or whatever notice i'm

exporting as default so of course

when i'm importing this

in this case app.js well i already know

that this is a function so i can name

this whatever i would want and the same

goes here

since i'm exporting this as object i can

call this shaken bait as long as i

access it later of course i'll be able

to access the property as long as the

name

matches to whatever i set up over here

so let me save this and now of course we

can talk about our next topic

all right so far we know two flavors

one

if we want to export one value

we just set module export

equal to that value and then of course

wherever we want to use it we just

import it

set it equal to some kind of variable

and of course

once we use that variable we have access

to that value

and the second flavor is if we have

multiple values

then we simply set module exports equal

to an object and then in that object we

set up the properties however there's

also another way how we can do that

and essentially it is called

export as you go

and the way it looks like

first i'm gonna set up a new file and

i'll call this six and i'll call this

alternative

flavor now again naming is really up to

you since that is the hardest thing in

programming

and then i'm going to come up with one

array and i'm going to call this items

and that will be equal to item one

and item number two

and then i'll set up a object and i'll

say const person is equal

to a object and there surprise surprise

we'll go with name property and set it

equal to bob

and i'm purposely adding multiple data

types

just so you don't think that we can only

export variables or functions

and in here we have two options

either

where we are setting up the

value in this case items i simply go

with

module exports and then whatever is the

name and of course in this case i'm

going to keep the items but notice the

syntax where instead of going with const

items i right away go with

module.exports

or if you are a true rebel you can do

something like this module exports set

up the property for example

single

person and set it equal to your person

object why we are able to do that

because if you remember in the previous

video when we console logged

module exports it was an object right so

what are we doing here we're setting up

a property on that object and set it

equal to an array

and here i set up another property and

just set it equal to a person keep in

mind of course i can still write simply

module exports and then the person

but since you might

sometimes see this type of syntax as

well i wanted to cover that and now of

course we save alternative flavor.js

and you're probably not going to be

surprised that if we navigate to app.js

and in this case i will call this data

because i'm getting a object and on that

object i have two properties and i need

to come up with some kind of name now as

always this name is really up to you

you can call it shake and bake you can

call it uncle bobby whatever you want in

my case i'm gonna go with generic data

we go with require again we're looking

for the file by the name of alternative

flavor

and

in this case i'm not gonna do anything

with it apart from console logging and

if i navigate back to my integrated

terminal and run

the node app.js

there it is of course now i have the

items as well as the single person

now please keep in mind one thing

where this syntax

whether the first line or line number

six

at the end of the day is exactly the

same like we're doing over here yes the

syntax is a bit different but at the end

of the day you just make these values

available somewhere else in your code

now just because i prefer this type of

syntax most likely throughout the course

you'll see this approach but

if you prefer this one instead

be my guest at the end of the day it is

your application and you are the one who

is going to be maintaining it and before

we move on to built in modules as well

as third-party modules let me throw you

a mind grenade

and i'm going to start by removing this

console log

in the app js like so and i'm going to

create a new file with the same exact

name a mine grenade as always

if you would like to call this

differently

that's totally your option

and i'm going to go with mine grenade

like so and js and in this file i'll

create some basic functionality and by

the way let me save app.js so let's go

with const

num1

is equal to 5 and then const num 2

is equal to 10. of course there has to

be a function that adds these values as

always with every tutorial so go with

add values just for the sake of it i'm

just going to go with good old function

keyword and the old setup meaning

not the arrow function syntax and simply

here we'll go with template string the

sum is colon

and then of course let's go for template

literal and we'll say num1 plus

num2

and

instead of setting up the exports i'll

simply invoke

add values

and now i'll throw you that migrate that

i was talking about where in the app.js

i'm not going to assign it to anything

i'll simply write require

and then we'll go with my grenade and

now let me comment out these three

since at the moment they will just over

populate the console and again let's run

node and app.js and once we're on our

code we can clearly see in the console

something pretty interesting where we

have a log of the sum is 15.

so what's happening over here

well

when we are setting up everything if we

have a function inside of the module

that we invoke yes that code will run

even though we didn't assign it to a

variable as you can see clearly here and

we didn't invoke that variable

and before we go any further let me

mention three things

first

it's not unique you can also do that in

es6 modules

and if you took my vanilla javascript

course you know that we use that

functionality number two yes throughout

the course here and there we will use

this particular setup now it's going to

be with third party modules and of

course once we get there i will remind

you about this setup so that's how it

works and third

i wouldn't suggest losing your sleep

over it

just please remember that when you

import a module you actually invoke it

and this is really going into weeds but

the reason why that happens is because

this code is not just exported on its

own

when the node exports this it actually

wraps it in the function so that's why

when you're required yeah you do invoke

the code if

you have some kind of function that

actually is executed here keep that in

mind not talking about exporting

something i'm talking about executing

function here and there and of course in

this case you need to use the

imagination that we'll do something way

more useful than this at this point

you're looking at it okay i could have

just set up that function in app.js and

you're 100 correct this is the place

where you definitely need to use your

imagination where of course the

functionality we'll use it for is going

to be way more complex but the idea is

going to be similar where we'll just

require some kind of module and behind

the scenes that module will do a bunch

of cool stuff okay that was fun we

created our first module and in the

process covered the general module

syntax and use cases as well

now what

well as helpful as our say hi function

is

some very smart people created way more

useful modules than that

and the good news is that we can start

using them right away

so what i'm trying to say here is that

node has bunch of built-in modules

that we can use freely in our apps

in the following videos we're going to

cover following modules os module so

operating system module path module file

system module as well as http module to

set up our http server and before we

continue let me just say this

i purposely cover only a few major

modules

and more specifically only a few

properties and methods provided by those

modules

you see the list of built-in modules in

node is quite big

and the amount of properties and methods

each module has

combined is of course even bigger

and as a result we could easily spend

the remainder of the course on just that

but is that really beneficial and of

course the answer is no

instead let's cover the general setup

first

and later as we progress with the course

implement some modules as we go

now if you're interested in more

properties and

methods built and modules have just

navigate to the docs and go nuts so if

at any point you would want to find out

more about specific property or method

or the built-in module in general just

navigate to nodejs.org

and then look for the docs

and again in my case

the version the long term support

version is 14

so i'm gonna click here but as you can

see we also have an option of going to

the older versions as well so as you can

see i can get the docs for the older

versions as well

but i'm just going to stick with my

version

and then be prepared to go nuts

if you enjoy docs

then you have yourself a big old party

where of course you can look for modules

and then each module has the properties

as well as the methods so of course you

can get a

extremely detailed information on the

properties as well as the methods here

in the docs

all right and once we have covered the

general existence of built-in modules

now let's take a look at few of them

and i'm going to start by creating that

file that i promised a few videos ago

remember when i was setting up the

modules i said that eventually there is

going to be a file by the name of 3n

modules and this one i would want to do

it together

just so you don't think that i'm not

fulfilling my promises so we're going to

go with module and then i guess

modules.js

i'll grab that i currently have in the

address it's pretty much everything

and we copy and paste and in this case i

also uncommented these say hi again this

all stays for your reference and you'll

have access to it if you navigate to the

github repo

so grab everything in app.js i'll

actually cut it out since we'll start

from scratch and copy and paste now of

course all this code is sitting in the

modules and just keep in mind that of

course we're still referencing the names

utils alternative flavor as well as my

favorite the mind grenade

and back in app.js

now let's start by taking a look at the

os module

and os module we built in module

provides many useful properties and

methods for interacting with operating

system as well as the server

and the general setup

for the built-in modules or even the

external ones that we're going to cover

a bit later

is going to be similar

where we're going to go with some kind

of variable

and in this case i'm going to call this

os for operating system then we're going

to go with require

and then in the require we'll have to

pass in the name

so since this is a built-in module of

course we don't need to install anything

just remember it later when we work with

external ones yes we'll have to install

that module first in this case it is a

built-in so we just go with os but again

let me stress something we're not doing

dot and then forward slash no we just go

with os so that way node knows all right

so you're looking for the built-in

module and

once we set this up

then we have multiple options

either you can access those methods by

just running this variable

so it would look something like this

where i go with os and notice

the moment i press dot

i have all these options so these are

the

methods and properties that i can use or

if we know that we want a specific one

you can simply destructure it here and

of course throughout the course i'll use

multiple setups just so you understand

that both of them effectively do the

same thing so here i have access to all

the methods and properties that this

module provides and of course now we can

go crazy for example i could get a

useful info about the current user which

of course is me so say info about

current and

user and you know what as a side note

i'll save here and i'll close all the

files it's just a bit annoying that i

have all those tabs open

back in the app.js

once i have a comment of course now i

would want to assign it to a

user and we'll simply go with os since

that is the name of my variable and then

method that i'm looking for is userinfo

i don't need to pass anything i simply

invoke it and of course since i would

want to see the result i simply go to

console log and then i'm looking for the

user and you can probably already guess

that we'll just run

node app.js and there it is now of

course i have a info about the user

which is me so this would be a home

directory this is going to be the

default shell and all kinds of useful

stuff

then i want to show you how we can get

the uptime of the system so effectively

how long the computer has been running

in seconds and i'll just add a comment

method

returns

the system

system

up time up time

in seconds

and

the way i'm going to run that i'll right

away set up the console log

just so you understand that of course we

have multiple options how we can invoke

those methods

you don't always have to assign to some

kind of variable now i'll leave this one

in here

so i'll leave the console log and then

user

and let's say right above or you know

what let's do it this way so leave the

console log where the user is and then

let's go with another one we'll go with

console.log in this case i'm going to go

with template string and we'll say the

system

system uptime yes and then let's use a

interpolation of course and the method

that i'm looking for

is uptime so again i go with my variable

name and i know i've said this before

but i just want to stress this point

just so we all are on the same page and

in this case i'm going to go with os and

then the method name is uptime

and then let's just add seconds and

again same deal back in the integrated

terminal run node and then app.js and

there it is now of course not only i

have the info i also have the system

uptime and what's interesting this

actually is 100 seconds meaning if i'll

run this notice that you'd expect that

this would probably stop at 60 right

since we have 60 seconds in a minute but

no actually this one goes to a hundred

and then i'm just gonna set up a object

where i'll show you a few more methods

and then we'll move on to a next module

because again the point is not to cover

each and every method the point is just

to give you a general idea how the

modules the built-in modules would work

in node so clear my terminal and then

i'll create a object i'll call this

current

and then os

and then in this object i'll set up

properties and i'll set them equal to

the method

that actually returns that value from my

os module so go with name and os and

this is going to be equal to a type

method then i can get the release

and this one will be equal to os and

then

release again we invoke it then we'll

look for total memory and free memory

total

and mem

and of course i'll go with os and then

total mam as you can see somewhat

predictable and then we're gonna go with

free memory

and it's not going to be surprised if

we're just going to go with free memory

here let's save that one and lastly

let's just cancel log it

and we should

get a bunch of info about our current

operating system again we're going to go

with node and then app.js

and not only have the user information

not only i know

how long the system has been up

in seconds i can also get some useful

data about my operating system and again

we're just scratching the surface of

course there's more methods and

properties but hopefully you have a

clear understanding how powerful these

built-in modules are in node.js since

the node we can interact with the file

system something we couldn't do when we

used our javascript in a browser another

useful module is a path module which

allows us to interact with file paths

easily

and i'm going to remove all my code in

the app.js because behind the scenes i

created a file by the name of

8 os

and module and of course copy and pasted

the contents from the previous video

that's why in app.js i'll remove

everything and the setup is going to be

exactly the same we come up with some

kind of name now most likely it's going

to be path

and then we pass in the module we would

want to get and in this case of course

it is a path module

and then let's just start with a very

useful property

a separator property that returns a

platform specific separator so if i go

straight up with console.log and then

path

sep this is going to return my platform

specific separator so if i write node

mjs

there it is and of course i have forward

slash now if you're using different

platform for you the value might be

different after that let's take a look

at the path dot join so the join method

which joins a sequence of path segments

using that platform specific separator

as the limiter and second thing it does

it returns a normalized resulting path

and in order to show you an example i'll

create a new folder so not a new file

but a new folder i'll zoom in and i'll

say content and inside of this content

folder i'll create another one and i'll

simply call this generic subfolder and

in this subfolder i'll say a test

and text file and instead of the text

file i mean

you can place something you can omit it

doesn't really matter i'll just say text

and then txt and once we save it back in

the app js now i want to use that path

dot join method so i'll say const and

then file path is equal to path dot join

and then we need to pass in those values

as strings so for example since i'm

looking for the content folder

i'll simply say forward slash and then

content then i know that inside of the

content folder i have the subfolder

that's another folder and then

eventually there's going to be a test

txt so we go with test and then dot txt

we save the sucker and then if we'll

cancel log the file path we should

see the whole path and there it is now

of course it is normalized and we get it

as a value so we have content subfolder

test

and txt so if i start adding some type

of forward slashes meaning trailing

slashes then of course they will be

removed we still get the normalized path

and we can also get the base name so for

example i create this file path but i

only would want the last portion of it

how can i access it well

the method name is base name

so we're gonna go with const and base

and path dot base name and we just pass

in that file path and now if we cancel

log the base

we should see the text again these are

just summaries if you want just a

directory of course you can imagine that

there is a method that returns that as

well but since i don't want to cover

each and every method that's why i will

skip that one and there it is now of

course not only i see my normalized path

but i also see the test txt which is my

base and the last method that i would

want to showcase is path.resolve

and why it's so cool because it returns

an absolute path

and once in a while in our applications

we need to provide that absolute path

that's why of course we'll have to use

that method

and when it comes to path.resolve it

accepts a sequence of paths or path

segments and resolves it into an

absolute path so below the base i'm

going to go with cons and then

absolute and that one is equal to path

and we're looking for dot resolve

and here remember when we talked about

the globals one of the first globals i

covered was underscore underscored their

name so this is going to point to this

directory where the app.js is located

and once we're here then of course we

just need to provide rest of the values

in my case that is content

then i'm looking for

sub

folder and then eventually i would want

to get to the test dxd i would want to

get this absolute path and then once i

set up the value of course

if i go with my console.log and if i

provide

absolute

once i run node and objects

you can probably guess that in the

console i'll have my absolute path

to the test txt and if you're wondering

why we would ever want that well

remember our application

is going to run in different

environments right

so of course the path to some kind of

resource is going to be different in my

computer in my local machine than for

example in heroku

hopefully it is clear and now of course

we can take a look at the next useful

built-in module

nice now we know how we can work with

path module and like i mentioned in the

previous video we also have an option of

interacting with a file system

so

what i would want right now is first

create a new file i'll call this nine

and we'll say path

and

module like so js i'll grab everything

that i have in the address

copy and paste

and once we have this one out of the way

i'll just remove

and keep the app.js clean for now

as well as clear the console

and yes we have an option of interacting

with the file system and the module the

name of the module is fs

now essentially there are two flavors

when it comes to file module we can do

it asynchronously non-blocking or we can

do it synchronously which is going to be

blocking but

for time being we'll just cover both of

the setups

and then later in the course

we'll cover what are the differences and

why you should prefer one over the other

one for now just think of them as

different methods but eventually yes

we'll talk about it the whole structure

of the node

and why would you want to use the

non-blocking code instead

as well as different approaches when it

comes to callback functions different

solutions

and for now i just want to show you both

methods essentially four methods

and then we'll just move on to the next

topic

and in order to set this up in this case

i'm just going to structure right away

the methods that i'm looking for and in

the first video we'll take a look at the

synchronous ones so that's why i'll

destructure

read file and sync and that is coming

from require and then the module name is

fs

again please keep in mind it would be

the same thing

if i were to

go like this fs and then fs and whatever

the name

i was going with read file sync and of

course i have access to it i'm just

showing you a different way how we can

access those methods we just destructure

them out of the fs module and then the

second one will be write file sync

write file sync

and then once i have the structured both

of them

then i'm going to set up two variables

so first we'll read two files

we haven't created those files yet but

in a second we will and then eventually

we'll create a new file with write file

sync so i would want you to go to the

content folder if you haven't created

then i suggest creating one

and

i mean i'll keep the subfolder just

because

i believe the path module is still using

it but in a content i'll create a new

file so not in the subfolder but

actually in the content i'll say

first first and then txt

so this by the way sets it up in the

content so let me move it up or i'm

sorry this sets it up in a subfolder i

believe

and it tells me do i want to move yes i

would like to move and now i have the

content

that has the first txt

and then i have the subfolder with

test.dxt of course if you want you can

place it in a subfolder that's really up

to you but in my case i would want them

simply in a content so i'll go the

second one txt and as far as the values

i'll say hello

this is first

first text file

and then of course we can copy and paste

the value and just change it around to

the second file so in the second txt

we'll say second text file

and once we have both of the text files

now let's take a look at how we can read

from the file system

and since we have read file sync we know

it is a method and in that method we

need to provide two parameters we need

to provide a path to that specific file

as well as well what is the encoding so

the node knows how to decode the file

and generally you'll go with utf-8

and we'll first go with first that's my

variable we'll go with

read file sync

my method name and like i said we

provide a path we go to the content

and then inside of the content there's

going to be a first

txt and then as far as the encoding the

default one will be utf-8 but if you

want to be a bit specific just set up

the second parameter and notice these

are all your options and just go with ut

effect okay

and then once we have everything in

place of course we can copy and paste

this is going to be the value for the

second one

and we just need to change the file name

of course

so we have the second one and now in a

console log

we should see both of the text so if i

go with console.log first

and then second

i should have one long text and let's go

with node and app.js and there it is i

have hello this is a first text file and

i also have hello this is the second

text file

and once i have both of them why don't

we create a new file

and the method for that is write file

sync

and the way it works again we provide

two values two arguments one is gonna be

the file name and if the file is not

there

then of course node will create that

file and you'll see that in a second and

the second one is the value that we

would want to pass and i'm going to go

with write file sync

write file sync and like i said first is

going to be a path so you can call this

third you can call this result whatever

you would want in my case i'm going to

go with forward slash content

and then we're looking for result

and then sync and this is going to be

txt and then as far as the value if you

want you can simply pass hello world and

test it in my case i'm going to make it

a bit more interesting where we'll set

up a template string we'll say here is

the result

and why don't we use the interpolation

we'll say first and second

so we'll have first value and then the

second value and you know what when we

add here colon as well so let's say

first

and then let's place a comma

and then we're gonna go with second

again

if the file is not there

then of course

node will create one and if the file is

already there node by default

will overwrite all the values that are

in the file and i'll show you that in a

second so i'm going to go here with node

and app.js and check it out now i have

result

sync txt

and then inside there i have here is the

result hello this is first text file and

also have hello this is second text file

and just to showcase that if there are

some values they will be overwritten by

node

well if i go with simple hello world and

then i run node.js again i have my new

result now if you just want to upend to

the file

well we need to pass in one more

argument notice i have the first one i

have the value that i would like to set

up in a file and the third one is an

object basically an options object and

here the property name is flag and if

you'll set this flag equal to a

then node will append this and the

easiest way for me to show you that is

run node.js and now we should have two

results so we have here is the result

and notice how we're starting a new line

why well because by default we are

overriding everything and then when we

add that flag then of course we create a

new value so these are two very useful

methods that we can use with node to

read files as well as create ones from

the scratch

beautiful and once we have looked at the

synchronous approach like promised i

also would want to show you the

asynchronous and as always let's start

by creating a new file again in my case

that is going to be 10 hyphen and then

i'm going to go with fa

sync and js

and of course i'll grab everything in

the app.js and then just copy and paste

and then back in the app.js i would want

to change these names so i'm not looking

anymore for the read file sync i'm

actually looking for a method by the

name of read file so this is going to be

the asynchronous one and the same goes

with writefile now of course we can

remove all this code as well

and the way the synchronous method works

we need to provide a callback and if

you're familiar with callback

essentially what it means is that we run

that callback when we're done

so

when whatever functionality we're doing

is complete

then we run that callback just like we

normally would do with add event

listener on a button remember we go with

add event listener we add whatever the

event

of course with the button that would be

a click event and then pass in the

callback function and that callback

function will run every time we click on

a button so this is the same thing where

we have the read file function

and we can simply use it since of course

we have the structured then we need to

provide a path so again we go with

forward slash content and then the file

name is first txt and this is where we

provide that second argument and that is

going to be a callback mission now in

that callback function we pass into more

arguments first one is going to be error

if there is one as well as the result

and then inside of the body first i

would want to check if there is an error

and then i can just return null as well

as maybe console.log so we go with if

error and then we'll say return

null or simply return whatever you'd

want and if you want you of course can

cancel log the error as well like so and

then if everything is correct well then

of course i'll have access to my data

which of course has the name the

parameter name of result and since i

would simply want to console log the

result i'm going to go with console.log

and the result but of course keep in

mind that this is where you would set up

the functionality so let's go back and

we're going to go with node app.js

and in this case something really

interesting where we don't get the text

right so we're getting this buffer so

this is what's going to happen where if

we don't provide that utf coding then of

course we'll get the buffer now where do

we add this encoding value well right

here in between in between the content

as well as the path so let's just go

with string and we're looking for the

utf so let's say utf-8

and we'll save that one and let's run it

one more time and of course i have node

app.js and then hello this is the first

text file

and now the million dollar question

well how we can set up the same

functionality

check it out we have read file read file

and then we simply create a new file

with both of these values so if you're

familiar with callbacks

you know that of course we would need to

set up that functionality

inside of this callback where i'm

getting this result

otherwise there's going to be an error

because the only way for me to access

this result

if i'm setting this as a callback is of

course inside of this function and this

is what i was saying before where yes

eventually i'll show you a different

approach because inevitably we'll set up

a callback help and you'll see that in a

second so what i would want to do right

now when i get back

my first text file well now of course i

would want to assign it to some kind of

variable

and then i would want to read that

second file right and then eventually

once i read the second file then of

course i would want to create that new

file

and the way it's going to look like

i'm going to go with const and i'll say

first

and you can name it first text i'm just

going to know it first and this will be

equal to my result okay awesome and then

right after that result again i'm going

to go with read file

and then the same thing

we provide a path so we go with content

and then in this case of course we're

looking for second and then txt then we

need to provide the encoding so node

knows how to decode that and we go with

utf-8 and then of course we need to

provide our callback again same deal we

go with error

and result and in order to speed this up

i will copy and paste so just grab

everything starting with if and ending

with the result copy and paste again

this is the case where we're checking

for the error first if there is an error

we cancel log it and if everything is

successful we assign this one to the

second one and then eventually now i

would want to set up my right file so

again it is a function

we need to provide that value and we

already have result sync txt that's why

i'll create a new one and i'll call this

result and async so again we're looking

for the content then we go with the

filename which is going to be result and

a sync

and txt of course since there is no file

node will create that for us i'll right

away set up my data now if you want of

course you can copy and paste this

functionality this is totally up to you

where basically we use two of them and

in my case this is exactly what i'm

going to do in order to speed this up if

you want to create something from

scratch of course that is also an option

and i'm just going to copy and paste

that's my template string and again if

you want to add this flag

you can definitely do so in my case i'm

just going to omit that so here's the

result i have

first and second

and the reason why i have access to them

because of course i'm looking

in the outside scope of this callback

function and then again we have a

callback function in the right file i

know there's tons of callback functions

that's why we'll have to set up a better

setup when we're handling these

callbacks but we'll do that a little bit

later so for now let's just add a

comment here where we have first

parameter second parameter and then

third parameter and of course this is

going to be again our callback where we

have error

and result

and then inside of this callback finally

we can take a look at the value and of

course the value will be in this result

now of course we're creating the file

and all that but hopefully you get the

gist that if you'd be doing something

where you're looking for this result of

course it would be over here so again

let's check for error quickly if there

is an error then of course i would want

to return

as well as console log the error

just in case and if everything is

correct let me just console log the

result so save it here

and

two things we need to watch out for

maybe there's an error and second one we

should create a new file by the name

result and then async txt let me clear

the console and we're going to run node

app.js and i do get an error and error

simply tells me that i did not add the

dot in front of the content so i would

need to go back to write file and just

add that and once we add the dot we are

going to be in good place where i'll

clear the console and i'll run one more

time node app.js and then the result

will be undefined okay that's fine like

i said in this case we're not expecting

anything back but what's really cool

that in the result async we should have

our text here is the result hello this

is first text and then the second text

so hopefully it is clear

this is how we would use the async

pattern so let me zoom out right now

here and you'll see this

famous callback hell and in the next

video i would want to give you a

brief description of what are the

differences between the asynchronous

approach or non-blocking approach and

the blocking one the synchronous one as

well as what are the alternatives to

this callback l all right and just to

give you an early taste of the

differences between the asynchronous or

non-blocking and synchronous which is a

blocking code why don't we set up few

console logs now before we do that i

will create a new file

and i'll say 11 here and by the way i

definitely need to zoom in

just so you don't think that i'm

cheating fs

and async js

and let's go to the address we'll select

everything and copy and paste and of

course in next video we'll set up

different module in this appdress so for

time being i can just remove it

and then like i promised we'll set up

some console logs so why don't we go

back to fs and by the way during this

video i'll zoom out because i definitely

wanna go back to this

evil evil callback hell that we're

getting from nesting callback within the

callback and as far as fa sync

let me zoom in

and why don't we set up a console log in

few places

let's say before we're accessing the

file

so i'm gonna go with log and we'll say

start

then we're gonna go with write file sync

and then right after that we're gonna

say i'm done with the task and then

inside there let's write done with this

task copy and paste

and we're gonna go with starting the

next one

starting

the next one

meaning the next task

so that should do it and of course i

need to go with clear so clear my

console and i'm gonna go to node and

then the file name is 10

iphone and then fs and we're looking for

sync

i run it and notice something

interesting where i have the start

so that is going to be before i read the

files and only then once i'm done

writing that file

i have done with this task and starting

a next one

and what we need to imagine that of

course this task

of getting those files as well as the

second one of setting up that file well

it might be very time consuming right

and imagine that if we have even 10

users and they're all the time using our

application

and if for example this one user does

this one task or both of them

and they take really long time what

means that

node is not going to be able to serve

other users and trust me it is at the

end of the really really big deal and

notice how javascript is reading this

code synchronously

it just goes line by line so we start

with this task then we read these files

and then we write the result and again

if this is something that takes really

long time then pretty much your

application is down

so no other user can do anything with

that application because one of the

users is for example reading these two

files and then writing one again this is

a very simple example but you need to

picture that of course there's going to

be tasks that take longer time

and as an alternative let's take a look

at the async approach

so here again we'll set up some simple

console logs and again we'll cover this

in a bigger detail a bit later for time

being let's just set up console logs and

you'll see the biggest difference

where i'm gonna go with log

and let's say start so i'm gonna do that

before i read this file

and then i would want to go inside of

the right file

the last one and instead of console

logging result which of course is

undefined since in this case we are not

getting anything back now i want to go

with done

with this

task and then right after my first read

file i'm going to go with log

and starting

next task

hopefully you're able to follow along

again before the read file inside of the

right file and then right after the

first read file because of course the

other ones are nested inside of this

callback and then if we go to node and

if we just change it around to 11

and then fa and i believe it was async

and if we run it

notice something cool

where i have my start

and then i right away have this starting

next task

and eventually i have this done with

this task so what this means

is that since we have this asynchronous

approach the moment we start this task

we just offload

we just offload this task and we

continue with our code so that way when

user number one for example comes here

and wants to get this functionality

yeah sure here node just offload this

task and then your application can keep

on serving other users again

it seems a bit trivial at the moment

because we have a basic approach but

hopefully you get an idea where in one

case we have everything happening line

by line so only when we're done with the

task we're starting a next one

and with this approach we start a task

and we just offload that task and then

we start a next task right away and

eventually yes we have done with this

task in the console as well

now as far as the implementation as far

as the callbacks

yes this is a bit messy right notice how

we only want to accomplish few tasks and

it's already somewhat off a pain now

alternatives are using promises

as well as async await now again

hopefully you understand that when we

talk about reading the file as well as

the writing or file

i use this as an example of some kind of

task that would take a long time now for

the remainder of the course mostly it's

going to be reading from the database

writing to the database and that sort of

thing but this is a very good

illustration of how some tasks would

take some time so of course we would

need to use a callback and as far as the

callbacks yes you can use them but the

code is going to get messy somewhat

quickly that's why a bit later in the

course we'll take a look at the

alternatives which are promises

and a sync await and i have to tell you

honestly for the remainder of the course

we'll use async await because in my

opinion it is just easier to work with

excellent and up next we have http

module

but before we continue let me just

mention that i purposely won't spend too

much time on explaining every single

http method we're going to use in great

detail and here's why

you see starting from next section

all of our work meaning code in some

shape or form

will revolve around server setup

aka http module so that point of course

i will cover every last bit of syntax in

great detail

at this point though i think it's just a

waste of our time so if you're confused

about something http related

don't sweat it we will return to that

subject shortly and cover it in far

greater detail

now if you're wondering

why we bother with http module at this

point at all

since we're going to use it later anyway

you see with the help of http module

i believe i can show you some core

features of node in action

and give you somewhat of a

visual representation of them otherwise

i would have to base everything on

slides and i don't think it's the best

approach

so long story short

if you're iffy about something http

related

just please be patient and i'll answer

all your questions

in the next course section

nice i think we've got a good initial

understanding of how the

file system module works in node and

hopefully i did not lose too many of you

so hopefully there are still some

students left in the course because i

fully understand that seeing this for

the first time

is probably a bit overwhelming

and what i would want to do next is

cover the last initial module the

built-in module and that is going to be

the http module which is going to allow

us to

set up a web server now please keep in

mind one thing we'll just cover the

basics because the large part of this

course is going to be creating your own

server and setting up the api now

granted we will use an abstraction on

top of the http module and that is going

to be the package by the name of express

but the whole point is going to be

exactly the same that's why again we're

not going to cover everything

in greatest detail at the moment because

i don't see the point of repeating

myself

and now i want to go back to objects

i'll zoom back in

just so you can see better what is

happening by the way let me check my

zoom level so i'm going with settings

and i think that should do it my zoom

level is two at the moment and then back

in the app.js

let's grab the http module and we'll

assign it to some kind of variable as

always

let's go with require and we're looking

for http that's the module name and the

method we would want to use is create

server again we'll assign this to some

kind of variable and in this case the

variable name will be server then we go

with http

create server and this create server

method is looking for the callback and

in that callback function

we have two parameters and both of those

parameters are objects and since they're

parameters you can call it whatever you

would want but a common practice is

calling them rec and res now this first

parameter represents the incoming

request so imagine a client is

requesting from the web browser your

webpage so you'll have information about

the method and all kinds of useful stuff

in that request object and the response

is what we're sending back

now we're not done of course we'll set

up more code here but before we do

anything we also would need to

specifically say what port our server is

going to be listening to and that's why

we'll go with server

and listen so that's another method and

again this is arbitrary but i'm gonna go

with 5000. again

if this looks like a lot of gibberish

where we have the request response as

well as the ports don't worry

later in the course i'll cover that in

more detail as well as show you some

useful slides and all that good stuff

and as far as the response well

we have few methods we have write so we

go with arrest and again this is the

object and notice here how i'm not using

the rack yet so i'm not checking for

anything i'm just concerned about my

response and the method name is right

and inside the right we just come up

with some kind of text and i'll say

welcome

to

our homepage

homepage and once we have sent back the

response i also would wanna end my

request so i'm gonna go with res.end

and once we're done setting up the code

inside of the callback function now of

course i would want to open up my

terminal

clear everything and we would need to

spin the sucker up and of course the way

we do that is node and then objects

since that is the file name make sure

that you save it though so before i run

i'll save it and then notice something

interesting notice how we're not exiting

so previously every time we ran the file

every time we ran node and then whatever

the file name we exited from the file

right so node was done executing the

code and we just moved on now in this

case since we have a web server what do

web servers do

they keep on listening for requests and

actually you want your server to always

be up and of course if i go to my web

browser

and then

i'll make this bigger

and if we go with localhost

and of course in this case we have 5000

there it is we have welcome to our

homepage so now of course we have

effectively created our first website

now granted it's very basic but at least

we have something on screen

and before we discuss the external

modules

and actually set up a module that nicely

watches our code and does the restarts

for us

i also want to showcase what we have in

the request object now this is going to

be a giant object

so i'm not going to cover

each and every property however i would

want to showcase a property that gets us

the url and what would be the url well

that would be an address and if you're

worked with reactor or dom you know that

for example for the homepage we used

forward slash and then if the client

wants to go to for example about page he

or she would enter forward slash and

then the about now in our case notice

how we're still serving the same content

so just to give you a quick introduction

of the request object as well as set up

a bit more realistic application we're

going to go with the request now again

if you want you can log it so we're

going to go here with request and you'll

see that it is a giant object now since

we made some changes we do need to stop

it and then we'll go with node object

but notice how we're not right away

console logging the request object why

well because server

is waiting for those requests so we need

to go back to our browser and then

refresh and then of course once we

navigate back like i said this is going

to be a

giant object which bunch of useful info

now what we're looking for

is the url property because that url

property is going to tell us well what

address client is requesting so what

endpoint the client is requesting and

like i said for the home page the common

practice is using simple forward slash

so in here we can set up the if

statement where i say if request url is

equal to the home page then of course

this is what i would like to send back

and just to speed this up i can tell you

that we can cheat a little bit where we

can just place everything in the end

and in my case i'll just cut out my

string so we have res dot end so now we

simply send the text

and now of course i also would want to

check for the about or contact or

whatever so in here let's go with if

and then request

and url and if that one is equal to

about

about then of course i can send

different text and as far as the text

i'm just going to say here is

our short

history and then lastly well what

happens if the user is trying to access

a resource that doesn't exist

on our server

so we'll have the about page we'll have

the home page what about if the user is

asking for a contact page that we don't

have well here we'll simply set up a

default response we'll say res that end

and just to make it interesting i'll set

up the template string and i'll show you

that if we really want to we can also

pass indirectly html and i'll say oops

an explanation point i'll close my html

again please understand this is just a

basic scenario of course that's not how

we'll be setting up our apis or nothing

like that but just to give you a quick

intro

we'll do it quick and dirty where

there's going to be a paragraph and

we'll say we can't

seem to find the page

that you're looking for page

you are looking for

looking for and at the very end i would

want to set up a link

that allows the user to navigate back so

go with href and i'll say forward slash

which just means home page and we're

gonna go back home

let's close our link let's save that one

so at the moment of course we have the

about and by the way

almost forgot

yes we do need to stop the server and we

need to go with node and then app.js

refresh one more time there it is notice

how we don't have the about we can't

seem to have the page you're looking for

and that is actually a bit interesting

because it should be available right and

of course the reason is because i messed

up on the url property my bad let me do

this one more time

and we'll stop the server here

again let's run node app.js and now we

should have here's our short history

that's our about page then we have the

homepage and of course you already

familiar with our error page so if i'll

go with error or any kind of resource

that doesn't exist

then of course we'll get the error page

and of course we can bravely navigate

back home and we go back to our home

page that should do it for the quick

intro of base modules

and now of course we are ready to move

on to our next topic all right at this

point we're familiar with two types of

modules

our own

as well as the nodes built-in ones

but

just like in any good infomercial

i'll say but wait there's more

we also have access to the world's

biggest code store

and before you seriously start

questioning my mental state

imagine this scenario

you're building an app

and of course as any good app it needs

to have a slider

just for funsies

now at this point you generally have two

options

build it from the scratch yourself

or search on google and copy paste

someone else's solution

well have no issues with either of these

options keep in mind that someone

somewhere

has struggled with the same issue the

need for the slider

and there's a good chance that that

person

was kind enough to build it

and share

the whole project with us

so our only job

is to go through the docs

and with the help of one command

just add it to our project

we can do that because when we install

node

we automatically also install npm

or node package manager

and npm enables us to do three things

reuse our own code

in other projects

use code written by other developers

and lastly share our own solutions

with other developers as well

the npm project is hosted at

npmjs.com again the site is

npm.js

and here you can find everything

starting with useful utility functions

to full-blown frameworks and libraries

and as an example if you're familiar

with react you know that react has the

create react app package

and of course it is hosted on the npm

a typical node project

will have more than few npm packages

installed as dependencies

and before we install some cool packages

let's talk about naming

npm calls the reusable code a package

and a package essentially is a folder

that contains a javascript code

now another names you'll hear

are modules

and dependencies and honestly at this

point

all three are used interchangeably when

talking about shareable javascript code

so don't be surprised if during the

course i call them any of these names

package dependency or module at the end

of the day they all mean the same thing

lastly let me just mention two things

first

there is no quality control in npm

registry

anyone can publish anything

so it's up to you to sniff out the empty

and useless packages and yes there are

quite a few of those ones out there as

well a good indication of the security

and usefulness of package is the amount

of weekly download if the number is high

meaning if it's popular it's a good

chance that it's a battle tested and

ready to go

and that brings me to my second point

remember the slider example we discussed

in the beginning of the video

when it comes to npm packages there's a

good chance that if there is a bug

someone else has already fixed it

and as a result it's already fixed in

the package

or

there's a working solution

all right

so that you did for intro let's start

using node package manager

in our own project and as a side note if

you want to search for some packages

just visit

npmjs.com

and then for example if you're looking

for the bootstrap you'll find the

package

and of course you can click on any of

them

this will bring you to the docs as well

as weekly downloads and rest of the

stuff once we're familiar with node

package manager let's see how we can

start using it in our own project

and the good news is that it's much

simpler than you would expect you see

when we install node we also install npm

and because of that we have access to

npm global command

and you can check the npm version by

running npm

version in your terminal just keep in

mind that the version most likely won't

be the same as your node version and

that is totally okay so you can either

do that in the terminal

or of course in the integrated terminal

and you can simply type npm and then

hyphen hyphen version i believe you can

also check by hyphen hyphen v and there

it is of course now we have the version

for our node package manager and then we

have two flavors we can install package

as a local dependency and that just

means that we'll only use that package

in this particular project that we're

working on and the command for that one

would be npm

install or i for short and then whatever

is the package name so whether that is

bootstrap low dash express or whatever

or we can install dependency as a global

dependency and that just means that we

can use it in any project and the

command for that one would be again npm

i or install whichever method you prefer

and then hyphen g so this is going to be

the flag and then again the package name

now when you install something globally

most likely on a mac they will ask you

for the sudo so you'll have to provide

the credentials that's why you'll run

sudo

npm

install and then hyphen g and again

package name

as far as which one you'll use more

often that definitely will be a local

dependency flavor

because even though yes you can install

packages globally with arrival of npx

there's actually less and less need for

setting up something globally that's why

we'll focus on local dependencies first

how to set it up in our project and then

in a few videos when we talk about npx

i'll cover why there's less need for

setting up something globally now

there's one more thing that we would

need to set up in our project as far as

dependencies so i know i know you're

eager to start installing the packages

but

let's just wait a little bit and next

video we'll add that extra thing that

we're missing right now and then we'll

be in good shape and then we'll start

installing every package under the sun

excellent we now know that we have

access to the npm global command we now

know that in order to install the local

package we will need to run npm i

and the package name so what are we

missing well we're missing file by the

name of package.json

and essentially you can think of it as a

manifest file that stores important

information about our project

and there are three ways how you can

create package.json first is the manual

approach where you just create a

package.json in the root and please do

that in the root if that's something

that eventually you decide doing

and then of course you would need to

create each property or

there are two

ways how we can automate this and the

first one is running npm init

and in there they'll just step by step

ask you the questions and if you want to

skip it you can just press enter

and the another way the third way is

running npm init with a y flag and then

everything is set up as default so i'm

not going to show you the manual

approach it's just too time consuming

and we'll right away go with npm in it

first i'll show you the step by step

approach and then of course i'll show

you how everything is set up by default

using the y flag so go to your terminal

and just type npm in it and there it is

of course now they tell you that there's

going to be a walkthrough of creating a

package.json file and the first one is

the package name and by default of

course it is going to use the folder

name now keep in mind that if you

eventually want to publish this package

then the name has to be unique so you

need to make sure that

nowhere in the npm

you can see the package with the same

name and i'm just gonna go with tutorial

as far as version we'll talk about

versions shortly so i'll just skip this

one as far as description whatever again

is just the default now as far as the

entry point eventually will change it

but for now it's good enough we're going

to go with one intro js and then the

test command as well as git repository

and keywords and author and license and

we simply say yes and we are in good

shape so now of course we have the

package json file with name version

description as well as the main property

and of course the scripts author and the

license now i'll remove it

i'll say delete and i'll show you that

of course you can skip all those

questions by simply typing npm

in it and why

and as you can guess

yes of course you can come here later

and then just change these values that's

why it's definitely faster to just type

npm

in it and then the y flag

so why do we need this package.json well

because if i would want to install the

package the local package

now of course this package is going to

be stored as a dependency and to show

you that let's just go with npm and you

know what

let me clear the console first so we're

going to go with npm

i

and then we're going to go with the

package name lowdash and if you're not

familiar with lodash it's just a utility

library and i'm just specifically using

for installation purposes there's no

real reason to have low dash for our own

project but it's just something pretty

interesting that i would want to

showcase that's why we're using lodash

and we run it and notice how we

installed the package and check it out

now in the package.json we have

dependencies property and it's an object

and inside of that object we have a

package by the name of lowdash now i'll

show you

in this video or maybe in the next one

why it's so important to have this

package.json

but another thing that i would want to

showcase once we can see that we have

dependencies property if you go in your

visual studio code

and if you click on refresh explorer

what you'll also notice

is this node modules folder and in that

node modules folder this is where all

the dependencies

are stored

so if you don't have that folder already

and pm creates it so in our case of

course we didn't have any dependencies

so when we install that first dependency

npm creates that folder and this is

where you'll find the dependencies now

notice something interesting where for

the low dash

we only have one folder right so we have

only one dependency

but when we need to keep in mind that of

course there's going to be some packages

that have other dependencies

and that's why i first installed lodash

just to showcase that yes once you

install dependency of course it is going

to be in node modules but if you'll try

to install a package that is bigger that

uses other dependencies you'll notice

something pretty cool where if i clear

my terminal and if i'm gonna run npm i

and then bootstrap again you can use any

other package you'd want this is just to

showcase how the packages work we won't

use the bootstrap in this project so

once i install and once i refresh

check it out not only i have low dash

not only i have bootstrap which i

installed but since bootstrap is using

jquery as well as the proper js now

these are installed as dependencies and

if you take a look at the dependencies

property now of course we have the

bootstrap as well and again

the whole point of this video is to

showcase why we need package.json

so we need it because we need to provide

information about our project and inside

there

a very important property is the

dependencies one because in there we'll

just store the dependencies which our

project is using and then some packages

are actually going to use

more dependencies and they will be

automatically installed as well in our

case that was bootstrap and

just to give you a taste of the package

why don't we just navigate to app

and i'm going to do that below the

comments of course you probably would

need to clean the file and as a side

note the last module the http i saved in

file by the name of 12 http

and back in the app.js in order to start

using

the module

in our case i guess i'm gonna go with

low dash

first i would need to set up the

variable and common convention is

calling the variable like so and we'll

set it equal to require and now of

course we have access to the low dash

now this is the difference between

node packages

like for example the http

or the file module or whatever and the

ones that you install the external ones

the external ones you always have to

install first

if you won't install the dependency well

node won't be able to find it so in our

case we did install the dependency the

lowdash so now of course i can just

assign it to the variable and since

lowdash is utility library why don't we

test out one of their methods and i'm

just going to go with items and i'll

create an array of arrays so items is

going to be an array however

the items are going to be arrays itself

so two and three

and then we're gonna go with four

and low dash has this method the flat

and deep method that effectively will

just spit this back as a flat array

and the way we set it up we just go with

const and i'll call this

new items and then since we have access

to everything

in this variable now i can simply go

with underscore here dot and then flat

and deep so flatten deep and then we'll

pass in the items and now if we console

log

new items and if i go to my terminal and

just type node app.js and by the way i

need to save it

so let me go back i'll say node app.js

and once we run check it out in a

console i can see of course the one two

three four so lowdash has the method by

the name of flattendeep we have access

to it because we install it as

dependency and now of course i can start

using it now we're not gonna use

bootstrap in this project because that

would be too time-consuming bootstrap

was just used so you can see that some

dependencies will have

more packages so once we install one

dependency there's actually going to be

more dependencies and hopefully you have

a clear understanding of how you would

set up package.json how we would install

the package and next video i would want

to showcase why having package.json

is so crucial and so beneficial

when we are starting to share our

project with other developers

awesome we have package.json we

installed few dependencies

and now i want to cover

why having package.json is so crucial

when we start sharing our project with

other developers and for this example

i'm going to use github as well as few

basic git commands and my assumption is

that since this is somewhat of a

advanced course you're already familiar

with git and github and you have the

account if you don't please stop the

video create the account

and just use your favorite search engine

to learn about the basics of setting up

the github repository as well as basic

git commands so

our task is to push this up to the up

and now million dollar question are we

just pushing

everything up including the mode modules

which

for the most projects is going to be

somewhat big

i believe i just checked in our case it

was like nine megabytes but trust me it

always gets way bigger than that

or

we would just want to send the code and

you can probably already guess that

since i'm implying that the size is too

big that we'll have to push this up to

the github without the node modules and

we'll start by creating a dummy repo on

a github

so let me open up a new window

i'm going to go with github

and i'll just create a temp repo

and then i'm just going to create a repo

and i'm looking for these three commands

essentially i would want to get that url

the remote url so i know where to push

it and then inside of the repo before we

set it up as github repo first i would

want to go with new file and we'll

create a git ignored because of course

what i would want is to place

the node modules

in a git ignore file because that way

they will be ignored by my source

control and i won't be pushing up this

giant folder to the github because

you'll see in a second that there is no

need for it so we're going to go with

forward slash and then node modules and

if you're not familiar with git ignored

it's just a file

that specifies which files are going to

be ignored by the source control and in

our case as you can see i'm placing node

modules inside there then i'll clear my

console and i'll just initialize this as

an empty git repo and then we'll add

everything so git add git commit

we'll just say first commit

first commit and then i'll copy and

paste those three commands in order to

set up that url

the remote url and once i have this in

place

should be able to go back to my github

and there it is this is my repo

now probably your next question is okay

so we pushed it up to the github

but i can clearly see that in my app.js

well technically i'm using the load as

dependency right

but we didn't push up the node modules

folder so how the person who is going to

get this repo will be able to run the

code in the app.js

since there's no node modules and you

told us previously that we can only run

it if the dependency is there well let's

check it out i'm going to go with clone

option so i'll just get the

url i'll navigate back here

and i'll do that in messed up again it

doesn't really matter

we're just going to go with desktop and

then git clone

now i copy and paste the url i'll open

up a

new instance of my text error copy and

paste and this is where the magic

happens

if we have package json we simply need

to run

npm

install

and what is going to happen

the npm

will check

for dependencies that we have in the

package.json and automatically set up

that node modules folder so if i go here

first of all i can see that there has

been some changes that is already good

news that just means that

i have my node modules and if i refresh

check it out so now of course i have my

node modules folder and if you have been

using react applications you're probably

already familiar with this one where

again

when you are setting up the code

you're not sharing the node modules

folder and i can showcase that by taking

a look at my react projects and that's

not what i wanted i didn't want to look

at my awesome picture what i wanted is

react

and then let's go with project

and you'll see that in that repo

we have bunch and bunch of folders and

each folder has two more folders final

and setup and now check it out

none of them have the node models

because imagine the size

of this sucker if i would push

for every project for every folder the

node modules instead i have package json

so when you get the repo when you clone

the repo or download or whatever

then of course you get the package json

and in here

these are the dependencies and you just

run npm install and they are being

installed okay hopefully it is clear

that why it is so crucial to have the

package.json because we can just share

the code without dragging the massive

node modules folder with us

we can simply just provide what packages

our project is using

and then once we get the repo then we

just run npm install that is the command

and then npm will install all the

packages that are in the dependencies

awesome we're familiar with

npm we're familiar with package.json

now let's finally install the dependency

that we'll use for the remainder of the

course and that is no other than the

node one and of course if you want to

get more info you can visit the npm and

you can search for the package but as

far as the general setup

is just to watch our files

and then restart our app for us so that

way we don't have to each and every time

type node and then whatever the file

name

and we can install it as a simple

dependency that is definitely an option

but since i also would want to cover

depth dependencies we'll install that as

a depth dependency and the command for

dev dependencies is following where we

go with npm and then i or install

whatever and then we go with nodemon so

that is the package name and then you

can either do hyphen d

so that just signals that that is a that

dependency or you'll see this save and

dev so again whichever method you choose

that is really up to you but just

remember that both of them will save it

as a dev dependency so let's install it

and then i'll talk about it why we would

want to set up as a div dependency and

the reason for that is because if we

think about it do we really need nodemon

in production

and the answer is no when we push it up

to digitalocean or heroku or whatever

we'll of course use something more

serious than nodemon to restart our

application

pm2 comes to mind but while we're

developing yeah that is an option

so in this case we'll add right away

nodemon to the dev dependencies now what

else what kind of packages we would add

to dev dependencies

for example testing packages for example

linting for example formatting and that

sort of thing again nothing stops you

from jamming this in dependencies

but

if you think about it it makes way more

sense if we add this as dev dependency

so we use it while we are creating the

app but then once it's in production

then we just share the dependencies that

actually the app is using

not the ones that we used while we

developed the app hopefully that is

clear

and once we have the package we're

almost there now we just need to

understand how the scripts

work in a package.json and at the moment

as you can see we have the test one we

won't use that one and inside of the

script object we just set up the

commands and as a side note

we can set up the command right now even

without the node mod for example i could

go with start and that command will be

equal to npm

and or i'm sorry node and then for

example app.js so that is my command and

once i save my package.json instead of

running this node app.js i can simply

run npm and start and there it is as you

can see

same functionality i run app.js and i

get back the array as well as the hello

world again we still exit the

application so it's not like we're out

of the woods but i'm just showcasing

that yes we can set up the commands and

then in the command we just provide a

value and in this case of course it is

node and app.js

now for some commands you can simply

type npm start as you can see but for

some of them you'll have to provide the

full value and that is going to be npm

run and nor to showcase that i'm going

to go with dev and that one will be

equal and here we're gonna go with a

node

mod and then app.js so instead of

running node

like we're doing in the start now i'm

setting up a dev command and in order to

run this one i'll have to go with

run and then whatever here's the command

name again some of them you'll be able

to use the shortcut where you go with

start and some of them you'll have to go

the full route with npm run and then

whatever is the command and as a side

note yes you can still run npm run start

and this is also going to invoke the

command but

in our case we have dev and in here i

have

nodemon

and then app js

so let's try it out let's say first the

package json and you should notice

something pretty cool where if i go with

npm

run and dev

now i'm spinning up the node one

and it tells me that nodemon is watching

my application

and since i know that of course we can

test it out where i'm gonna go with

console.log

and then instead of the hello world

which i have after new items i'm gonna

go with hello people and you should see

something interesting where once i

change the text yep nodemon restarts

my app and now of course my value is

hello people awesome so now i don't have

to type every time the node and then

whatever file name nodemon automatically

just restarts my app and i simply set it

up as a script now if you want to change

this around if you don't want to run npm

around dev you can simply say nodemon

and then app.js and just remove the dev1

completely and a side note again if you

have worked with react project you are

familiar with the setup because for

react again we run npm start and then

there's a value that spins up the whole

react dev server where we can see our

application not bad not bad well we're

still on a roll let's cover how we can

uninstall the package as well and as a

side note if you want to stop the

nodemon just press again ctrl and c

and notice how we're of course stopping

the nodemon and again if we want to spin

up we'll just go with npm start and as

far as

uninstalling the package we have the

command for that and the name is

uninstall so i'll stop the nodemon and

in the terminal i'll type npm

uninstall and then of course the package

name which in my case is going to be a

bootstrap now this is one of the

approaches how we can do that and

there's also a nuclear approach now why

i'm calling this a nuclear approach

because that way we remove the whole

node modules folder and don't worry

once you run the npm install then of

course you set everything back up from

the scratch as well as you would remove

this package like json and don't worry i

will cover the package.json file a bit

later

and the way that is going to look like

well we can first clear the terminal

i'll install the bootstrap from the

scratch again so say bootstrap here and

by the way

probably need to add npm i

and now again as you can see i have it

as my dependency and then like i said

the nuclear approach is removing the

node modules yep

and then removing the package log

and then just running npm install now of

course in the package.json if i want to

remove the bootstrap for example in this

case i can simply remove it from my

dependencies so i just remove it in the

package.json then clear everything

and then we go with npm and then install

and now we'll get from the scratch the

node modules

since we're the ones who removed it

and also we'll get that package hyphen

lock json now i'm showing you that

nuclear approach because if you have

used gatsby you know that cats be

somewhat notorious for sometimes just

being a little bit annoying where you do

need to remove the cache folder you do

need to remove the node modules as well

as package lock and then once you start

up everything from scratch

then

as a magic the gatsby app starts working

and check it out if we take a look at

the node modules now yes there's a bunch

of modules that nodemon is using right

but there's no bootstrap and i can

clearly see that because there's nothing

under the letter of b so we can clearly

see that we removed bootstrap from our

dependencies

all right and now let's take a look at

how we can install package globally and

what would be some of the use cases and

first let's start with command let's jog

our memory command was npm install and

then dash g

and the package name and in mac they

might ask you for permissions so you'll

have to start with sudo and then again

same spiel npm install blah blah blah

and first i want to showcase that i

haven't installed

nodemon globally

and the easiest way for me to showcase

that is by running nodemon and app js so

we'll try to install

nodeman package globally why well

because then i can use nodemon in any of

my projects at the moment i have it as a

local package and of course i can spin

it up by running npm start but let's

imagine scenario where i have i don't

know 20 nodal applications and i'm

constantly working on node applications

so to make my life easier i will install

node 1 globally and then i won't get

this error because at the moment you can

see command not found normal all right

so how do we do that well we can install

it

in our terminal or we can do it in the

integrated thermal it doesn't really

matter when it comes to global packages

you can install it from anywhere so in

my case i'm just going to navigate back

to my terminal just so you don't think

that i'm cheating

and i'll zoom in and we'll simply run

and by the way i need to start with sudo

and then npm install

and hyphen g and of course we're looking

for nodemon so now of course

i'm prompted

to enter my password and once i enter my

password

of course i'm going to install nodemon

globally and now

in any of my projects i can simply go

with command of nodemon and then

whatever

is the file name now

to show you some of the use cases if you

work with gatsby you know that they have

the global gatsby cli tool and that was

one of the reasons why you installed

something globally is because well you

used one of the frameworks for example

react or gatsby in this case and then of

course in order to set up the gatsby

project or

react project you needed to install this

globally now things have changed though

with arrival of npx and i'll talk about

the npx at the end of the video but

notice if you navigate to your react

docs and if you look for create react

app which again

was something that you needed to install

globally

now they suggest this npx route where

essentially you go with npx and then

again whatever is the command name for

example for create react app that would

be create react app for strappy the

headless cms that would be create

strappy app and hopefully you get the

gist where for every resource that of

course would be different and with that

command you don't have to install that

tool globally

for example again in our case we're

installing nodemon but normally prior to

npx you would install this create react

app globally and then you can spin up

those react projects now i'm going to go

back to my terminal as you can see i was

successful so what's going to happen if

i go back to my project and if i run

nodemon and app.js since i have

installed that package globally

there it is i spin up my app.js and if

you don't believe me i can change it

back to hello world and i have no issues

hello world and there it is now of

course i have hello world e in the

console so hopefully it is clear that

yes we can install packages globally and

yes one of the biggest use cases was

working with some type of front-end

library

but with an arrival of npx

things have shifted where now those

libraries suggest using the npx route

instead as far as my personal preference

since i'm recording a lot of courses and

since some of the global packages

usually introduce some kind of bugs

to the students now not for all the

students but there's always this one

student who just has a lot of issues

with the global package

personally i avoid them as much as

possible so i always either use the mpx

or i just set it up as a local

dependency again it's not a rule you can

do whatever you would want but i'm just

telling you what is my preferred option

as far as what is npx it stands for

execute and official name is the package

runner it is a feature that was

introduced in npm

5.2

and again the main idea is following

where you can run that cli tool for

example in this case create react app

without installing these globally so as

long as you have npm with a version of

5.2 or greater instead of doing this

whole spiel of setting up the cli tool

globally you just go with npx and then

whatever here is the tool name and of

course the last one is the folder name

as far as the package log json

why do we need it well if we take a look

at our dependencies we can see that they

have versions

and if you remember

some of the dependencies have

dependencies on their own and of course

we need to keep in mind that those

dependencies have versions as well

and for example the person who gets your

project you probably want them to have

the same exact setup because keep in

mind

as these versions change

well so does some of the functionality

correct so for example you set up to

your whole project you use some kind of

dependency that uses some other package

and that version changes not for example

for the bootstrap but for the jquery and

then pretty much your project

is obsolete meaning

it might get some bugs because the

version of the jquery changed so that's

why you have this package.json

and in there you have those specific

versions for all the packages

not only for dependencies but also for

the packages

that the dependency is using now as far

as this version we have three values and

you can think of it as a contract

between us

the people who are using the package and

the person who is creating and first

number is a major change so when this

changes that means that there are some

breaking changes now the second one is a

minor one so that means that it is

backward compatible so for example if

this changes to 18

i shouldn't expect any breaking changes

and the last one is just a patch for the

bug fix so that's also something to keep

in mind when you decide to publish your

own package that of course that's why we

have here this version now lastly i

would just want to mention that if

you're interested in more info about the

package.json i would suggest this

resource

so i simply went with package.json then

keep on scrolling keep on scrolling and

you're looking for i guess this blog

post right so the name is the basics of

package.json and in here you literally

find everything explained to the

smallest detail whether that is a name

version and rest of the fields that you

can find in a package.json beautiful we

now know how to utilize npm and for

starters as a result for the remainder

of the course instead of frantically

typing

node.js in a terminal we'll simply spin

up nodemon and it will watch for the

changes and restart the app for us

now what before we move on to creating

servers with express.js there are a few

important node topics i would like to

cover first and those topics are

following event loop async patterns in

node.js events emitter and streams in

node.js while these topics are extremely

important please keep in mind that our

goal is to only understand the general

ideas behind these concepts

and i only introduce them so you have an

overall understanding of how things work

in node.js before we build our first

node.js app

if you're not satisfied with my

explanations or simply want to do more

research by yourself just type any of

these terms in your favorite search

engine and i can guarantee you'll find

plenty of useful resources within a

matter of seconds

like blog posts youtube videos and

conference talks with that said it's my

strong opinion that it might be easier

to understand those concepts more deeply

so not just a general understanding but

understanding them more deeply once you

have one or few working node apps under

your developer's belt let me also

mention that in order not to waste your

time with time consuming setup

in few upcoming videos i will run some

pre-built code

let me be very clear though i'm only

going to do that in a few videos

and for the remainder of the course we

will type out everything together

all right

and let's kick things off by discussing

the event loop

now event loop in node.js is one of

those topics where i could spend the

entire course discussing it and it still

wouldn't be enough so let's try to avoid

that and instead just understand the

journal concepts

while there are tons of useful event

loop explanations out there the one that

i probably like the most

is this one

the event loop is what allows node.js

to perform non-blocking i o so input and

output operations despite the fact that

javascript is single threaded by

offloading operations to the system

kernel whenever possible

and as you can see i'm reading straight

from the node docs

now don't beat yourself up if this

sounds like a lot of gibberish there's a

reason why one can dedicate the entire

course just for event loop it is a

pretty complex topic but

one word i do want you to remember

is this offloading and you'll see why in

a second also don't worry i have

prepared more examples as well as some

slides to get my point across but just

in case you're not happy with my

examples

or you just want to explore the note

event loop in greater detail here are a

few external resources i find

particularly useful

when it comes to blog posts

just go to your favorite search engine

and type node.js

event loop

and the one that i find really useful is

this one

and the resource is nodejs and not.org

but it is dot dev

and then follow the link and here they

cover event loop

in great detail with a lot of cool

examples and pictures and slides and all

that good stuff and when it comes to

videos i would suggest going to youtube

and then just type event loop and the

first video that's going to pop up is

going to be the event loop bot in

browser javascript

and i'll talk about it in a second

and the nodejs specific event loop video

is this one i believe it's 15 minutes

long and you can see the name over here

so this is a very very useful video

where the speaker covers a lot of useful

details about node.js loop in great

detail and the reason why i'm suggesting

the first one as well

well

what is the language that we use

in node

that of course is javascript right and

even though there's some differences

between the event loop

the one that we use in the browser and

the one that is in the node.js

if you understand the concepts behind

the event loop that we use in a browser

trust me you're already halfway there to

understanding how the no js event loop

works since it's such an important topic

like promised i have prepared some of my

own resources as well we'll start with

the slides and move on to the closed

examples in next video

as a side note i made all the course

slides available on course api.com again

their website name is coors

api.com and once you click on the slides

link

you'll see all the slides

and i would want to start our discussion

by taking a look at what it means that

javascript is synchronous and single

threaded and effectively it's just a

fancy way of saying that just repeat

everything line by line

so for example if i have console log

with first task

then i have a for loop that takes some

time in this case two seconds but that

could be 10 seconds that could be 20 or

whatever and then i have another console

log of next task

javascript will just start reading

everything and it will read it line by

line and if this takes a long time it

will only run the next test once it's

done performing this time consuming one

so hopefully that is clear that

javascript just reads everything line by

line

and now let's take a look at our second

slide and in here we can see the

solution

if we would want to offload something to

the browser so when we're building

browser javascript apps we have this

option

of offloading to the browser now of

course it doesn't mean that we can

offload the for loop that's not going to

work this effectively is still going to

be the blocking code but browser nicely

provides the api

where we can offload those tasks to the

browser and only when the task is done

then we execute the callback and

probably the example we have done the

most is the fetch essentially when we

make the network request but we can also

do that for example with a set timeout

so i still have console.log with first

task but then even though my set timeout

function

has the second argument of zero so

essentially i have set timeout function

i provide the callback function that's

going to be executed in certain amount

of time

even if this is zero meaning you would

expect this one to run right away it

only runs after the next task so once

javascript is done executing the

immediate code

only then it executes the callback so in

this case we have the set timeout the

api that is provided from the browser

and we just said that we would want to

execute that e in zero seconds so

effectively there is no wait time

however javascript will first execute

this code and only then will execute the

callback so that way we can offload

those time consuming operations to the

browser again it doesn't mean that we

can offload for loops it means that

browser does provide some apis

where we don't have to write the

blocking code now let me be very clear

though when i say we cannot offload for

loops

what i mean is that we can still

write blocking code in javascript

but the browser does provide some nice

apis where we can offload those time

consuming tasks

and that brings us to our

main friend the nodejs event loop again

before i go over the example let me

stress something event loop is somewhat

complex and this is just to give you a

general understanding

so let's imagine this scenario i have an

app and just like any cool app

i have subscribers or users or however

you would want to call them and in this

case since my app is so so popular i

have eight of them

and what do the users do well they're

probably being annoying and they're

requesting something from the

application and as the requests are

coming in

the event loop is responsible for

avoiding this type of scenario

so let's imagine this i have all these

users the requests are coming in

but larry the little

decides that

in his request there's going to be

some kind of time consuming i don't know

database crawl or something like that so

effectively he's requesting something

and behind the scenes in my code that

means that i need to perform something

that takes a long time

so

in this case

the event loop just registers the

callback so it registers what needs to

be done when the task is complete

because if the event loop wouldn't do

that then we would have this scenario

where the requests are coming in

and because larry is requesting

something that takes a long time the

rest of the users would have to wait and

essentially it's not that the actual

operation takes a long time it's just

the fact that we're wasting our time

on waiting for that operation to be done

and only then we can serve the other

users but what the event loop does it

registers the callback and only when the

operation is complete it executes it now

keep in mind that again we're not

executing this right away

when we can effectively it's the same

scenario where we run our immediate code

first

and only then when we have the time we

execute the callback so for example in

this scenario if i would have hundred

console logs

after the next task

i would run them first and only then the

second task would appear here regardless

of what is the time set in here because

again we're running our immediate tasks

first and only then we run the callbacks

so the same thing happens here

where the requests are coming in let's

say that the operation is complete we

first registered the callback operation

is complete and instead of executing

that callback right away

it effectively gets put at the end of

the line and then when there is no

immediate code to run then we execute

the callback hopefully that is clear

event loop is our best friend because

with the help of event loop we can

offload some time consuming operations

and effectively just keep all our users

happy all right and once we have looked

at the event loop in theory

to hammer this home let's also take a

look at some code examples where we can

see event loop in action

as a side note all code examples are

located in the event loop example

directory so if you need to take a look

just grab the repo and you can find it

there and you should be familiar with

our first example

since it's a async version of read file

method

so we import read file from the

fs module and then we have console.log

started our task first

then we have

read file method where we pass the path

we pass the encoding and then of course

we have the callback

and then in the callback i cancel logged

first result and then of course i have

completed the first task

and then right after the read file

i have starting next task

and something really interesting in a

console i can see that

we first cancel logged started the first

task

then i right away have

starting the next task and then of

course once i'm done once i get back my

result then of course i have hello this

is first text file and of course

completed first task and again the

reason why is this happening because

read file

is a synchronous

and we already know that

event loop will offload this in this

case to a file system

so we start reading the file

notice like okay run this line of code

then offload this one and only when i

get back to the result

then

run the callback so

when the file system responds with error

or the data

then we invoke this one all right so we

offload this task and we just keep on

reading the code that's why we have

started the first task starting the next

one so right away go to the next test

and this one this asynchronous one well

we're just offloading

and then once the response comes back

whether it's an error whether it's a

success only then we invoke the callback

hopefully that is clear now as far as

this comment

i only added this one because we need to

keep in mind that of course i'm just

grabbing this code from the file

but the file is sitting in the folder

so if you were to run

nodemon and then directly the filename

which is of course going to be in the

event loop the path won't match so this

path only matches because of course i

have app.js but if you'll try to run

this code directly in this file that's

why it's not going to match and you need

to go one level up now my assumption is

that you're running it the same as me

and you're running that with npm start

that's why i kept the path

matching to the one in the app.js now

our next example so let me clear my

app.js i can close the read file as well

as package.json and then the next one is

set timeout so select here everything

and copy and paste in my fgs i'll

restart and then i have two console logs

and the third one is e in a set timeout

and this is pretty typical example for

javascript loop as well if you have

taken javascript courses which again i

assume you have since you're watching

the note one you probably remember this

example where i got you here is

following yeah i have the

console log

first and i have the second and third

and you think that since set timeout is

set to zero

so since we're saying yeah call this

callback function but actually wait only

zero seconds you'd think

that the order would be first second and

third right well wrong because we have

first third and second

why well because set timeout is

asynchronous correct and what happens

with asynchronous well they get

offloaded so in this case we run first

third

and then the second

because this one gets offloaded again

this one goes to the back of the line

and only when we're done

with our immediate code pretty much with

our synchronous code only then we invoke

that callback all right now i also added

these comments here where i have started

operating system process and then

completed and exited the operating

system process and the reason why i'm

showing you that because in next two

examples we'll do something a little bit

different so now i would want to go to

set interval

and by the way it's going to be a bit

clearer if we run here node and then

app.js so let me stop this and i'll go

with node and objects and you'll notice

that we started the operating system

process and then the moment we're done

with the code that's it we exit now if

we'll take a look at the set interval

you'll notice something really

interesting where if i go with node and

app.js notice something interesting and

by the way of course i didn't copy and

paste so go to the third example

and then just remove all this code and

copy and paste so that's my third

example and in here i have the set

interval now again yes we'll have to run

few times node app.js

and now check it out

so what i see here is

i will run first

so that's my console log

and then i have the set interval

and notice how we're not exiting the

process here

so we start the process similarly to the

second example

but if in the second example we actually

exited because we completed all our

tasks

in this case we're not doing that why

well because set interval is

asynchronous

now the difference between the set

timeout and set interval is the fact

that set interval

runs in those increments in this case of

course it is those two seconds so every

two seconds the

event loop

is just gonna invoke that callback now

that's why we're not exiting

that's why we're still in the process

and we can only exit the process if we

kill it so that would be control and c

or there's some unexpected error

otherwise it will always stay alive now

again keep in mind one thing where

notice i will run first

was first why well because again this is

asynchronous and i know i've said this

before 20 000 times but again this is

probably the core building block of no

the fact that

every time we have some asynchronous

action it's just going to be offloaded

and then when it's time we invoke the

callback and our last example is a

server and again i just wanted to

showcase how the process stays alive

so i'll take all the code

and copy and paste in app.js

now i'll stop this one so stop the

process and then we'll clear the console

and again

just to showcase how the process stays

live i'm going to go with node and

app.js and i'm doing that so you're not

confused with nodemon and then check it

out so we have server listening on port

5000

and then every time the request comes in

well we invoke this callback and in our

callback we're simply cancel logging

request event and then we send back the

hello world so now if i were to go to a

localhost 5000 there it is

i have the response of hello world and

in a console i'll see this request event

and check it out how again this process

stays alive

why well because listen is asynchronous

and the moment we set it up now event

loop

is just waiting for those requests to

come in

and then once they come in then of

course we run our callback now please

don't confuse this callback with what

we're responding

our request i went so this callback is

just when we're setting up the server

because in here we can have the success

over there so in our case as you can see

everything went great we have server

listening on port 5000 but of course

there also

might be an error and this one of course

just responds to that request event but

the whole point is with server.listen we

just say hey event loop just keep

listening

for those incoming requests and the

moments show up

then respond to them appropriately

hopefully it is clear and of course we

can move on to our next topic all right

and up next i want to talk about

asynchronous patterns in node.js

so if we remember

when we were setting up the file system

module

we covered how we have two flavors we

have the synchronous one and the

asynchronous one

and while asynchronous one is great

since we're not blocking the event loop

the problem is that if we're using this

callback approach

well it gets messy pretty quickly right

because we're nesting one callback

inside of the other one so now in the

following videos i would want to show

you the alternative that we'll use

throughout the course

and why in my opinion it is much cleaner

syntax and that's why of course we'll

use it and first what i would want is

just to kill everything here and i'll

start with the nodemon

since

i'm done showing you the event loop and

we're just going to go with npm start

right that was the proper one and now

i'll delete everything that i currently

have not here sorry so i'll leave this

one the async one i would want to remove

everything in the app.js

and now i just want to quickly show you

the code that would block that event

loop again this is going to be the video

where

if you don't want to

code along you don't have to you can

just sit back and relax

and effectively you'll be in good shape

and again we'll set up the server like i

mentioned before already 20 000 times

don't worry about specific commands

we have rest of the course where we'll

be building servers so trust me you'll

get sick of it so go with http

and require

and of course we're looking for http

module

and then remember the methods create

server and listen

so we go with const and we create the

server

that is http

and create server we pass in callback a

callback takes two objects request

object and response object so again

essentially request object is what is

coming in and response object just

represents what we're sending out what

essentially we are responding and then i

would want to listen on a port again so

i run server.listen and then i'll pass

in the port of 5000 and then of course

we have that callback once the server is

ready and in here we can just go with

console.log

and we'll simply say

server is listening on port

5000 server is

is listening or just listening

listening

on port and then of course in my case

port is 5000

let's set that up so we should have this

listening on port 5000 and then of

course in my callback function i would

want to check 40 urls because i want to

show you how even if we try to get a

different resource we're still blocked

by other user

if he or she is requesting some kind of

resource where we have the blocking code

and don't worry if this sounds like

gibberish you'll see what i mean in a

second so remember on the request object

we could check for the url

so effectively you could check what is

the resource that the user is requesting

so for example home page would be

forward slash and then the about page

would be forward slash and about and

that is sitting in the property by the

name of request and url so request is

the object and then url is the property

so again we'll do a quick and dirty way

we'll just say request url is equal to a

forward slash that means it's a homepage

and then we just need to go with a

res.end

and then we'll say home page again later

we'll have way more sophisticated

approach but for now this will do

and then we're checking for the about

page

okay

awesome so this is going to be an about

page and then

if there's a page that doesn't match

any of the resources

then of course i'll just send back

i don't know error page i'm not going to

set up the whole link nothing like that

all right we save it and then this

should send back about page awesome and

then of course in home page i can just

respond with the homepage so life is

beautiful users can come here and as a

side note multiple users i'm

representing with these tabs so imagine

these are my users and life is beautiful

we are requesting resources and we're

just going on about our day now the

problem is going to be if i go to about

and if i set up some kind of blocking

code now what would be a blocking code

well that could be

a nested for loop

so i'm just going to go with blocking

code and then i'll add some exclamation

points and let's simply set up a for

loop let's say i

is equal

to zero

and then let's say i is less than

thousand

and yep i plus plus so

every iteration will increase by one

however

i'll set it up as a nested portal so

copy and paste and i'll just change

these values

to j

so j here and j here

and then let's just cancel log

and we'll say j and i again doesn't

really matter what we type there just

say i

and j

now known dialogue question what do you

think is gonna happen

so if the user navigates to about i mean

we can kind of see that this will take

some time

right

now you would expect though that

only the user who navigates here

gets blocked

and

you'd be wrong because we'll also block

the other suckers who are just trying to

get to the homepage so let me navigate

here

and check this out so i run this one and

notice how we're loading now the same

thing happens here now and here

okay and only when we're done here

then these two can get the resource

again

now of course if i go

to

my project i can see that in the console

i have all these values right because i

have this blocking code i have the

synchronous code that just takes a long

time and this is just a representation

of why

we prefer this asynchronous

now yes at the moment this is messy and

don't worry in the next videos we'll fix

it but this hopefully gives you an idea

why you should always strive setting up

your code asynchronously

because what we've learned in the

previous videos

if we do that

then those tasks

are offloaded and then only when the

data is back only when it's ready

then we invoke it and that way we're not

blocking the other users hopefully it is

clear and now of course let's take a

look at some other patterns we can use

so we still get the benefits so we're

not blocking that event loop

but

we also have a cleaner code

where we don't have this nested callback

mess all right and once we have covered

why it's so important to use the

asynchronous approach

now of course let's clean up our f a a

sync

so instead of using these nested

callbacks let's see a nicer pattern and

as i say note if you want to see the

code

that we wrote in a previous video and

the one we are about to write then the

files are located in two async patterns

folder so i'll close everything for now

and then back in app.js

i can remove it like i said if you want

to access that code it is sitting in the

two async patterns folder and we'll

simply start by recreating the

read file setup where i'm gonna go with

const and i'm right away accessing that

from the file system module and i'll set

it equal to require of course and then

file system all right that's awesome we

know that it is asynchronous so we need

to set it up with three parameters we go

with read

file and then we would want to pass in

path first so again since i'm in app.js

i'm going to be looking for the content

and then forward slash and then first

txt the file we already created before

then we have encoding so comma and then

again we're going to go with utf-8 and

then last one is going to be that

callback where the first value is the

error and then the second one is the

data that we're getting back okay

awesome so once the file system responds

then of course we invoke this callback

and inside of that callback we have our

logic so if there's going to be an error

for time being

i will just return like so

and then if i have the data i'll set it

up as else so say here console log

and data of course

and we shouldn't be surprised

if we've seen a console hello this is a

first text file because we already

covered the setup right so we're passing

the path we pass in the encoding and

then we set up the callback now the

problem starts if we would want to

perform

multiple actions if i want to read two

files and then for example write one

correct so what would be a better

solution well a better solution

would be turning this into a promise and

then eventually we'll set up async await

now please keep in mind that the only

reason why i will type out the promise

stuff is because i would want you to

understand what is happening behind the

scenes but don't worry throughout the

course we'll just stick with a sync and

a weight syntax and essentially you

won't have to worry about what is

happening behind the scenes but the

first example yes i want you to

understand everything in detail so what

we could do is create a new function

and we can just say const and then

i'll call this get text now this get

text will take a path

since i want to read two files and then

eventually write one as well just like

we did here and of course the goal here

is to showcase how we can make the code

in the file fs async at least that's how

i called my file much cleaner and more

readable so again we pass in the path

and then what i would want to return

from this function is a promise so we go

with return

new promise and then in the promise

object we need to pass in is another

callback function so we pass in the

callback function and in here we pass in

two more functions one for resolve and

then one for reject and then once i have

set up both of these parameters now of

course what i would want is to move the

read file

and place it inside of the promised one

okay so once we place it here first of

all notice here how i'm passing in the

path so of course i can change this one

around so i can say path and then the

encoding stays the same

as well as the callback however inside

of the callback once i have access to

resolve and reject what i could simply

say that if there is an error

i will spit back the error so say reject

an error and if everything goes great

now of course let's go with resolve and

then we'll pass in the data and once we

have this setup what's really cool that

now i can invoke get text and this is

going to return a promise and then of

course we can chain that then and catch

so below the get text i can go with get

text and of course we're looking for the

path so we still would need to use dot

and then forward slash and then content

of course and first txt so that's the

path and then like i said

we are returning a promise so we can

chain that then

and of course here i can have the result

and i'll just cancel log it for now

or result and then i can also chain that

catch and here i'm passing in the error

so again we can't log it

and we simply would want to see the

error i save it and beautiful

again in a console i have hello this is

first text file so i know that it worked

and also if i change the path

so if i make my path incorrect we should

see in the console the error

where of course node cannot find file so

if that works now of course we can take

a look at how we can make it even

cleaner by setting up async 08 and once

we have our initial setup once we have

turned this into a promise

technically we're not out of the woods

because if i would want to perform again

two file reads and then eventually write

the file as well and if i would want to

do all of that asynchronously it's still

going to be paying just by using the

promises so what would be a solution

well since we're returning a promise if

i use async await

i can wait till promise is settled

and then decide what i would want to do

and the way we set that one up is by

creating a new function now please keep

one thing in mind where

eventually throughout the course

those functions that i'm about to set up

are going to be provided to us

so we'll just attach that async to the

callback functions that already provided

us by the libraries okay but in this

example i'll have to create one from the

scratch and again the whole point here

is because i would want to create a

function a start function that i'm going

to set up as a synchronous function and

i would want to attach a weight

so i would only respond once the promise

is settled so in here i go const start

and that's my function but i need to set

it up right away as async because i

would want to use my await keyword

correct and then we simply go with const

and i know that of course i'm looking

for the first file

and i'll just say first and that one is

equal to

get text and basically i want to pass in

the same thing here now i do need to

place this one in quotation marks so my

bad i messed it up a little bit okay i

passed it in and that should do it

now of course what i'm missing here is a

weight so i had this await and now only

once the promise is resolved

then i'll get my response so what i

could do here

is just comment these two or you know

what this one i cannot comment out yet

don't worry we will eventually

this one i can comment out and then

maybe

move this below

okay so you don't think that i'm running

this code and since i have my function

now of course i would need to invoke it

so invoke start

and check it out now of course i don't

have the error which is a good sign i

guess

and then we'll simply go with log and

none first

and notice the difference

where previously when we were setting up

the callbacks we had to nest everything

now i'm waiting for this promise to be

resolved and only once it's resolved

then of course i can do something with

the value now every time we have this

async await approach what we would want

is to wrap this e in the try catch block

so if something goes wrong then we have

at least a little bit of control over it

so i'll set up try catch block and then

i'll set up my first await and

eventually we'll add here more

and then in the error i'll simply go

with console.log and we'll console log

the error and let's just save that one

so now we have nice try and catch block

and by the way sorry i deleted it we'll

still take a look at the first one and

then if we change the path

then of course we'll get an error okay

so that's good now i have my start

function it is the synchronous i'm

waiting for the promises to resolve

they're all wrapped in try catch block

so what's next well if you remember in

here

what were the actions that we were doing

well we read two files correct and then

we wrote one okay so let's try that one

with this new approach where essentially

i have first so just copy and paste and

then i'll look for the second file

remember

we should have that in the content so

this is going to be the second one

second over here and then i would want

to write the file now of course

you could say well the problem here is

going to be that i'll have to

write a new wrapping function to set it

up as a promise because

yes we can of course read the file but

functionality for the write file again

we would need to wrap it

don't worry there's a way how we can get

this actually out of the node

first i just want to showcase how much

cleaner this already is

where i can just wait for first

second like so and now notice in the

console hello this is the first text and

hello this is the second file again i

fully understand that you're looking at

this wrapper function and you're like

well this definitely doesn't look that

much cleaner than this one don't worry

there's a way for us to get those

functions

in a way that they're already returning

a promise what i would want you to focus

on

is this code what i would want you to

understand that this definitely

is much cleaner than what we have here

we read the file and then we set up

another nested callback

and another nested callback and

hopefully you get the gist

waiting for these promises to resolve is

definitely a cleaner and more readable

approach all right so this works we have

our start function it is asynchronous

we're waiting for prompts to resolve and

we can see that it is already much

cleaner

how we can set up this code

without the wrapping function

well what's really cool that in node

there is a module by the name of util

and we just go here const and we'll

assign it to a variable and we'll just

be looking for require of course

since we would want to import the module

and again the name is util

and then instead of this module we have

a method by the name of promisify

and with the use of this function we can

take our read file which of course was

looking for the callback and turn it

into the function that returns a promise

and again this is over simplified

version what is happening there but

hopefully you understand that as a

result we'll get again this promise back

now the way we'll set that up of course

we have read file here already so i

cannot use the same name that's why i'll

go with read

file and we'll call this promise and

that one is equal to util that is of

course my module dot and then notice the

function promisify and then we pass in

that read file function so now i have my

promise one so now what i could do

is first of all comment this out and

move it down

again so it stays for your reference

but

it doesn't compromise my view

and of course now i have the error

because

well get text is not defined that's fine

don't worry and i'll copy and paste and

since i also want to write a new file

i will get from the file system one

the right file function and then i'll do

the same thing

where in this case it's going to be

called

write file promise

and then we pass in write file

and of course now instead of calling

get text what i'm gonna do is go with

right file or i'm sorry in this case

we're going for read file promise and

then keep in mind one thing where this

is not a get text one so we're still

looking for the path

as well as the encoding that's well copy

and paste and then second argument we

pass in is the encoding and again our

functionality shouldn't change where i

should see in console the results from

the first txt now of course i want to do

the same thing with the second one so

have read file promise second txt

again we have to pass in the encoding

otherwise we'll get the buffer back

so copy this and paste and again if we

cancel log it there it is we have hello

this is first text file and this is the

second one and since in the line 4 we

passed in

write file into promisify of course what

we could also do is right away write the

file so i can go with await and i'm

simply not assigning this to a variable

because well i'm getting back on the

finder as far as data and i'm just going

to go with await

write file promise and the same spiel we

pass in first the path and in this case

of course if the file is not there

node will create one

and the name will be result and i'll

just call this mine

grenade and then txt and then the second

one is data so for that one i'll set up

my template string and i'll just say

this is

awesome

awesome

and then let's set up the colon and then

we'll access both

first

as well as the second one so we'll

interpolate both of them

second

and then once we save

if we take a look at the content there

it is now we have the mind grenade one

correct now there's probably one where i

was testing yep there's one where i was

testing so i'll remove this one but if i

take a look at dtxd1 then of course i'll

have this is awesome hello this is first

text file and then i have the second one

now what's even more cool

that technically we can even skip this

part as well again

i'll leave this one for your reference

but

if you go to require

and then you require of course file

system module but if you add dot

promises

what do you think is going to return

well effectively the same thing so now

of course i just need to change the name

from read file promise and write file

promise back to read file and write file

since those are the two functions that

i'm importing and that will right away

return promises and again we save and

remember that by default we're just

overwriting stuff

so if i were to go

and add a third argument my options one

and if i'm just going to say

flag and i'll set it equal to upend once

we save well now we have this is awesome

repeat it one more time again just to

showcase that our functionality still

works

i fully understand that there was a

little detour

where we created our own wrapper

function

and then we covered how we would consume

promises but hopefully this helps you

understand that this approach is

definitely way better

so it is more readable it is more

easier to wrap your head around and

that's why for the remainder of the

course we'll stick with this one

again

some things will be provided

to us by default so libraries will

provide the functions that return

promises will right away have the

callback functions that we'll just set

up as async and hopefully you get the

gist so a lot of things will be given to

us but the core functionality won't

change where instead of using callbacks

and nesting them inside of the other

callbacks and nesting more and more and

more

we'll set up everything with async await

because the syntax is cleaner and way

easier to read

excellent once we have covered async

patterns we're going to use throughout

the course now let's talk about events

in node.js

when working on browser javascript apps

a big part of our work

is to handle events for example

user clicks a button

and of course in our program we handle

that user hovers over the link

and again same deal in our program we

are handling that and hopefully you get

the gist essentially as our program

executes at least in part it is

controlled by events

of course depending on a program but

it's safe to say that in browser app

those events are mostly external

now that style of programming is

actually called event driven programming

and effectively it's just that a style

in which the flow of the program

is at least in part determined by the

events that occur

as the program executes

now it's easier to imagine that of

course

when you have a gui right the graphical

interface

just like the button and links example i

just mentioned

but what about server side

is it also possible and of course the

answer is yes in fact event driven

programming is used heavily in node.js

and in the following videos we'll see

some of the examples of it

and basically the idea is following we

listen for specific events

and register functions that will execute

in response to those events

so once our event takes place callback

function fires just like in our

imaginary button example

now before we continue let me stress

something our first examples are going

to be basic and

even somewhat silly

but don't let that fool you

many built-in modules in node.js do use

events under the hood and therefore

making events and event driven

programming a big part of nodejs all

right and once we have covered general

concepts behind events as well as

event-driven programming now let's set

up our own events in node and the way we

do that we come up with a variable and

typically this name is event

emitter because what we're getting back

is the class

and we require the events module so

require events module and we assign it

to a variable which essentially is a

class

and again a common practice is calling

this event emitter and at this point you

have two options if you want to create

something custom

you'll need to

extend the class

or if you simply want to

emit an event

as well as listen for it then you can

just create the instance so go with the

second route we'll go with const and

then whatever name you would want in my

case i'm just going to call this custom

emitter like so and i'll assign it to

new

emitter so event emitter or however you

call this variable and we just need to

invoke it so now we have the instance of

our class so essentially we have the

object now there are many methods in

this object however two that we're

interested the most are on

and emit

so on we'll listen for specific amend

and then emit of course will emit that

event

and the way we set it up we go with

custom mirror or whatever name you used

and then we go with on

and at the very basic setup in the on

method we just pass in the string

where we say the name of the event now

in my case i'll name my one response and

then of course once i have subscribed to

it i also would want to pass in the

callback function so essentially when

this event takes place

well then i would want to do something

and in my case i'll just go with

console.log and we'll simply say data

received or i'll place this one in the

template strings and you'll see in a

second why so we'll go with data

received

and then eventually there's going to be

some more data and of course once we

have subscribed to this specific event

now i would want to admit it and the way

we do that we just go with custom

emitter and of course the method is

surprise surprise emit and of course at

this point

these strings need to match so if i'm

emitting

the response event

and just say here response and what

you'll see in the console is wherever

you have in callback so of course in my

case i have console log data received

and then once i run it i have data

received in console so that's the most

basic setup when it comes to events

again we create an instance from the

class that we get back from the events

module and then we have two methods we

have on method as well as the emit

method and then in the on method we pass

in the string so that's going to be the

name of the event as well as the

callback function

so once this event takes place

then of course we would want to do

something and in our case we'll just

console.log data received and then once

we have subscribed to this event then of

course we need to emit it and the way we

do that we just go with

whatever the name is in my case custom

emitter then emit method and then we

pass in the same string that we're

listening for

in our case of course response and then

the moment we do that

we of course have whatever is in the

callback function which in of course of

course is just a simple log data

received

all right and once we have covered the

basic setup now let me show you some

things that

i would want you to be aware of

first

we can have as many methods we would

want so for example we have the same

event we have here response correct and

we are omitting it so nothing stops me

here just copy and paste

and listen for the same event

which of course in our case is this

response and then do some other logic in

my callback again in my case it's just

going to be simple

different kinds of log so i'm going to

say some

other

logic here and i'm not going to copy and

paste

the same function 20 000 times just to

prove my point but hopefully understand

that yes we can emit our event and then

yes also we can have as many functions

we would want here that our listening

for that event and do some other logic

so that's point number one point number

two that i would like to make is the

fact that

this order matters

so we first listen for event and then we

emit it so for example if i will place

my emit above the second function or

above both of the functions which you'll

notice

that i have nothing in a console

why well because i first emit the event

and only then i listen for it

as you can see that doesn't make sense

so first we would want to listen for the

event

and only then we would admit it so in

this case notice i don't have this some

other logic goes in here because i

listen for response and then i right

away admit the response and then again i

listen for the response but i already

admitted the event correct so it doesn't

make sense to listen for the event once

it has been already emitted so that's

the point number two

and then thirdly our also on a showcase

that we can pass the arguments when

we're omitting the event so for example

i go here with my emit i pass in the

name which is of course response and

then i can pass in more arguments for

example here i'll go john and then the

id number 34. so string and a number and

then in my callback function

i can access those arguments as

parameters just like normal functions so

in this case i'll call them name and id

and simply in my console.log i'll say

name

and the second one will be with id

and then whatever is that id

now i'll add here data received

user and then save it and it's no

surprise that in the console i see data

received user john with id34 now in the

second function as you can see

i wasn't looking for those arguments i

just don't have access to the arguments

because i don't have the parameters but

it's not like everything broke just

because in the event i passed in the

arguments and lastly i would just want

to reiterate the point that even though

you might not write

your own events events are a core

building block of node and effectively

as you're building and writing out the

code for your node application you are

using those events at the end of the day

anyway because a lot of built-in modules

rely on them and as a quick side note if

you'd like to see the code that we wrote

in previous two lectures you can just

navigate to 13 event emitter and in

order to show that i'll quickly set up a

server

and again the code for this one you can

find at 14 and then request event so

copy all the contents from the file

and then just copy and paste

and notice something interesting where

again yes we're getting the http module

and remember the setup that we have used

so far where we go with http create

server and then we pass in this callback

function

and then of course this callback

function will be invoked every time

someone visits our server so every time

the request

comes in now there's another way how we

can set it up by using event emitter api

so we still create a server we go with

http and then create server function but

instead of passing in the callback

function like we did previously

server has the method

on

does that ring a bell remember our

previous example

we had our own instance and

it had the method of on correct so the

same goes for server so server has the

method on

and we listen for

request event and when that request

comes in

then of course again we have this

callback function that handles it so

behind the scenes

server emits the request event and then

of course we can listen for it we can

subscribe to it listen for it or respond

to it however you'd want to call it and

the way we do that we go with server on

and then this is a specific name

because of course it emits that specific

name behind the scene so make sure that

it is a request and then the same spiel

now how do i know that well if we go to

node documentation and if we look for

http we keep on scrolling keep on

scrolling eventually we'll hit the

server

and

over here i can see that it has a clash

okay that's a good start and that what

do you see here

well i see the event right and what is

the event well the name is request so

that's how i know

that my server the instance that i

create has the ability to listen for

request events and if you want to dig

deeper you can just click on a server

you notice that it extends the net

server and if we keep on digging check

it out so this one extends what it

extends the event emitter so hopefully

that makes it clear that even though you

might not be setting up events on your

own a bunch of built-in modules rely

heavily

on this concept of events all right and

up next we have streams in node.js

and at its simplest streams are used to

read or write sequentially basically

when we have to handle and manipulate

streaming data for example continuous

source or a big file streams come in

real handy

and now there are four different types

of streams we have writable used to

write data sequentially then we have

readable used to read data sequentially

duplex

used to both read and write data

sequentially and also transform where

data can be modified when writing or

reading just like with events many

built-in modules in node implement

streaming interface

and what's also interesting streams

extend event emitters class which simply

means that we can use events like data

and and on streams

since streams are somewhat off an

advanced topic in node i'll try to keep

it short and sweet mostly by showing you

examples of streams and hopefully that

way you get the main idea without being

overwhelmed

all right and once we know the theory

behind the streams now let's take a look

at the practical example

and a very good use case is using

streams when we are reading files

because we need to understand one thing

where when we use the sync or

asynchronous approach what happens we're

reading the whole file and of course in

our example we were setting this equal

to a variable correct but if we have a

big file

well first of all you're just using all

that memory and second

as the file size gets bigger and bigger

bigger eventually the variable is not

going to be good enough you will get an

error that

i mean the size is too big and you

cannot place everything in the string so

what would be a solution one solution

would be read stream option

and the way we'll set this up

i'm going to start app.js from scratch

but if you take a look at the repo

you'll notice this 15 create big file so

previously when we were working with

files i just had some small files right

so i had the first txt blah blah blah

result and whatever now before we set up

the read stream i would want to create a

big file again this is optional you

don't have to do that but in my case in

order to show you how the streams work

yes i'll have to set up a big file and

first i'll remove it because of course

i already have it since i was testing it

and now i'll stop my server and of

course in my case i'll run 15 the create

big file js

if you want to set it on your own and if

you don't want to use the repo you can

just

get the right file sync from the fs

module and then notice i have the loop

where i believe i have here 10 000

and then every iteration i just write a

big txt i of course i have the flag

upend and then i'm just adding hello

world and starting a new line so if i'll

run node

and then of course i'm going to go with

my file name which is 15

then hyphen

create

big

file and js like so

then in the content i should have this

big file

and once i have my big file i'll go back

to app.js and i'll use my npm start

since of course i have known mine in

place and then let's go with cons now

i'm not going to show you how the setup

would look like with file sync or the

asynchronous one again hopefully you

understand that the setup would be

exactly the same like we have in 10 and

11 where we had the fa sync and fa async

and now of course let's just go with the

stream option so the method name is

create

read

stream and we require that from the fs

module like so

and then

we create a new variable and in my case

i'll call this stream and we invoke the

create read stream and the only thing by

default we need to pass in is the path

so of course in my case i'm going to go

with content and then forward slash and

since i just created that text file the

big one of course i'm going to go with

big txt and now remember the good old

friends events well

once we create this instance we actually

have access to them and the ones that

we're going to use is going to be data

and error so we can go with stream

and then on and remember the event

syntax and then the event that you would

want to listen for is a data and then we

have our callback function and again it

is a parameter so we can call whatever

we would want but in my case i'm going

to go result and let's just console.log

the result like so

and what you'll notice

is that we have

64 kilobytes here that's our first

console log then we have another one 464

kilobytes and the reason why i know that

is because by default that's the size

we're getting and then we're getting the

reminder now just to prove my point i'm

going to go to my folder

and i'm going to look for my content

and then in there if you take a look the

big text file we created is

169 kilobytes so as you can see now

we're reading data in chunks

and by default that chunk is 64

kilobytes

and every time we cancel log

we see that we have 64 64 and eventually

we have the remainder so instead of

reading everything and placing that in

the variable we're doing that in chunks

and as you can see we're using the event

and the event is data and in order to

hammer this home why don't we take a

look at the docs

so first i'm going to look for my file

system

and then let's look for

our create read stream so we go here as

we can see we have this class read

stream and then on this class we have

these three ones we have close open

and ready and as a side note we'll use

this one a little bit later as well the

open one so keep an eye on this one and

then as far as the read stream well as

you can see it is created when we go

with create read stream and invoke it

right so i got the create read stream

that's my function i just passed in the

past and i invoked it and in turn

that returns

the read stream

right then

actual read stream extends from

stream.readable so right away i have

these events i have close open and ready

and like i said we use this open a

little bit later now since it is

extending from the stream check it out

now of course i have the data one all

right so this is a chunk of data

and as you can see every time we are

getting that data

we can do something with it now at the

moment we're just going to logging it's

very simple but eventually as you can

already imagine we can do way more

useful things than that beautiful once

we understand the basics now let's take

a look at some additional info like i

said by default the size of the buffer

is going to be 64 kilobytes however we

can also control it and the way we do

that is by passing in the object when

we're setting up create read stream so

first argument is going to be the path

which again in my case is going to be

that big text file that i created using

my file using my for loop and then i can

pass in the options object and in there

the property that you're looking for the

property that controls the size of the

buffer

has the name of high water mark so for

example if i go with 90 000 here then of

course you'll see that i'll have two

console logs

one for

90 kilobytes and the second one will be

remainder again keep in mind that

our file size is

169 kilobytes that's number one number

two

we can right away set up the encoding as

well so i go with comma and then the

property name is encoding and again

we'll set it up equal to utf-8 like so

and then you'll see in a console of

course the hello world why well because

that is the content coming from the file

and lastly i also would want to mention

that we have the error event as well so

if i go with stream and then on and

we're checking for the error and as

always we can do something once that

error happens so that's our callback

function and in this case i'll just

access the error property and i'll

console.log the error so i'll say here

error and the way we check that one out

is by providing wrong path so in my case

i'm just going to add two dots and then

once i save check it out in a console

i'll have the error where it tells me

that no such file or directory

all right and now let's take a look at

the practical example when streams come

in handy now again this is going to be

one of those videos where you don't have

to code along you can just sit back and

relax and see how i struggle and first

what i want is to make it even a bigger

file so remember d15 create big file

i believe i had 10 iterations right so

i'm gonna add one more

meaning i'll add one more zero i'll stop

my server right now again this is

optional you don't have to do that and

i'll remove the big file

like so

and then i'll run one more time

the file with node

and then of course this file is going to

be way bigger

so let me navigate to my folder just to

showcase that

and i'm looking for content and now the

big file is 1.8 megs

now once i have the big file

i'll go with npm

start at the moment i just have the

stream example but if you want to see

the whole code just take a look at the

file number 17 and notice again we're

creating a http server and i'm just

using the read file stick method i'm

looking for big txt the encoding is

utf-8 and then i just place my variable

my text one into

res dot and method and effectively i'm

just sending my big text file

and let me restart the server

here so let me go with npm start right

now so let me select everything from

this file

and copy and paste

and now if we navigate to localhost

5000

we should see a bunch of hello world

now the problem with the setup is

following where if i go to developer

tools and if i take a look at the

network and if i refresh

yep

this request was successful

take a look at the size

do you think

it is the smartest thing to send these

type of files over the wire and of

course this is just going to make it

very difficult to all your users because

you're just sending large chunks of data

effectively i'm sending the whole file

and more specifically if i click check

it out so i have the request url okay

that is good the method is get

now as you can see the content length

is my 1.8 megs right

and you'll see in a second that once we

refactor this to read stream method

that we're sending data in the chunks

and again the best way to see that is by

looking at the headers where at the

moment i can see the content length and

that one is at 1.8 megs but once we

refactor that the setup is going to be

different so at the moment i have this

text i'm accessing that by read file

sync so comment this out and let's set

it up with our create read stream so

i'll go with const and i'll call this

file

stream and this is going to be equal to

fs and then create read stream now use

the same address

so use the same path

and then i'll use the same encoding as

well

so let's go with utf-8 okay

awesome and once we set up the stream

remember we have access to

to events

file stream on

and of course i'm going to be looking

for the open

and i'll have my callback function and

we'll set that functionality up in a

second and the second one of course is

the error so go with file stream and

then on and again we're looking for the

event by the name of error and then in

our callback function we can access the

error and i'll simply pass it in in my

response so if there is an error i'll

just grab the error from my parameter

and pass it in now as far as the open

here instead of setting it equal to

instead of going res dot end and then

text file stream also have the pipe

method so we can go to file stream and

then pipe and what the pipe is doing it

is pushing from the read stream into

right stream so you can imagine that if

we can read data in chunks we can also

write data in chunks and what happens

under the herd response object can be

set up as a writable stream so we have

our file stream so that's our read

stream we have method of pipe so we're

piping this into a writable stream and

now of course i'll pass in my response

object and if we go back to the browser

and if we'll refresh

now notice something interesting yeah

still same request right to localhost

5000 still same size but

if i take a look at the headers now i

can see that my response headers are

chunked so instead of sending our file

back in one large instance we're sending

it back in chunks awesome congrats on

completing section number three

node fundamentals and hopefully after

watching the section you have a good

general understanding of how node works

and now that we're big shots let's apply

that knowledge and build some servers

shall we and we're going to start

section 4 with the general info of how

the web works more specifically how we

exchange data on the web

and we're going to do that with the help

of few slides

now if you're one of the people who's

already reached a daily slide limit i

hear you

once we're done with these suckers i

promise we'll mostly actually write code

for the remainder of the course

i do believe though that before we build

an actual web server it's crucial for us

to understand how it works under the

hood and that way we'll have clear

understanding of what tasks need to be

done if something is iffy you can always

go back to the slides you already know

where they're located and also as we're

going to be progressing with the course

from time to time i will swing back to

them when i'll need to emphasize a

specific point

with that said let's talk about how we

exchange data

on the web

um it's safe to say that if you're

watching this video

you know how to use a web browser

but under the hood the way it works

every time we open up a browser

and we type the url so the web address

we're actually performing a request

and we are performing a request to the

server

that is responsible

serving those resources so for example

when you look for cnn.com

you're looking for a server that has

those resources and then that server

sends you back the response and the same

works with youtube the same works with

johnsmeld.com

or whatever so you just pick a resource

you say hey

can i get this data and then server who

is responsible for those resources just

sends you back the response now that is

done using http protocol and that's why

these ones are called http messages

so the user sends the http

request message and then the server

sends the http response message

and that's how we exchange data on web

and for the remainder of the course

we'll be responsible for building

such web server using node and more

specifically express now i'll talk about

it while we use express as well show you

a few examples

later on in a course but for now just

remember that yes we'll use node but in

order to make our lives easier we'll use

the framework by the name of express js

and lastly i would just want to mention

that even though name server definitely

sounds way cooler than the computer

at the end of the day they're just

computers whose job

is to always make that resource

available

so yes those are computers and yes there

are some differences for example

they most likely don't have the

graphical interface or the gui

and also they're probably much bigger

than your laptop but at the end of the

day they are computers

whose job

is to always make sure that that

resource is available because imagine if

you would have a server that only works

from eight to five so if you go to your

website at i don't know six o'clock at

night you cannot access the resource

probably that's not the service that you

would pick so next time when someone

asks you if it rains does the cloud

still work you know what to answer

because at the end of the day when we

talk about cloud cloud is just a bunch

of these servers bunch of these

computers connected together beautiful

and once we have a general understanding

how data is exchanged on a web

let's also cover how http messages are

structured please keep in mind that

since it's going to be a big part of our

job

we'll come back to this particular slide

more than once so if you're if you're

about something just please be patient

and i'll answer all of your questions as

we move along with the course with that

said the general structure

for both messages is similar they both

have a start line

they both have optional headers a blank

line that indicates that all the meta

info has been sent and effectively

headers are that meta info as well as

optional body and before we continue

again let me stress something so request

messages

are what the user is sending so for

example if you open up the browser to

search the web or that could be your web

application because remember with web

applications we also can make http

requests correct and then response

is going to be our responsibility so

we'll have to set up a proper server

that sends a correct response

and in general when we talk about the

request

message

in start line there's going to be a

method

then the url as well as the http version

now

we are mostly going to be interested in

these two things in the method as well

as the url now there's going to be a

separate slide about the methods as well

and don't worry we'll cover that in a

greater detail once we cover them with

actual code examples so i'll come back

to that slide just understand the

general idea that when we talk about

methods effectively we're communicating

what we would want to do so for example

if i want to get the resource i'm going

to set it up as a get request now if i

want to add the resource then of course

this is going to be a post request and

then of course you can read the rest now

why i'm displaying here this get because

that is the default request

that the browser performs

since when we open up the browser we

want to get some kind of resource

correct that's why we're performing a

get request and the url is just the

address and that could be for example

johnsmilk.com or that could be i don't

know espn forward slash basketball both

of them are just a web addresses now

headers

is essentially optional

where this is a meta information about

our request and just to give you a

general idea how the headers would look

like they would look something like this

so it is a key value pairs now don't

freak out

as you know when you search the web you

don't need to add them manually and the

same is going to be with our server a

lot of it is going to be taken care of

but yes some things we'll have to add

on our own basically this is going to be

information about our message

and then we also have optional body

so when the user is requesting something

if you just want the resource there is

nobody there's nothing basically what to

send however if we would want to add a

resource onto the server yes

then you are expected to provide that

data and it's also called payload so

again i might use them interchangeably

so that's the general structure of the

request message

we have the start line we have the

headers that is the information about

our message as well as the black line

which just indicates that we're done

with the meta information and optional

body which we'll use from time to time

and now of course we need to talk about

the response message so response message

is what we're going to be creating again

most of it will be done for us but some

parts yes we'll have to do it manually

and it's going to be our responsibility

so the start line

has the http version which most likely

is going to be 1.1

then we have a status code and status

text now when it comes to status code

it just signals

what is the result of the request so for

example notice here this 200

that means that request was successful

so that's what we're sending back and

yes there's quite a few of those codes

and as we move along with the course of

course we will cover them but please

please please don't rush over to the

search engine and start memorizing the

status codes pretty much as we're going

to be building the application i'll tell

you which code means what and for

example 400 means that there was some

kind of request error

so the user was trying to request some

kind of research and with 400 there was

a request error now for example the code

404 means that the resource is not found

so when i'm sending back the message i'm

like hey listen here's the status code

for the message if you are successful

here's 200 if there was an error for

example you get a 400 if the

request is unauthorized then you can get

401 and hopefully you get the gist and

yes of course as we're progressing we

will cover more status code then again

we have the headers

where basically we provide info

about our message our response message

and again like i said you won't have to

type everything line by line but

effectively it is a

setup of key value pairs and the ones

that i would like to mention are these

ones notice this content type we have

text html that is when we're sending

back the html but also our second option

is going to be sending back the data

so hopefully you are aware that when

you're building a web application when

we communicate with api most of the time

we're getting back the json data because

over the web effectively we just send

over the string so if for example i have

some kind of array we transfer this into

application json and i clearly indicate

that in my headers where i say that no

i'm not sending text and html i'm

actually sending a application json and

then that application who is requesting

the web application knows that hey from

the server i'm getting a content type

which is application json so for example

in that case i could send back here this

array with bunch of these objects and

just to give you a real-world taste why

don't we do this

open up a new browser tab and i'm simply

going to course api because i think

there's going to be less data so there's

going to be less clutter so go to course

api here and then you can either pick

the slides or you can just look at the

home page and if you inspect

and if you look in the browser tab

you'll find a network

and very useful one is this one where we

can just look for all the requests we

refresh and then check it out so these

are the requests

that browser performed and i'll talk

about it a bit later why there's also

this style css in fact that's going to

be one of our first examples but take a

look at this one so i have this course

api and then forward slash and if you

remember when we were building our

original server what i said that if we

have this forward slash that just means

home page so if we're just navigating to

courseapi.com

and

that is our homepage we simply add this

forward slash now of course in the

browser that's automatically added but

that's why when we're setting up the

server one of the cases is going to be

if the user navigates to the homepage

then we simply look for forward slash so

if for example you go to the slides

you'll notice that uh in this case i

would have to refresh notice here i have

the course api

forward slash slides so that is already

a page in my website correct so i have

the home page course api and then i have

the slides page where i have the slides

and if you take a look if you click on

it notice all the useful data that we

get over here so for example this is

going to be our request url which is

going to be again course api.com so that

tells me well what the browser is trying

to get

then check it out the method why it's

get because that is default in the

browsers every time you open up the

browser and search something then of

course you'll be performing a get

request now check out this one the

status code it is 200 why because

everything is successful because servers

send back the data then we have this

remote address and basically that is the

ip address for my server as well as

notice this colon 443

and we'll come back to this one when we

set up our own server because if you

remember we were always setting up the

5000 so you're probably wondering well

what is this 443 and don't worry again

we'll cover that one once we set up our

first server

and then again we have response headers

for example and we also have the request

adders so as you can see using this

network tab we can actually find a bunch

of useful information now

notice here in the second set of tabs i

can see this response and preview so if

you take a look at the preview

this is going to be basically my site

and also i can see the response so as

you can see pretty much sending back the

html

so i'm sending back the website so you

go into the browser you request a

resource

by default it is a get request

and then in that body

when the server sends it back

this is what we get back so we get back

the site so hopefully this gives you a

clear understanding of how the http

messages are structured and now let's

dive into creating our own server

awesome once we're done with the slides

now let's start setting up our server

and in order to follow along with the

course you'll need to have a starter

project and you can get it if you

navigate to my site again the url is

johnsmilk.com

so navigate there in the project or in

home page look for node express tutorial

project in a home page is going to be

at the bottom in latest project if you

cannot find it there then look for all

projects page or simply projects page

then filter for node in order to save

some time and then like i already

previously mentioned any of these links

will get you to the repo and then

bravely get the repo in my case i'm

going to clone it so i'll copy the url

i'll bump up the sound size in my

terminal navigate to the desktop

get clone here

and then i'm gonna get the repo and then

once the project is on my machine

i'm just gonna drag and drop and then

the first thing that i would suggest

doing is removing the remote url and you

can simply do that by just wiping out

the git folder so that way if you ever

do decide you push this up to the github

you won't have some dumb permission

errors so i'm just going to open up the

integrated terminal now in my case i'm

not going to run the command but

if you're on mac i suggest running rm

then hyphen rf and then get now if you

are on windows

some students have just these two

commands now i haven't tested them yet

but some people have replied to

my tweet that yes they do work and if

you want to see the whole tweet just

navigate to my twitter the handle is

john underscore smilga and then as you

can see here is the mac command and for

windows i have these two so run this

command and then in next video

i'll give you a brief overview of the

repo all right and before we get busy

why don't i give you a brief overview of

the ripple

and if you take a look at the first

project this should look very very

familiar because essentially this is all

the code we have written so far

everything starting with our most basic

application and then of course we also

have our last one our http streams

example so hopefully that is clear and

if you ever need to jog your memory

essentially this is just here for your

reference

and then from now on we'll work in a

folder number two by the name of express

tutorial

and the idea is gonna be exactly the

same where basically

we build a bunch of examples and in the

process we learned what is express and

why we would prefer using express

instead of straight up http module but

again let me stress something where

express is built

on top of node and more specifically on

top of http module so it's not like you

can use express without node and in

folder two

the setup is following

where there are gonna be some assets

that i provided

just so we can make more real world

examples so hopefully that gives you a

better idea how the express works and

i'm not going to cover them right now

for example methods public or navbar app

once we get there i'll explain

everything that's happening i think that

it's going to be waste of our time if i

do that right now however if you take a

look at the final folder you'll

basically see

all our examples so the same spiel

if you ever

need to reference the code just navigate

to the final look for the file name and

then of course you'll find the code just

keep in mind that in order to run

this code you'll have to copy and paste

and run it in the app.js why

because in some cases there's going to

be paths and since these files are

located already in the final the paths

won't match

okay hopefully that one is clear as well

and then we also should be familiar with

these files

as you can see i have package.json i

have package.json lock and then app.js

now of course app.js could be renamed

server or whatever you would want but i

already have in a package.json a script

that spins up the nodemon and

effectively we have successfully set up

a node application so package.json is of

course needed because we'll have some

dependencies more specifically two one

is going to be nodemod and the second

one is going to be express

and in order to of course keep track of

those dependencies we have

package.json and then if you notice i

don't have the node modules here and of

course the reason for that is because i

don't want this repo to be massive and

you can clearly see that in a git ignore

where i have node modules included so

when i was pushing this up to the github

and of course

i omitted the node modules since i added

them in the git ignore and then in the

package json like i said

you'll find some dependencies and i'll

talk about express once we get there the

moment let's not worry about it the one

that we should be familiar with is node

one which is going to be watching our

application and i have a script

that sets up nodemon

and passes in the amp.js so any changes

in our project nodemon will be watching

and restarting our application however

we cannot do anything before we install

all dependencies otherwise you'll just

get an error so that's why the first

thing that i would want you to do is

navigate to the folder number two

and the fastest way probably is just

going to be cd and then take the

project number two and drag and drop

like so and then once you can see

that you are in this folder

so not in a root not in node express

course but once you are actually in the

folder number two before you do anything

just run npm

install first and then it's really up to

you you can either wait for all the

dependencies to be installed and then

run npm start or you can simply chain it

and say npm

and once you run this one

then of course you'll install

dependencies and if you see in a

terminal express tutorial that means

that everything is correct and you can

continue with the videos if you don't

see that then please troubleshoot

because none of the things that we're

about to do next are going to make sense

if you're not running the project number

two with all the dependencies more

specifically nodemon and express

and lastly i just want to mention yes

there's also this data.js and again this

is one of the assets that i added that

we're going to use a little bit later so

if you see express tutorial in a console

and the reason why it's there because

that's the only line of code i have in

my app.js that means that everything is

correct and we can move on to our next

topic and why don't we start

the express tutorial part by setting up

the server one more time with

straight up http module

and in a process let's struggle a little

bit

let's see why we would want to use

express e in the first place

so yes we'll build one more time server

with http module however now of course

we'll dive deep into the topics that we

kind of skipped over before

and in order to set up the server we

know that we would need to require the

module right so i'm going to come up

with some kind of variable and in my

case that is going to be http and of

course the name is not required you can

call this whatever you'd want but it is

somewhat off a convention to call this

hdp as far as the variable name then we

go with require and we just go with http

again keep in mind

this comes built in node

so you don't have to install it we

didn't install when we ran npm installed

in last video

we installed two other dependencies but

this one is built in so we don't have to

do anything we just say require and it's

always going to be available to us

then we need to set up the server and

again convention is calling the server

but you can call this box bunny and in

order to do that we go with http and

then on this object we have a method by

the name of create server now this

method

takes a callback which is going to be

invoked every time the user

hits our server and in this callback we

have two parameters and again we can

call them whatever we would want so

again common convention is just shorten

this up a little bit and call it request

and res so rec and res and the first

parameter references the request object

and second one is the response object

and at this point it should be clear why

we have access to those two parameters

because

in the http cycle we have request

message

that is coming in every time user

requests the resource and also we have

the response message right so that's

what we need to send out so that's why

in this function

that runs every time user hits the

server

we have access to rec

and res

so that way we can find info about the

incoming request because it makes a

total sense if we have access to that

info

i do want to know what is the method so

what the user is trying to do i do want

to know what resource the user is trying

to get

whether that is the contact page or

about page and also i would want to know

whether i'm getting some data

whether user is trying to add something

onto the server and as far as the

response well in order to

serve the data

i need to be extremely specific about

what i'm sending so i need to explain to

the browser what is coming in hopefully

that is clear and in here we can just go

with log

and we'll say user hit the

server and then we return the object

from this create server and on that

object we have a method by the name of

listen so in order for the server to

work we need to invoke listen and we

need to be a bit more specific and we

need to say well what port are we

listening for and you're probably

wondering well what's up with this port

what's up with this 5000 value

and the best explanation i can give you

is this one imagine scenario where you

have some kind of issue with your bank

what do you do or that could be a phone

company it doesn't really matter but i'm

just going to give you a bank example

what do you do you call the customer

service and what is the first question

that they ask you

they say

please describe your issue

so we may better assist with your call

and what do they do they give you

options right so they say if you want to

increase your credit limit this is going

to be option number one all the way to

canceling the account which maybe is

going to be option number eight so they

don't just randomly assist you a person

they say hey what is the issue

and this is the person that can serve

you the best so if you press 8

you can assume that you're probably

going to be speaking with someone who

deals with that all the time

and same goes here so if you go online

and if you search for port this is just

going to be a communication endpoint

and we need to understand that for http

traffic we have specific ports

so for http we actually have port 80

because there's other ports as well if

you keep on scrolling here and by the

way this is wikipedia example we have

port 20 which is for

file transfer protocol so this is going

to be for data transfer then we have

port 22

for secure shell so http traffic

is only one of the things

that we set up on a server and once our

application is in deployment we have

specific ports for that we have 80

that is going to be for just http and we

also have 443 which is going to be 40

secure communication that's why

when you go to course api or any other

website that uses https you'll notice

that

there is a ip address and then more

specifically 443 and you can also think

of this as a apartment building

so every apartment building has the same

exact address right but the apartments

differ

so the same works here so on that server

if i want to access it using ssh so

secure shell i'm going to use

port 22 but then if for example

i want to use http protocol and if i

want to access resource that way then

i'm going to use port 443 so once your

server is already in production yes

these ports are not random there are

specific ports for specific things we

would want to do again back to our bank

example if i want to cancel the account

then i'm always going to be directed to

that person because i'm going to click

option number eight if i want to

increase the limit then of course i'm

going to be directed to a different

person now while we're in development

this is really arbitrary

i can go here with five thousand i can

go here with three thousand eight

thousand wherever you would want i

believe the ports between zero and

thousand twenty four

are already taken so you shouldn't be

using them but in local development

again this is an arbitrary number and

that's why you can use anything you

would want

and again the most common example create

react app where we spin up the server on

localhost 3000 then gatsby has i believe

eight thousand and then netlify cli has

8080 and i can go on and on and on so in

my case i just went with 5000 but if you

don't like this number just use a

different port but of course please

remember the actual value for the port

because you'll need it once you need to

access now if you're wondering well what

happens once we deploy our application

just put the pin on that and once we get

to deployment of course i'm going to

cover how actually we set it up that we

serve that traffic

on the

port 80 for example for http or 443 for

https

and now of course we can go and test it

out so let me navigate to my browser

and i'm just going to go with localhost

and eight thousand and or i'm sorry i

just said five thousand and for some

reason i went to eight which is gonna be

the gatsby one and you'll see this

interesting spinner

so what's happening over here well the

thing is yeah the user hit the server as

you can see user hit the server that is

what i see in the terminal however

remember

we have the response right so we have

access to the response object and now we

need to send back some info to the

browser otherwise the browser is like

okay

so i hit this resource but nothing is

happening

and there's a method that we always

always need to include

in our response and the method name is

and and i right away went to node docs

of course again if you want to navigate

there yourself please do so but i

already right away went for response dot

end and as you can see this method

signals to the server that all the

response headers and body have been sent

and as a side note we'll do the headers

in the next video because this one is

already getting quite long

that server should consider this message

complete the method response and

must be called on each response

so

for the browser not to be confused we

need to go with res that end so res dot

and that is one of the methods that is

available on this response object and

here we can either pass the text or we

can set up for example html and in this

case i'm just going to say home page

that's it i'll just pass in the string

and if we were to go back to localhost

5000 there it is now we have our

homepage response and we can clearly see

that in our terminal because every time

you refresh the browser you'll have this

console log in a terminal user hit the

service

hopefully everything is clear again we

have access to http module and that is

built in node and we just set it up some

kind of variable most common convention

is calling this http then on there we

have create server method that takes in

the callback which is going to be

invoked every time the user hits the

server and as parameters we have a

request

and response object and common

convention

is just calling the american res now of

course you can call this stockhold

burrito if you want but again common

convention is calling this iraq and res

and the reason why we have access to

those objects

is because in the http cycle

that's what happens we have a request

message that is coming in where we can

find a bunch of useful info about the

request that is coming in and then of

course we need to respond to the browser

in a meaningful manner so that's why we

also have the response object and in

every response we should always have end

which is going to signal that the

communication is over and then we just

need to set up the port and again in

development we just come up with

arbitrary numbers and in my case we go

with 5000 and we pass in that port

in the dot listen method which is

available when we invoke create server

because we get back the object hopefully

the basics are clear and now we can

start expanding on our knowledge all

right we're done with the basics but

there are two major issues with our

current setup first of all we don't

provide any info about the data that

we're sending back

so we don't have any metadata about the

body that we're sending out so we're not

providing any information we just go

rest that end and then pass in the

string so that's issue number one and

then issue number two

if i were to go

to the local host 5000 and if i type

about

or if i type contact or whatever you'll

see that of course we're sending back

the same response each and every time so

if we go with contact again this is

going to be a home page so why don't we

deal with issue number one first

where we provide more info to the

browser of what we're actually sending

back

and then in the next video we'll deal

with the request

and the way we provide more info we just

need to add

more methods now specifically one more

method and that is going to be res dot

write head

and in there you can probably already

guess that we're just providing headers

so we're providing metadata about our

response and we go here with res dot

and then we go with right

head so right head and then we need to

provide a few things we start with a

status code and i'll talk about the

status code in a second and for time

being i'll just pass in 200 which just

means that the request was successful

and then we pass in the headers

and one of the most common headers is

the content type

so this is where i specifically say to

the browser hey listen i'm sending back

html or i'm sending back css so where

i'm sending back the image so browser

knows

well what to do how to render that

content and like i mentioned already

previously this is done using key value

pairs so we go with content type so

that's the name of the header and then

we pass in text

and then if for example i want to pass

in the html i go with text

forward slash and then html and now of

course in this case where i have the

res.end i can set up the html so for

example i could go with heading 1

and i'll say

homepage same deal home page now if you

want you can keep it this way where you

have res that end and you directly pass

in the html however i like to use better

this approach where i go with res dot

write and we do the same thing we pass

in essentially the body and i set up my

html here in the right or any content

that i'm sending back and then

explicitly call res.n again if you want

you can pass this heading 1 into the end

just make sure that you have the end and

you saw that in a docs where it says if

data is specified in a similar effect to

calling response.write and then we pass

in the data followed by res.n but you

always always need to call res.n so this

is really up to you if you want you can

pass this directly into res.n

i like to write it a bit explicitly

where i say res.right so that is my body

and then i just end the communication by

calling

res.n and now of course

if i go back to the browser again i'll

still have the same issue where it's

going to be displayed for every request

meaning either contact page homepage or

whatever but now i provide way more

useful info to the browser where browser

knows hey i'm getting back the html so

i'll need to render html

and this stuff matters so let me show

you if i change the content type back

for example to plain

and if i save and if you refresh now

notice this is now treated as a text

it's not treated as html so whatever you

set up over here in the content type yes

it does matter now express takes care of

that so we won't have to do that but i

just want to let you know that if you

will be setting up the headers yourself

yes the stuff that you type here matters

and as the note it is also called mime

type or you can think of it as media

type so whatever we're sending back and

now let's go over the status codes as

well as other options for mime types and

this is where i would like to introduce

an awesome resource for anything http

related and that is going to be no other

than the mozilla docs so if you go to

http and status codes you'll see

probably the first link is going to be

to the mdn

and as you can see http response status

codes indicate whether specific http

request has been successfully completed

and like i mentioned before there are

quite a few groups over here and there

are quite a few codes but i would

strongly discourage you from spending

your weekend on memorizing the codes as

we're going to be progressing with the

course as we're going to be creating

more complex applications of course

we'll introduce more and more status

codes but the main idea is following

where

when we send back the response

i'm just saying is it successful

maybe the resource wasn't available so

then i sent back 404 or maybe there was

a bad request that's why there's also

option 400 and hopefully you get an idea

where we are setting up that status code

so the browser knows what is happening

with the request was it successful

was there an error maybe i don't know

you're not authorized to access it and

on and on and on and if you keep on

scrolling notice so the 100 ones are

going to be informational responses then

for successful one we have 200

so that probably is going to be the one

that you'll use the most so that means

that request has succeeded then we have

201 also something that we'll use

throughout the course a lot and this one

is

once the post request is successful so

if you add the resource successfully

onto the server then you just send back

to one

we have 300s for redirect and then these

are the ones that you probably don't

want to get

if you are surfing the web so 400 is for

bad requests

so for example you are requesting some

kind of data or you're trying to do

something on the server but you don't

provide the info

so i don't know i'm trying to add the

user but i don't provide the username

something along those lines then 401 is

for unauthorized then 403 forbidden and

404 not found so in our case we'll set

up a response if the user is trying to

access the resource that does not exist

so hopefully it is clear that is the

status code again

i wouldn't suggest memorizing it as we

are moving along with the course of

course we'll cover more status codes

just understand the main idea

where you attach that status code to let

the browser know hey what's happening

and it is very important that you use

the correct status codes because

we are in charge here nothing stops me

from sending back the 404 here meaning

the resource is not found

and then when you

navigate to the contact page for example

here and if you inspect again the

browser network tab you'll see this

confusion info where 404

is technically not found

right but at the same time we are

sending back the correct resource so yes

whatever we type as far as the status

code it does matter it's not just some

random info and that just reflects what

is happening with the request and then

lastly let's talk about mime types same

deal just go to your favorite search

engine and just type mime

and types and again i suggest using the

mdn

and these are just going to be media

types so whatever we're sending back

there's quite a few out there now again

express takes care of that

so we don't need to worry about it but

if you ever need to set it up i don't

suggest memorizing them

the ones that you'll need to use

you'll pretty much be able to google it

right away you can also use the npm

packages so no you don't need to go and

memorize them again just remember the

main idea where you're sending back

something right and you need to describe

to the browser well what are you sending

back

are you sending back the image are you

sending back css are you sending back

the html and as you saw in a previous

example

if you change that mime type if you

change that content type header yes the

browser will interpret that differently

and once we successfully have set up

more proper response now let's start

dealing with the request object

beautiful and with our basic headers in

place now let's deal with the request

object

and like i already previously mentioned

it's just a giant object and if of

course we can slog it

then we'll see it in a terminal so i'm

going to go back to my localhost 5000

and as i said note this is getting quite

busy so i can just remove some of the

tabs and if i just refresh the browser i

should see in a terminal a giant object

so what are we looking for

well let's go back to our slide

and remember the start line

we had a method

so that signals what the user is trying

to do either get the resource post a

resource or whatever and then we have

the url

now in order to save us a little bit of

time i won't cover the methods with http

we'll just deal with the url but we will

cover of course methods once we hit the

express for now i'm just going to assume

that the only thing that the users are

trying to do they just want to get the

resources from our server so that's why

we won't look for the method just keep

in mind that yes of course those methods

are available on this request object

there is a property by the name of i

believe it was just simply a method so

if we cancel log

and if i refresh notice here in a

terminal it says get

so the user is performing a get request

so the user is trying to get the

resource so that's one thing that we

could take a look at and the other one

is actually the url so let me uncomment

this one and i'm looking for the url

property

and again i refresh and now in the

console i should have this

forward slash contact so that just means

that the user is trying to access the

resource by the name of contact and if

of course the resource is there awesome

we send something back if not then most

likely would send back the 404 now if i

delete that contact and if i simply go

with 5000 notice i'm going to have the

forward slash so again this just signals

that we're getting the home page so

forward slash is going to be the home

page and then whatever other resource we

would want we would have port slash and

then the resource now sometimes those

resources are going to be forward slash

resource name and then another forward

slash and another resource name and on

and on and on you can really type here

whatever you want so again i go with

localhost about and then info and i

don't know something john right so i can

add that here and there it is now i'm

requesting this resource and if it's not

there we send back 404 if it's there

then of course we send back the useful

info

so hopefully that is clear yes this will

just mean that it is a homepage and

whatever comes after the homepage well

that's the resource that the user is

trying to access and now of course we

can set up the if statement whereas say

yes if it is a home page please send

back

this html if it is about page then send

something else and then if

i cannot find that resource that you're

looking for then we'll send back 404.

now there's going to be a little bit of

copy and pasting just so we can save a

little bit of time we're just going to

go with if and actually we can set this

up as a property so let's go to const

url is equal to request url and then

we'll say if url is equal to forward

slash what does that mean well that

means that it is a homepage so let's

grab these three lines of code

and move them up and now of course i

want to set up else if

now i'll just set up one for the about

page so if url is equal to about page

then we'll do something else and if

none of those match well then i'll just

say

else and i'll send back 404 now i will

add some comments here

just so

we are clear on what is happening so

this is going to be about page

then this is going to be called

home page

home page

and then we're going to have the 404 so

resource not found

so again in order to save us a little

bit of time let's just copy and paste

one and two and again content type will

be exactly the same so that is going to

be html because we'll send back the html

i'll say about

and i don't know page let's call that

and then last one is going to be the 404

so in here of course we're not going to

send back 200. 200 is for successful

request

now of course i want to say hey listen

the resource that you're trying to

access well it doesn't exist on my

server so here i go with 404 and again i

go with the same content type text html

and then let's just send back the

heading 1 with page

not found so save this one

and now of course once i refresh check

it out i get this page not found why

well because there is no resource

forward slash about info and john

but if i go to just about

there it is now of course i have my

about page and then if i go back to the

homepage of course i have heading 1 with

a home page now we optionally if we want

we can

add the status text as well and in order

to see that let's just go back to the

node docs so this is going to be the

http

and of course i'm looking for right head

and we have a right head here notice we

have status code optionally we can pass

in status message and then we have the

headers so again let's go back to our

slide

this is the most important one status

code and then the status text

essentially is just going to be added in

this case we don't need to do anything

because again if we were to go back to

the browser network tab

and if we take a look at our localhost

there is first of all this is forward

slash that just means that we're going

to the homepage and the status code is

200 and then we have this status text

now again if i navigate to a page that

doesn't exist for example john then of

course i'm going to get the 404 so

that's the status code and then the

status text is not found

so hopefully it is clear

now we have a bit more

meaningful server where we have

multiple resources we have home page we

have the about page

and also we have the error page and with

this in place now of course we can start

working on more complex setup

nice and with our most basic example in

place now i'm going to start throwing

mine grenades at you first of all i want

to let you know that of course we're not

limited to passing in the html directly

into the dot right or that end meaning

imagine if you would have to every time

just set it up or your html in methods

directly of course what we can do

instead

is set up the file

then require the file using the file

system and then just pass it in now keep

in mind one thing though where we will

be passing in the

contents of the file not the file itself

and that's very important we'll be

passing in the contents of the file so

that means we still need to use this

content type just because we're going to

be getting the data from the html file

doesn't really mean anything

yes it's nice it's going to make our

lives easier if you want to set up a

more meaningful web page but we still

need to set up the content type now this

is going to be a temporary file because

in the next video we'll cover a more

serious example and i already prepared

all the files for you so this is where

we'll really struggle and this is where

i'll show you why we use the express but

for now if you want to follow along

just create a simple

index html or about html doesn't really

matter how you call the file

in the folder again this is really

optional i'm going to go with new file

and i'm gonna call this index html and

again the whole reason why i'm doing

that because i wanna set up a more

proper page and i don't wanna type

everything here in the right or end i

mean it's much more nicer here right so

i'm just going to go with emma setup in

visual studio code i get my basics and i

can say

home page home page

and then i'm just going to go with a

heading 4 of hello world again this is

just a showcase that sky is the limit

just like you normally would set up to

html you can do exactly the same thing

and then i'm going to go back to app.js

and first of all i'm going to get the

read file so i'm gonna go with const and

then read file and sync and i'm gonna

talk about why i'm using this thing in a

second so don't freak out i know i

mentioned before that we need to be

mindful

of the methods that we use

that there is a difference between the

blocking and non-blocking and i'm just

going to go with fs over here

and we need to come up with some kind of

name and again in the next video there's

going to be

more data here so that's why i'll say

get

all files

for time being in this video i'll just

get one and i'm going to call this home

page again

call it whatever you would want you can

call this bobby lee doesn't really

matter it's just a variable and we're

going to go with read file and sync and

of course where's the file it is in the

same folder so we go with relative path

and i'm just going to call this index

html now again we're getting the

contents

now

why i'm using here they read file sync

well there's two reasons first of all we

need to keep in mind that we're not

invoking this

every time someone comes to the server

please keep in mind that we require that

file

when we instantiate our server

so basically that initial time

when the server starts running so it's

not like when the request comes in then

again every time we're requesting the

file yes of course if i were to place

this in the if block yeah that's a

different scenario meaning if i were to

even place this in a create server again

same scenario but not in here again

we're just requesting this once that's

the first reason why i went with that

and second it's just an example so i

want to make my life a little bit easier

what i want to focus on is something

else with this home page in place now of

course what i would want is to go back

to my if where i'm checking for the

homepage and instead of going with

res.right and then typing it out i'm

just going to go with our content now

again we're still keeping this one the

text.html and i'll show you in a second

what happens if we change it to a text

plane and now we go with a homepage

and now be prepared to be amazed because

if i go to not john

my resource of course doesn't exist

there it is check it out we have home

page as well as the hello world

so we can start making some meaningful

html pages and we can serve them with

our awesome server and just to

re-emphasize my point

if we change this to a plane and save

and refresh

now of course we're getting a text so

yes it is very important

of what content type we are setting up

so let's go back to html and now of

course we are in good shape awesome we

have our homepage and now of course i

can go to index.html and go wild and

crazy

with my page setup

not bad not bad now we know that we can

access the contents of the file directly

so of course we can set up proper pages

but now let me throw you a mine grenade

where we'll have to add way more code

here

if we want to really serve some

meaningful web page

and the example is going to be following

if you navigate to navbar app so that's

the folder you'll find index.html

you'll find style css logo svg as well

as browser hyphen app.js and i simply

call this browser app file so you're not

confused between the two so this is

going to be for our server and this is

our browser app and effectively this is

a complete app that we set up i believe

in my javascript course when we were

building projects so effectively this is

a little navbar with a toggle

functionality and let me assure you

something right from the get go the app

works

so if you get any issues along the way

it's because the node is not working

the app itself is going to work and i

can simply showcase that if i go to

navbar app and i'm going to copy that

one and i'll place it

on my desktop

and then if you spin up the index html

i can guarantee you that this is going

to work there it is that's my

application

and i can make it smaller and there it

is now i'm toggling again our goal is

following

i want to take this project index.html

with style css logo as well as the

javascript file

so the html structure

the

styling the logo that you can see over

here as well as the logic i want to take

all of it and serve it on my server

and i know that the app works so all

that is good so let's see what struggles

we're going to have along the way so

here i have the home page right

and instead of getting it from the

index.html which by the way i'm going to

delete because again this was just

temporary now of course i would want to

access this one

from the navbar app that's the folder

name right and then i'm looking for the

index html and i simply just need to

change my path where instead of getting

it index html from the root which

doesn't exist anymore i'm going to go to

navbar hyphen app

and then of course i still get the

homepage

and as you can see i'm still serving

also the contents from that index.html

the only thing i did

is just change the path that's it

and technically we should see exactly

the same right

but

here's the kicker we navigate here and

if i refresh

what is happening

i don't have the logo

i don't have the button

i mean i do have the button but it

doesn't do anything and i can see only

the structure

and we have quite a few 404s here

and actually to give you a good idea why

is this happening

i want to navigate back to our project

and let's just console log

the urls

and i think this is going to give you a

clear message why this is happening so

let me go back and i'm just going to

refresh one more time

and check it out so we're requesting the

homepage so that makes sense right so i

come here i request the home page and i

serve this html file

from the navbar app

and then i have three more requests

i have one for styles one for browser

and one for logo now why is that

happening well because in my index html

if you check it out

of course i do reference the style css

because i want to add the styling right

i do reference the logo

because the logo is right here in my

folder

and also of course i do have the one for

the app right the one where i have my

logic

so this is what happens we send back

the initial

html content and the browser starts

reading the content

and every time we have basically a path

to our server browser is like hey server

give me this resource so give me style

css give me logo svg as well as whatever

we have here the browser app right so

keep in mind that these ones are for

icons

and actually they are external so this

one goes to phantasm that's a little bit

different scenario yes the browser still

performs this request but of course this

is external resource

now these ones are on our server but the

problem is following

are we handling these requests

in our create server

and of course the answer is no we handle

forward slash we handle about and then

for everything else we have this 404

so to answer your question yes

now manually we'll have to request

all the files so lower svg style css as

well as the browser app

assign them to some kind of variable and

set up these paths again this is just an

example if you don't want to follow

along if you just want to see how it's

going to work

just sit back and relax

but in my case i'm going to request

all these resources here

and then set up more else if statements

where if the browser wants to get the

css then of course we'll search css if

the browser wants to have logo then of

course the browser is going to get local

and again if you take a look here in the

elements you'll again see exactly why

because we have our html structure and

then there it is we have style css so

notice how browser is going to http

localhost 5000 forward slash what well

style css right well do we have that

path and again the answer is no so let's

do this way i'm going to copy and paste

and i'm just going to come up with

different names here i'm going to say

home styles

and then the third one i guess is going

to be home image

and then the fourth one will be home

logic so that is going to be my app one

then we'll have to change some files

here as well so i'm looking for styles

css i believe right

that's the file name then i have logo

svg

that's where my logo is sitting so logo

svg and then finally let's just delete

this one as well and call this browser

hyphen app

and js so home styles home image and

logic and like i said yes manually one

by one we'll have to add all these

resources so instead of about page

i'll just call this styles and the value

that i want to check for here is exactly

the same like in my browser so they need

to match so then of course the browser

will get the contents

of the css file in this example so i'm

going to go with styles and then css

now i do want to change right now the

content type because am i sending back

the html of course the answer is no

we're sending back the css so we go text

css now let me say this one more time

please don't zero in on these mime types

if you will ever need them you'll be

able to find them within a matter of

seconds just

type along with me and we're going to be

in good shape now as far as the right

in our body so in our response that

we're sending back are we going to send

back html of course the answer is no now

of course i want to send the styles

right and the variable for that is home

styles so that's where

my content is for the styles css and

once i save check it out

now we are moving along in the right

direction because i do have the styles

so it looks already somewhat decent now

the logo is still missing and there's no

logic because i don't have the app.js or

the logo svg but we are moving in the

right direction so copy and paste and

you can probably already guess that

we'll just repeat over here we'll say if

the url is equal to logo svg and i'll

say

image logo as far as the comment

and we're just going to go with logo

and 3g and as far as the mime type for

this sucker it is image

image forward slash svg and plus

xml like so

and let's go with home

and i believe i named this home and

image like so

and then the last one of course

is going to be our javascript so

let's say here logic

and the resource that i would want to

provide is browser app

js like so

and then

the content type is equal to text

and then javascript

and of course now i would want to send

the home and logic

so let's save this one

and now if i go to my browser

and if i refresh

check it out now of course we have

everything we have the logo as well as

the proper functionality with browser

app and notice how

all our requests are 200 instead of 404

where the previously browser wasn't able

to find those resources and now of

course we are providing them and if we

want to test out the functionality there

it is

now i can just go here and notice how i

can toggle the menu as well and now of

course we'll switch gears and start

working with express because hopefully

it's clear that yes we can

set up our server with just http module

but imagine a scenario where you have a

website with tons of resources

and then of course you need to set up

every single resource in this matter now

i don't know about you

but i would go nuts somewhat quickly

all right and once we have struggled a

bit

now let's make our lives easier by

getting to know express js

express is a minimal and flexible

node.js

web app framework designed to make

developing websites web apps and apis

much faster and easier if i have to be

honest it's almost unfair how easy and

fast it is to spin up the api with the

help of express

and while it's not officially part of

node meaning unlike http module express

is not one of the built-in modules at

this point in time express is pretty

much a standard when creating web

applications with node.js express has

awesome documentation which we will

reference from time to time and you can

find the docs at expressjs.com

again the site is expressjs.com

and as far as the install you simply

need to run the command of npm install

and the package name is express

now they do suggest this hyphen hyphen

save flag

and effectively the reason why they do

that is because in the earlier node

versions

if you did not add this flag

then package wasn't saved to the package

json

meaning when you push this up to the

github the next person who was getting

your project well he or she

did not have the reference for the

package so of course that caused the

errors now currently that issue is fixed

so this is just a good precaution

but technically you shouldn't have any

issues if you don't run the command

again nothing bad is going to happen if

you add this dash save but technically

these days you can skip it so just grab

the command like so

and just navigate back to the project

just keep in mind that of course i

already installed the express

for the express tutorial this is just

for your own project if you want to

install the express if you set up your

own package.json and all that if you

want to install the express just run

this command now one thing that i would

like to mention though is that i'm using

version 4.17

so maybe by the time you're watching

this

they already have a version 5. now at

the moment version 5 is in alpha meaning

they're still testing everything but

maybe by the time you're watching this

this is already stable now if that is

the case when you run npm install on

express of course you'll get the latest

version so your version is not going to

be this 4.17 now i wouldn't worry if

it's for example four point i don't know

24 but if it's five there might be some

breaking changes and at that point you

have two options if that is the case if

the version is already five then you can

either

reference the api docs for yourself

meaning you can take a look at the

methods and all that what the version

five provides or

if you want to use

all the methods and properties that we

use in tutorial simply install the same

version how you can do that well

you just need to go to npm install

express so this stays the same and again

you can remove it you can leave the dash

dash save doesn't really matter and

after express you go with add and four

and then again i'm gonna go with the

same one just keep in mind as long as

you have four you're not gonna have any

issues and then one so this is going to

install express

with this specific version hopefully

everything is clear and now let's get to

know express all right and once we have

covered the express library basics now

of course let's spin the sucker up and

see how we can make a server

way easier and with way less headache

and i'm going to start by removing all

the code in my app.js just keep in mind

that if you ever need a reference

go to the final one and then of course

http basics is going to be where we set

up the basic http server and then for

example

the http app example is going to be in

the file number two

and the way we work with express

we start by setting up some kind of

variable and of course we'll have to use

the require so we go with require and

then we're looking for express library

again we can do that because we have

installed the library

but if you haven't then of course you'll

get the error keep that in mind and then

we go with const and then app is equal

to express to whatever we imported and

then we invoke it now

if you're a bit iffy about this syntax

just keep in mind that it is very

similar to our previous example where we

went with http

then created the server and

as a result we had our

server instance correct so this is

similar we're getting a function back

from express and we just invoke it and

we right away have our server instance

with bunch of cool methods now what

you'll also see

on a web is something like this where

since this is a function we can invoke

it right away

and then just call this one app

again

this is really your preference but

mostly you'll see the first option where

we first import the module and only then

we invoke it

so once we have this setup then of

course we have a object with bunch of

useful methods

now the methods that we'll use the most

are following amp.get and i'll just copy

and paste here

and i'll just change it around a little

bit post

and put

as well as delete

and also there's going to be all

use

and a listen now listen

we already covered before in the http

module and this one is pretty much the

same where we just go with

app.listen and then we just say what

port we're going to be listening on so

in this case of course this is going to

be 5000 and then we pass in the callback

function so when we instantiate that

server we will run this function and a

common convention is just setting up a

console log where we say that yeah the

server is listening on port such and

such now for time being we're hard

coding this value later i'll show you

how we can make this one dynamic so for

now i'll just say console log and then

server

is listening

on port and then we go 5 000. so let's

save this one and i'll run my npm start

and i should see in a console server is

running or listening on port 5000

awesome so what about the other methods

and the first four methods here just

represent http verbs

now if you remember

when we talked about the http request

and response messages

well one of the things that we're

looking for in the request message was

the http verb

and yes

i set up some more meaningful examples

where we'll see all of them in action

for now just remember two things first

this just represents

what the user is trying to do

whether read the data insert data update

data or delete data

and by default all browsers perform

a get request

so that's why we have here amp.get that

post put and delete now all

just works with all of them and we'll

see that in a second when we set up the

404 page so essentially a response if we

cannot find the resource on a server and

app.use is responsible for middleware

and since it's such a crucial part of

express of course i prepared more

examples on that where we cover

everything from the scratch so for now

just remember this is middleware but

don't lose your sleep over it we'll

cover it a little bit later in the

course so we have app.listen beautiful

we're listening on port 5000 but since i

know that all the browsers are

performing a get request i simply go

with app dot get

and then i need to specifically add two

things a path so what resource the user

is trying to access and it would make

sense if we would start with root

correct and then the second thing

is the callback function so this

callback function will be invoked every

time

user is performing a get request

on our route so basically on our domain

and then this callback function gets the

same two arguments we go with request

as well as the response so this is going

to deal with incoming request message

and then this is going to deal with our

response and in express we go with res

and then the method name is send so in

here we can pass the string we can pass

in the html and i'm just going to simply

start with home

and page so we save this one

and now of course i'm going to navigate

to my browser i'm going to say localhost

and then 5000 and there it is now we

should

have homepage if you don't again please

troubleshoot because otherwise it's not

going to make sense

what we are about to do next but if you

see the home page you are in good shape

so we're listening for get request on

our route and then every time the user

navigates to the root then of course we

just send back the homepage now if you

want you can of course go to log

and user hit

the resource or something like that

doesn't really matter and then if you go

back to the browser and if you refresh

there it is we have user hit the

resource awesome

and just like in our previous example

the basics one let's set up the about

page as well as the 404

so i'm going to go back to my app js

and right above the app that listen i'm

going to go with another app that get

and in this case i'm looking for about

so that's the resource and of course in

here again we have rec and res

and then as far as the response well

i'll cheat a little bit and i'll just

say res.send

and we're going to go with about page

and then of course i would want to

handle the 404 as well

so if the user

comes to my server and tries to access a

resource that doesn't exist well what am

i going to send back

and we can take a look at the default

one so if i'm going to go with about i

should

see the about page but if i go with for

example a contact page let's see what

the express is doing and in this case i

have cannot get the contact and if i

inspect i can clearly see

that in my network tab i have contact

and this is a404 so that's going to be

the default response now

i can alter this of course and i can set

up my own 404 response so i'm going to

go with app and this is the case where

i'm going to use all methods because

again

user can do multiple things on a server

and i want to cover them all

not just getting the resource or

inserting the resource or whatever i

want to cover them all so that's why i'm

going to use my own method again this

just handles all http verbs whether get

post or whatever and again this method

takes two arguments first one is going

to be the path and the second one is

going to be a callback function and as

far as the path i can say all of them

so whatever resource you're trying to

access the response is going to be

exactly the same if i cannot find the

resource

then i'll just send back this response

so again i have a callback function rec

and res in here and then we're going to

go with res dot send and just like in

our http example i'm gonna go with

heading one

and we'll say resource

not found

and let's close the heading one but of

course i also would want to add the

status right so that would make sense i

don't want to send back 200. that would

be very confusing

so before we invoke send method i can

also add status here and as you can see

i can chain it so i have res not status

so this is where i'll pass in my status

code and then i go with send so in our

not found example of course i would want

to pass in the status code of 404 that

is going to be more correct and the same

goes here technically we can rely on

express

and it does a decent job of adding those

status codes but a more common approach

is explicitly setting up the status code

so that way you have more control of

what is sent back to the browser so in

here i go with res and that send but

before i set up that method

i

set up a status one first and i go with

200 so this just means that the request

was successful so similarly i'll do that

in the about where i go with status we

pass in the 200 and then we set up a

chained send so now if i go back to my

browser and if i refresh now of course i

have resource not found that is my

heading 1 and i can clearly see my 404

and if for example i'm looking for about

there it is i have my about page as well

as the homepage so if we go to localhost

and 5000 that's going to be our route

that is going to be our homepage all

right and we're done with our basic

example hopefully you can see that it is

already way less code

than just using the built-in http module

and in the next example you'll see how

express truly shines when it comes to

setting up a server beautiful we're done

with our basic example now let's tackle

the big beast our navbar app

and the setup for the following examples

is really up to you if you're not a fan

of retyping

something you have already learned you

don't have to do that you can just

remove app.get

all the way to app.all so basically

leave the import as well as

instantiation and

listen as well however i am a fan

of

repeating something because that way

whenever i need to create something from

scratch i already have done it quite a

few times so i don't have that blank

page syndrome where you're like looking

at the empty file and you don't know

what to do so in my case i'm going to

remove everything and we'll start from

the scratch so const express is equal to

require and of course we're looking for

express

and then i'm going to set up my app that

is equal to express we invoke it and

again we go with app.listen

and we're going to go with 5000. now i'm

not saying that i'm going to do that for

every example

but i'm just showcasing what is in my

approach when i'm starting something new

so when i'm learning something new yes i

do like to retype some of the stuff

quite a few times because

that just makes sure that i remember it

better and in here i'm going to go with

server here's listening

on port and we go with

5000 and then dot and in order to set

everything up we're going to go with

app.get so again i'm looking for the

root and of course i would want to start

with my index html correct that's the

start

and we go with app.get so we're

listening for all the incoming requests

that go to our route

and of course we're specifically

listening for get requests then we have

our callback function rack and res

and we'll set up the functionality in a

second before we do anything let's also

set up all

and this is of course going to be for

all the requests

that will hit 404 so we're going to go

with rack and res

and here let's say res and then status

so let's add here a 200 or i'm sorry

four four my bad and then we're gonna go

with send

and instead of the send let's just go

with the resource

not found

now when it comes to get

in this case i would want to send the

file more specifically i would want to

send back the index.html

and in order to do that i need to use

send file method that comes with express

now in there though i do need to provide

a absolute path so we'll have to use one

of the modules we covered before and

that is going to be a path module so i

go with const path is equal to require

and i'm looking for path module again we

don't have to install it comes

preinstalled with node so we are in good

shape and then where we have our

callback function we go with res

and send file method and here let's pass

in path and then resolve so path dot

resolve remember that was one of the

methods we cover

and effectively i would want to pass in

the dirt name

so this is going to be path to our

directory because we do need to provide

that absolute path and then of course

we're looking for our index.html which

is sitting in the navbar app so forward

slash and then navbar

hyphen app and then we have another

forward slash index html now if i have

to be perfectly honest in this case we

can also use path dot join it doesn't

really matter since their name provides

that absolute path but just to be a bit

explicit that we are providing

absolute path i went with path dot

resolve and then the their name and then

whatever is the path to my index html

and the moment we save it

we'll have the same errors

just like in the http module so i go to

my localhost 5000 and i still have the

same issues i still don't have style css

there's no sign of browser app as well

as the logo

now in express though we don't have to

do this whole song and dance

like in http module

in express i can simply go above all my

app.gets and amp.alls and i can go with

app

dot use and this is going to be the case

where i'll type out the code and then

i'll explain everything that is

happening and we'll pass in the express

so

this is what we're importing so this is

not going to be our server instance

instead we're going to go with express

and then static that's the method and in

here again we just need to provide a

path now common name is setting this up

as the folder by the name of public

please keep in mind technically you

don't have to do that you can just point

to our navbar app but in my case i will

do that i will set up here

dot forward slash and i'll call this

public so now of course what i need is

to set up a folder by the name of public

and then

all my static resources all my static

files i would want to transfer there now

don't worry about it i'll cover in

length

what in a server land means static

resources for now what i would want you

to do is go back to our folder

and that is going to be express tutorial

and of course you can do that in visual

studio code i just think that this is

going to be a bit easier to see so i'm

going to create a new folder again

common convention is calling this public

but you can call it whatever lobster it

doesn't really matter and then in my

case i'm just going to copy these files

so take browser app take logo and take

styles if you want you can move them

just remember that the previous code is

not going to work as far as the http

module setup so i'm going to copy these

ones

and paste it here in my public so now of

course i have browser app logo svg and

style css

so

of course now i can zoom out and once i

save

check it out

when we navigate to our route there it

is this is our application and what's

really cool all those resources are

right away available so if i go to my

localhost 5000 remember browser was

looking for what well it was looking for

example for style css if you go here

there is a resource by the name of style

css and of course in here i have all my

css code and notice how

we didn't have to set up the statuses we

didn't have to set up the content types

or any of that express takes care of it

all now of course you probably at this

point have more questions than answers

so let me start clearing them up and

first i'm just going to add a comment of

setup

static

and middleware middleware

and like i mentioned app.use is for

setting up the middleware and we have

more serious examples coming up

so for time being please don't worry

about this line okay so please don't

worry about app.use what is express

static that is essentially a built in

middleware i will cover everything step

by step

in this video i would want you to

understand what the term static asset

means

and it simply means

that it is a file that server doesn't

have to change it so instead of our http

example where we created a path

for every such resource

and if i were to have i don't know 20

000 images

i would have to repeat the same steps

instead since this is a static asset

meaning an asset where the server

doesn't need to change it we simply

place it in designated

folder again the common name for those

folders are public or static

and then we just dump all those assets

in there so if i were to have i don't

know 20 000 extra images in here i can

just dump them

and express will take care of it all it

will set up the paths it will set up the

mime types it will set up the status

codes and all of that good stuff so

hopefully that is clear static assets

are just files that server doesn't have

to change and an example of a static

asset is an image file here's the style

file and also a javascript file and here

comes the next question

what is this guy with weird eastern

european accent talking about

because all my life i've been told

that the javascript

makes my apps dynamic

it adds all the functionality

so how come this is just another static

asset

and to answer your question yeah you're

right javascript

does make

our apps dynamic however think about it

this is a browser app so it makes

dynamic on a browser

as far as servers is concerned

it is just a asset doesn't need to

change

now if you're wondering well how to set

up something dynamic

just please put the pin on that and

we're going to cover that when we cover

server-side rendering because there is

such thing as template engines

and the simplest way for me to explain

that is imagine the scenario where you

can actually log in

or in other way just showcase whoever is

visiting the site and then dynamically i

would display for example name

so if the peter logs in then i'm sending

back the html with the text of hi peter

now if the john logs in then of course

i'm sending back the username with the

value of john so hopefully you get the

gist where in this case notice this is

just

same old index html that i'm sending

back regardless of who is visiting the

site but yes there's also an option of

setting this dynamically where depending

on who's visiting the site or what the

user is trying to do i'm actually

modifying my file before i'm sending it

back so hopefully it is clear how much

easier it is to work with express

where if we have static assets we just

set up designated folder and just dump

them all in and static asset just means

a file that server doesn't need to

change

and of course we can start working on

our next example nice hopefully we are

clear on static acids and before we

cover more complex expressed topics i

would want to throw a mine grenade at

attribute

and it goes something like this

so if we put two and two together

i talked about static assets in the

previous video

but if we're looking at the

index.html

isn't this a static asset as well

and of course the answer is yes

so instead of sending this file

we can add it to static assets and we're

going to be in good shape and if i have

to be perfectly honest with you when it

comes to

send file

if we're using it to send back for

example index html

actually we use other two methods

instead so first i'll show you the first

one where we just dump everything

as far as the static assets so i'll just

add index.html to all my static assets

in the public

and that will effectively do exactly the

same like we're doing here with send

file and the other one is going to be

using templating engine so of course

that one will cover when we go to server

set rendering so i'm just trying to

showcase that yes there is this option

of send file and we might use it from

time to time throughout the course but

not for sending back index html files so

first let me just say that the other

option one of the two other options that

we'll use the most throughout the course

is just

adding two

static

assets

like so and then the second one is going

to be server side rendering

where basically we'll use template

engine for that

so in order to set everything up now of

course i just need to take my index html

and again if you want you can just move

it

or in my case i'm just going to copy and

paste

so again i'm going to go back to my

folder

i'll zoom in massively

so you can see better so express

tutorial

there is my navbar app and i'll just

take the index.html

and i'll copy and paste and now it is in

the public

so what happens index.html

is always going to be a root

so

when the user hits the server by default

server will serve this index.html and

since our index.html basically has all

the paths to browser app to logo svg and

all that

we're going to be in good shape more

effectively we don't even need to set up

this send file option

so now of course i can just save it and

once i refresh notice how nothing

changed i'm still serving my app

so we're still in good shape and if you

take a look at the network tab notice

everything still works correctly i'm

still getting all the css all the

browser javascript functionality as well

as the logo and to answer your question

yes that is effectively how you can set

up the simple sites you can simply just

dump all your files in the public just

make sure that you serve them up

and that's it and you're in good shape

now we still have the 404 but as far as

just serving straight up sites with html

css and javascript yes you can simply

dump them into public you can simply set

up the middleware and serve all the

static assets and you're going to be in

good shape beautiful we are successfully

done with the initial express setup

and ready to cover more complex express

topics before we do that though

there's something important i want to

mention you see when it comes to express

in most cases you'll use one of the two

following options

you'll use it to set up api

or templates with server side rendering

now since term api is probably one of

the most overused terms in the community

and in various scenarios it can mean

different things let's start by

understanding that in express

or in http case

when we talk about api we mean setting

up an http interface

to interact with our data

now data is sent using json which stands

for javascript object notation and in

order to send back our response we're

going to use

res.json method which will do all the

heavy lifting like for example setting

up the proper content type and stringify

our data

the other flavor we have is server side

rendering where we will set up templates

and send back entire html and css and

javascript ourselves

and we're going to do that using

res.render method

now since i'm a big believer in actual

examples over slides if you are a bit

iffy on either of these flavors just

hold on a bit and once we cover some

examples i promise you it will all make

sense

now why am i telling you all of this you

see when it comes to more complex

express topics it only makes sense if we

cover them properly using one of these

flavors instead of just bunch of random

examples

and the option i picked is the api one

so in the following examples we're going

to construct api response using more

advanced express setups the reason why i

picked apr route is because i believe it

lets us focus more on the actual express

since templates by themselves add a bit

more unnecessary overhead especially

while we're just starting out with

express with that said let me be very

clear if you grasp the concepts with api

so using the api flavor you'll have no

problem implementing them with templates

as well since for the most part express

concept setup is exactly the same

we'll cover server side rendering later

in the course so you'll have to wait a

bit for the actual example and since

we're going to start with api let me

just stress the main point one more time

and how it looks like in a real world

so like i said the main idea with apis

is that our server provides data

and what that means that any front-end

app that wants to access it and use it

can simply perform a http request

and using our data set up the api and

functionality how does that look like in

a real world well if you navigate again

back to course api and of course not the

slides slides are just images but if you

take a look at any of these examples

you'll notice something interesting

where we're sending back the json and

you can clearly see that if you go again

to your browser's network tab and here

again let's refresh

and you'll see that this is our response

react tabs project so again the full url

is course api.com and then react tabs

project

and if we take a closer look we can see

that this is the response that we're

sending so we're sending back a

json data and i can clearly see that in

my headers so in response headers as you

can see content type is application json

now where is this data used if you took

either my react course or the vanilla

javascript course you know that in the

course

we build quite a few projects where we

practice data fetching either using

vanilla jazz or react and in some

examples we use external apis and in sum

we use the apis that are here in the

course api so for example with this

react tabs project if you navigate to

react project nutlify.app

and keep on scrolling keep on scrolling

you'll hit the tabs project and here

this is the app that we build

using the data so again on a server

i set up my data i set up the api and i

share the data so i create the http

interface and then the frontend app just

simply grabs this data and again if you

want you can check it out here if you

refresh

notice this request request goes to

course api react tabs project so we grab

the data on a front end and then we set

up the functionality as well as user

interface hopefully this is clear from

now on we are going to be responsible

for sending back the data so now since

we're setting up the server

it's not going to be our responsibility

to do something with it like we were

doing on a front-end in this case we are

responsible for setting up the responses

so we're going to be setting up apis

that our http interfaces to interact

with our data

not bad not bad i think we clearly

covered our two options so one is

sending back the json data and the

second one is server set

so why don't we start by covering the

most basic

json response

and here's what i'm trying to mimic

if you go to course api

and then if you look for the tours

project

you'll hook the url of course and here

you can see that we're getting back a

json data it is an array and each object

represents a tor and if you took my

react course you know that we were

practicing data fetching in react

and effectively we hit this url

and we got the data we got our json data

back and then we built an app

using that data

but again the whole point here is

following where it doesn't have to be

react

it can be

vanilla javascript application it can be

swelled framework it can be

any setup where you're able to fetch

that data

so in here on the server we just share

the json

so in this case of course that is stores

and then anywhere

anyone who wants to access this data

they can just access it and build

something using that data and that's why

it is so so powerful

and

essentially this is what we're going to

do we're just going to send back first

a most basic array and then we'll see

how we can make this more dynamic please

keep in mind two things first of course

eventually we'll use database for that

and of course i will mention that

probably 20 000 times as we're building

these examples

and the second thing that i would like

you to understand that when it comes to

express basics so essentially how we set

up the server

it doesn't really matter

whether we're using server side or

whether we're using json again

if we understand the principles we'll

have no problem

using any of those options so first what

i would want is to navigate back to my

project and again this is going to be

the time where i do write everything

from scratch but then starting with next

example i'll just use some options that

we already covered so for now

yes i'll remove everything and again

we'll set up express

one last time so we're gonna go with

express require

and express okay awesome then const app

is equal to require or i'm sorry not

require we need to invoke the express

like so and then let's go with

app.listen

port 5000

and then let's call our callback

function

and then let's go again with console.log

and server

is listening

on port

on port and of course the port number is

5000. then again i want to set up

app.get because that is the http method

that all browsers perform by default so

i'm going to go with app.get and i'm not

going to go with specific path just keep

in mind that you can and of course we'll

do that later for example i can go here

with api

and then i don't know i can call this

product or whatever for time being let's

just make it simple and we'll just

handle all the root requests so that way

we can save a little bit of typing in

the browser and again we have our

function our callback function rack and

res

and as far as the response we're going

to go with res

and then the method name is json

now

we will go to the docs just so you

understand where i'm getting this

information from

but before we do that let me just tell

you that i might omit here and there the

status one just so we can save a little

bit of typing but don't worry once we go

to some more serious examples of course

we'll still use the statuses because in

my opinion that is just a better

approach where we actually have control

over the status

and as far as documentation if we go

back to express documentation we're

looking for api reference again we are

using

four point something so we are using

version four so make sure you look for

the same one and don't confuse with

express json so this is going to be a

middleware that we pass in effectively

we're looking for response in a docs and

then we're looking for this json option

so res object as the json method and

what happens we send back the json

response and this method sends a

response with correct content type that

is a parameter converted to a json

string using json stringify this

parameter can be any json type including

object array string and blah blah blah

so hopefully you get the gist so the

only thing we need to do is go back and

for example i'll provide an array where

there's going to be two objects and

first one will be named john

and the second one will be susan so

another object

and we'll say name

is equal to susan and we have our most

basic api

so if i go back to my localhost 5000 and

refresh

there it is so now anywhere in the world

i can access this data

and build something using this data now

there's tiny caveat when i say anywhere

in the world there's still going to be

at the moment a course error and i'll

cover that once we actually cover

middleware so again please please please

please be patient we will get there

but hopefully you get the gist where

this serves our data and now we can just

access that data and build

the front-end app using this data now

this default setup is nice

but of course we can do something more

meaningful

where

if you take a look at the folder you'll

notice this data js now what is data.js

it is simply a file with some arrays

and the first array is going to be

products and here as you can see i have

objects and then each of these objects

represents a

single product and all the way in the

bottom we're exporting both arrays we're

exporting products

as well as the people array that we're

going to cover a bit later so now what i

would want to do is import product array

in my address

and then instead of hard coding this

value like so where i just pass in the

array with two objects i'll just dump

the whole products data so let's go with

const we already know how to do that now

since i'm exporting multiple things

since i'm exporting an object i will be

explicit of what i would want so i'm

going to go with

product

and basically i'm destructing right away

i'm going say product is equal to

require and remember

the file is data js like so

and then instead of passing array

directly i can simply go with product

and what do you know when you navigate

to the root there it is now we have more

meaningful json response where actually

this is a product data so on my front

end i can grab it and i can build some

kind of nice front end using this data

now lastly before we go let me just

showcase that of course there's going to

be a content type set up correctly as

well so if you go to network tab and

again if you refresh localhost like so

and take a look now of course what is

the content type

that is application json so now of

course we're correctly getting our json

data so hopefully you have a clear

understanding how to sound json data so

now of course let's make things a bit

more interesting and cover some more

advanced express topics nice once we're

familiar with the most basic json setup

now let's build a more meaningful api

and in a process we'll cover

route parameters as well as query string

parameters and i would want to start in

following way

where essentially i'll leave all this

code but when it comes to my route when

it comes to my home bridge i'll

essentially send back the heading 1

with the link as well and that link will

direct a user to a forward slash api and

then product

and then later we'll cover the params as

well as the query string so let's start

with sending back html instead so i'm

not going with json one and i'm not

gonna send back the file i'll go

directly and i'll say send and here we

have the string of course so i'm gonna

go with heading one

and then home

page

then i'll make sure that i close

because i believe in one of the previous

videos

i believe it was the express

basics

i think i messed it up here notice i

didn't add the closing one so now

everything is correct and now i'm gonna

go with my link

then as far as the href i'm gonna direct

a user to api

and then forward slash

and then of course

i'll also set up a text here so products

and i'll close my link so that should do

it that is my home page and of course if

i go to localhost 5000 there it is i

have my homepage and once i click the

link i navigate to api products now of

course the moment i have the

default response from the express

meaning the default 404 response where

the resource cannot be found and as i

said note if you want to take a look

what response do they send again go to

the network this is going to be very

very useful tab refresh and take a look

at their response so notice the response

that's the html that they send back so

cannot get and then api products now we

already know

why there is this get the http verb

because that's the method that the

browser performs okay awesome so now of

course our job

is to set up a

get request

for this resource so we go with app.get

and i specifically want to handle api

and product so this one just looks a

little bit

more realistic so in here i go with api

and products and keep in mind of course

those values need to match otherwise

you'll get that 404 again i have my

callback function

and now of course i would want to send

back the product however in this case

we'll make it a little bit different

where previously

notice the product we send back pretty

much the whole thing right but

a more realistic approach is following

where when you're requesting a bunch of

data so when you're requesting

collection of the data you're not always

returning everything for that one

specific product and to give you a real

world example again i'm gonna go back to

my react projects and i'm simply using

them because this gives you a visual

representation during the course we

built a e-commerce and then in the

products page notice how we're fetching

the products

but you need to keep in mind one thing

where we're only fetching about the

product the title the price the image

and i believe also the id and only when

i go to that single product page

this is where i get the rest of the data

whether

that is for example a stars the reviews

the description

the availability and all that stuff so

what i'm trying to say is when you're

requesting a collection

of data there's going to be cases where

i simply want to send back some minimal

response so for example again that could

be name image and the pricing scenario

and only if i look for this specific

product

then i send back everything

and in order to mimic that in our

example

in this response

what i'm going to do is i'm just going

to iterate over my product i'll use the

map method and i'll just remove

my description so when i'm sending back

the product it's going to be without a

description so again if we were to send

back everything i would simply go with

response json and then i pass in the

product so again if we go here and if we

refresh now everything is cool

i'm getting my product on the api

product route however

i'm going to make it a bit more

realistic and we're going to go with

const

new product is equal to

product dot map so i'm mapping over and

i'm creating a new array and i'll

reference each item as a product and

then as far as the return well first i

want to structure the properties out of

the product and the reason why i can

access them is because those are the

names that i used when i'm setting it up

so id name image and all that and that

is equal to the product again i'm just

using simple javascript structuring and

then as far as the return whatever i'm

going to return

from

my function

well that is going to be the new value

so now i'm going to go with id name as

well as the image and once i have this

setup in place instead of returning

product

now of course i'm going to go with new

products

and if i go back to my browser there it

is so now i'm getting a collection

but i'm not sending

everything that i know about this

specific item so i'm being selective of

what i'm sending back so yes

there is a resource by the name of api

product and we're sending back the array

but we know that if

the user

wants to access that description he or

she will have to look for a specific

product and in the process we'll cover

what are the url parameters all right so

we're successfully sharing a list of

items so now of course let's take a look

at how we can provide

info

about that one specific product so for

example if i navigate to

product and then forward slash and one

and then i'm going to get only the info

about this first product because it has

the id of one

and

not only i'll get

these three properties but also get the

description

and our initial approach would go

something like this

where yes i see the product okay

beautiful

and we already know how to set up the

route now since i'll delete it

eventually anyway i'm just going to copy

and paste so we can speed this up so i'm

going to go with api products and then

forward slash one

that just means that i'm going to be

looking for

item number one in here

and then instead of map we'll use the

find method

so i'm importing all my products and in

order to get the single product

i'm going to write the following code

where we're going to go with const

single

product and don't worry we will reuse

this code so

it's not like we're just randomly typing

something so let's go with products and

then find now again

i'll reference each product

with a parameter of product

in my callback function and then if the

product id

product id

matches one

because that is my route here

then of course i'll return that single

product so i'm going to say single

product and technically this works

so notice now of course i have only info

about this one specific product and i

have the description however it feels

like using bazooka on a cockroach yeah

it gets the job done but

probably is an overkill

because keep in mind at the moment we

have

only four products so yes

if i really wanted to i could set up

four routes

but what if i have hundred two hundred

three hundred

well that's not gonna work and in

express we have something called route

parameters which essentially is going to

be way better solution

so instead of hard coding this 1 2 3 or

whatever id we want we set up a route

parameter and it's going to look

something like this where i go with my

route and then i have forward slash and

then i go with colon

and then

whatever name out one so think of this

as a placeholder so you can call this

bobby lee you can call this chicken

burrito in my case i'm gonna go with

product

and the id

just to be explicit

of what i'm expecting over here but

again

naming here is really up to you

and what is more important is the fact

how we can access it now if you want you

can actually console log the request

object again this is just going to be a

giant object and for now i'm just going

to leave this one the way it is

so i'm still going to be returning a

product number one and also let's look

for

request

and then we're looking for the params

property so let me count to lock this

one and then again once i navigate back

and if i refresh in the api products

number one

what you'll notice again this giant

request object where we have bunch of

useful properties and methods

and of course i'm not going to cover all

of them right now but similar to http of

course in the express we also have

access to bunch of useful things in that

request object and one of them is the

params so check it out now i have this

product id and the value is one now

please keep in mind one thing that

whatever you're going to be setting up

here in the url as that route parameter

is always going to come back as a string

and this is important in this case

because if you take a look at our data

the id is a number and of course we'll

deal with that in a second

and whatever we set up as far as our

name

is going to be right in here it's going

to be in this request and then

parameters object so now of course what

i could do

is i could just destructure it from the

params

and then use it in order to find that

specific product so that way i don't

have to hard code products number one

product number two and on and on and on

instead i just set up my route parameter

and just come up with whatever name i

would want

just make sure that you add this colon

here

and then we'll access that value and get

a specific product so i'll leave these

two suckers for your reference

just in case you would ever

want to console log them and we'll

simply go with const and the name is

product id

and that is equal to request

that's my request object and params

then i'm going to use this product id to

get my product but remember

it is a string we can clearly see that

and in fact here in the array

well the ids are numbers so if we'll

just try to search it the way it is

of course we won't be able to get our

product so instead what we want is pass

in the number

and then product id now of course if

your ids are set up as strings

which is

somewhat typical setup for the databases

and all that

as well as the headless cms is then of

course you don't need to worry about it

then you can just pass in the string and

now of course i'm going to be able to

get my one product so now if i go back

and if i refresh

everything still works and if i go to my

url and start changing these values

hopefully you can see that now of course

i'm getting a different product now i'm

getting product number two and i go to

product number three and on and on and

on so now with these few simple lines of

code

i can access any product in my array now

of course there's also a case where we

cannot find the product because keep in

mind here i can type whatever i would

want so i can go with products and then

let's imagine that the user types abc

now do we have a product with an id of

abc

of course the answer is no so what's

happening over here now i don't get

anything back right well i don't get

anything back because if i go to log and

then

single product let's see what we're

going to get back again let me refresh

abc and this one is undefined so that's

what we're sending back as a single

product so what would be a solution well

a solution is setting up a if statement

here

where i say get me the single product if

you cannot find that single product if

basically that product doesn't exist if

the id

that the user passed in does not make

sense

you cannot find the product with that id

then return 404 so how's that going to

look like well we can go here if and

then single product so we set up a if

condition and of course i'm going to go

with if single product doesn't exist so

i'm going to add exclamation point and

of course this is going to be our case

with undefined

this will be true if it is undefined and

then we just go with a return

res and in this case i will add a status

because that is extremely important that

i go with 404 and then we go with send

and product

does not

does not

exist like so

now if everything is correct then of

course we go with res

and json so in here i say return

and res dot json so once i go right now

to product and then abc

there it is now of course i have proper

404

product does not exist and if i again

take a look at the tab

and i have my abc now if i'm going to

navigate to a route where i can find the

product then of course i'm going to get

my proper product response so whenever

you think of route parameters think of

them as placeholders where user provides

a data and then using requests and

params we can access that data and then

set up some kind of logic

and before we continue and cover query

string parameters let me just mention

that route parameters can get way more

complex than this so for example imagine

this scenario i can go with app.get

again i need to come up with some kind

of routes i'm going to go with api

then products so i'm looking for

specific products so i'm going to use a

route parameter let's call this product

id

then i'm going to look for all the

reviews and then maybe there's a review

id

so review

and then id and now of course again i

have rec and res like so and then i'm

simply going to send back some kind of

dummy data but i would want to console

log the rec params just so you

understand how everything works and now

let me send

res.send so res

not send and i'm just going to say

simple hello world let's save this one

and again in the browser let's go here

we have products again some kind of id

whether that's abc whether that is a

number in this case it doesn't really

matter since you can see that there's

not much functionality in there but we

need to type in here reviews and then

for example the review id would be i

don't know abc so once i navigate here

of course i'm going to get my hello

world and then in the console notice how

i'm accessing all of them so i have the

product id as well as the review id so

again they can get way more complex than

just this simple approach and one more

thing i would like to mention this

reviews though is hard coded

so if i go back i can change the abc and

4 however i would like but if i'll

change

from reviews to review

i'm going to get a 404 why well because

review is not a route parameter so

that's not a placeholder

so if

this is incorrect then of course i get

d404 hopefully that is clear and now

let's talk about the query string

parameters

all right and once we're familiar with

rot parameters let's talk about the

query string parameters or they're also

called url parameters

and essentially that is a way for us to

send small amounts of information to the

server

using the url

now this information is usually used as

parameters to for example query database

or filter results and that's really up

to the people who are setting up the

server they decide what parameters are

going to be accepted

and what functionality will depend on

those values and to give you a real

world example let me go to my search

engine and i'm just looking for hacker

news algolia api

so when you're working on a front-end

app i'm not sure whether you worked with

this api but that is a very cool api and

essentially it's going to work as a good

example of how we should be setting up

the server and this is as a side note

but

notice the url here

so they go with a domain which in our

case is of course localhost 5000 but

here it is actually a algolia domain so

algolia.com

forward slash api like i said that is a

pretty common practice

then a version number and then whatever

list you're getting so in here it is

items now check out this one

doesn't that ring a bell

of course that is a route parameter

where they say yeah here's the list of

items

but if you want to be more specific

please provide the id

and then if you keep on scrolling you'll

notice the same thing with the users

again we have the main domain

api version one users that's the list

and then if you want to get a specific

one then of course again there is a

route parameter now this is just to

showcase that i'm not randomly coming up

with those things no that's how actually

the servers work in real world and let's

keep on scrolling and now we come to

this interesting part

where we can sort

so

we're getting the data from the algolia

api

but then in my app

i can sort i can say hey you know what

get me specific hacker news story or get

me stories based on some kind of search

term and hopefully you get the gist

where instead of just grabbing the whole

thing

i can say you know what

get me all the stories that match

through so again we go with the url and

this is really up to you how you set

this up in their case they use search

and then

here we have this question mark

and whatever is after this question mark

is not technically part of this url

meaning

it's just a way for us to send that data

to the server and then server decides

what to do with this data

so the url is still this one

the one that ends with search and then

we have a question mark and basically

this is just a specific info

about the data that i'm requesting so

here the user adds a query parameter and

then the value is full and then also has

tags of story and that means that we're

going to get all the stories matching

full now what else you could set up here

in a query string pretty much anything a

pretty typical is going to be page for

example if you have a list of things and

i don't want to get 100 items at a time

i can say you know what split it up in

pages and get me initially page number

one and then only if the user clicks on

a button that fetches the page number

two then i get the second page then for

example in here they have hits per page

so that is going to be how many items

per page so again

after that question mark if the setup is

supported by the server

then of course you can add those key

value pairs and the way we add them as

you can see is by using key value pairs

so we have question mark and then we

have a key

which in this case is query and then the

value now

before we continue let me make something

very very clear it's not like you can

randomly search the web and just start

adding these query string parameters and

then expect

that as a miracle you'll just get the

data that you're looking for a as far as

the keys

they're designed on a server so if i'll

set up a key of chocolate milkshake

algolia api is going to be like i don't

know what you're talking about and the

same goes for the value so where i'm

going with this now we are in charge of

that server so it's up to us to handle

those query string parameters

and i'm going to go back to our project

and i'll purposely set up a new route

please keep in mind one thing where a

pretty typical setup

is adding this to the list

so again we'll look for specific

property on our request object and then

if that property is provided then of

course we return a more detailed

response meaning there's maybe some

filtering or something like that but if

not then we'll send back all the

products now i'll purposely set up a new

route just so we don't jam all our code

in this one route but then

in the next video probably i'll show you

how we can combine both routes so let's

keep on scrolling so this is going to be

our more complex

params example and let's go with app.get

and again

the route is really up to you i'm going

to go with api now in order to make it

interesting i'm going to add that

version 1 just like the api of algolia

has it and then i'll say query now i

don't need to add question marks nothing

like that i just set up query that is my

route and then i have my callback

function rack and res

now in this callback function in order

to access those query string parameters

i need to go with rec and query so let's

go with console.log and we're going to

look for

request

and not params sorry we're going to go

with query over here and again let's go

with simple hello world just so we can

speed this up and then if i go to the

local host

and more specifically

i'm going to look for

localhost then 5000 then api then

version number one

and then query and then if i add this

question mark i can add as many query

string parameters as i would like so

here i'm going to go with the name that

will be equal to john

then in order to combine them we just

add this ampersand so we're going to go

with name john and then id4 just keep in

mind that you can add as many query

string parameters as you'd want and then

once i navigate there at the moment i'm

just going to get the hello world

so that's my default response from this

url

but in a terminal notice i have name

john and id number four again this is a

string and this is going to be important

in a second but what this allows us to

do is access those parameters and then

based on them do some kind of

functionality now first of all i would

want to change this around a little bit

where i'm not going to be looking for

name or id i'm going to be looking for

search query parameter as well as the

limit so if the user wants to search for

a specific product he or she needs to

provide that search query parameter as

well as limiting

where the user can limit of how many

products they are getting back so let me

navigate back and just to showcase that

so again instead of name i will zoom in

we'll say search

is equal and then whatever i would want

so in this case i'm just going to go

with a so effectively this will return

all the products that start with a and

then the second one is the what that was

the limit right so i'm gonna say limit

and

for now let's just go with two of them

so this will return two products

i'll zoom out and again i have search

and i have limit after you so now of

course let's set up that functionality

and we'll simply start by creating new

instance of those products i'm gonna go

with let and you'll see in a second why

so say sorted

product

and in here we'll use the spread

operator so we imported the product

and now i'm just going to copy the

values so this is going to be my new

array and the reason why i'm using let

because

we will modify

this value a bit now instead of just

cancel logging the query i'll comment

this out and we'll set it up as const

and then again i'm looking for two

specific keys i'm looking for the search

and i'm looking for the limit so if the

user doesn't provide them

well then we'll send back all the

product

so we're gonna go

with query

like so so i can see the search and

limit beautiful

and now

instead of just sending back hello world

i'm going to check

if

the search

is in my query string parameters then i

would want to filter my product so i'm

going to say if and then search like so

and we're going to go with sorted

products since i'm using let i can do

that i'm going to go with sorted product

and then filter method again

straight up javascript again i'll call

this a product

like so and what i would want to return

are the products that start with the

value of my search term so here i can

say return

product

and name so if the product name starts

with now again this is straight up

javascript

and i'll pass in the search if that is

the case that is going to be my value in

stored product and i can right away

check for the limit as well

where i'm going to say if

and then limit

and if it exists

so if the user has provided it again

let's go with sort product

and filter more and in this case i'm

going to use the slice method where i'm

just going to get specific items from

the array so i'm going to start with 0

and then remember we're getting a string

so we need to go with number and then

again we'll pass in the limit let's go

here below both of them and let's just

say res dot and then status and we're

going to go with 200 like so and then a

json response

now when it comes to json response we're

just gonna go with our sword product

right so we go back

and let me just showcase something where

if

none of the query string parameters are

provided i'm gonna send back my whole

data why well because i copied my

products right both of them were false

both of them were undefined

and as a side note there is a error here

cannot send headers and i'll talk about

it actually in a second that is one of

my

next topics so let me just deal with

this hello world by deleting it and

we're going to be in good shape but i'll

cover why we got this error and what

gotchas you should be aware of so let me

go back again

let's see again we're getting all the

products because the user did not

provide

that specific query string parameter so

if we right now navigate to the url

and i'm gonna start with a limit and if

in the limit i'm gonna say that i'm only

interested in two products

check it out now of course my limit is

two so i only have two products and if

it's three then it's gonna be three and

then four and hopefully you get the gist

where whatever value i provide here in a

limit well i have the functionality for

it now keep in mind again name needs to

match if this is going to be limi

instead of limit again i'm just going to

get back all the products regardless of

what is my value and the same goes for

the value of the query string parameter

if this is limit but for example i

decide to pass in abc

nothing i get empty array why because my

value wasn't what my functionality was

looking for and similarly of course we

can add the search option as well and

i'm purposely showing them one by one so

you don't get confused so let's say

search

and again the functionality is set up

where you need to provide a starting

character so in my case i'm looking only

for the products that start with a and

there it is i have two of them now if i

want a limit i can just add and here

and let's just type limit and i'm only

going to be looking for one product and

if i add this limit one

there it is now i only get one product

now there's also obviously going to be

the case where we return empty array

why well because

i could go with search and look for the

products of b

and unfortunately when it comes to my

product data i don't have products that

start with b so we can handle that

instead of sending back empty array i

could check what is the length of my

array and if for example it is less than

one then i explicitly send back the

response where i say yes the request was

successful

but i couldn't return any product so we

can go with if and then sorted product

if the length

of this array

is less than one

if it is less than one then of course i

can just go with res dot status now this

is one gotcha where

you're not sending back the 404 you're

not saying the url doesn't exist or the

resource doesn't exist

in this case you're trying to

filter the product but

nothing came back so

whatever query string parameters were

provided they didn't yield any results

so you're simply saying status and then

you can go with send and we can go with

no products

products matched

your

search like so so we can go here and

then if we refresh again with the same

ones we have no product match your

search so that is one option you can

send back the string but

a more common one is this one where i'm

going to comment this out for your

reference again and instead you go with

return

and you're going to go with res dot

status and again we have this error in

the

server and again i'll talk about it in

the next video why we have that one so

we're going to go with res dot status

and we pass in the 200 and instead we

send back the json one and in that json

again you can pass the string if you

want but a more common approach is

setting up the object where you

explicitly say that the request was

successful or a failure so you go with

success and that is equal to true and

then again you come up with whatever

name you would want a generic one is

data and then you send back the array

again you are in charge here you can

really do whatever you want i'm just

showing you

a pretty common

approaches to the situation so again i'm

looking for some kind of product

using my query string parameter now

unfortunately server can return

any data meaning

any product and then of course i just

get this success true because the

request was successful there was nothing

wrong with my url however

i'm just yielding a empty data so that's

it i can just delete it and if i don't

provide anything then i'm going to get

all the products hopefully that is clear

how the query string parameters work and

now we can cover a few gotchas all right

and two things that i would like to

emphasize are following first

remember those errors that we're getting

in a server when we're setting up if

conditions

in javascript if we don't explicitly

return

then of course javascript just keeps

reading the code correct so if i'm going

to omit that return i'm actually going

to get the server error where i send

back one response and then javascript

just keeps reading the code and then

express is confused express is like hey

wait a minute i already sent back the

response so while you're sending another

now keep in mind that it is happening in

the same request so you cannot send

basically two responses in the same

request one after the another yeah of

course you can send one based on the

condition so for example if there are no

products you send back one response

and if you can yield some product then

great then you send the second one but

you cannot send both of them

one after another in the same request

and if you want to see that error again

in action go to the query you'll add a

question mark here

and we're going to go with search and

again it is equal to b for example that

is my value that's the starting value

that i'm looking for and once i do that

notice yeah i'm getting back the success

true and data but again i have this big

fat error in my server and it says

cannot set headers after they are sent

to the client

so we can have only one response per

request

and in order to avoid that we just go

with return so always always when you're

setting up the condition make sure that

you go with return so that way we are

returning from our callback function and

one we set up over here and that way

you'll avoid those errors now of course

in this case there's no more code to

read so

yeah it is a better practice if you just

put this return here but you won't get

the error since again there's nothing

after that and one more thing that i

would like to mention

normally you're not going to set up a

separate one just for the query yeah

there might be some cases maybe there's

some apis who do that but normally again

you can just add it to where you're

getting a list

so basically if

there's a query beautiful you're maybe

gonna sort that data you're gonna filter

it you're gonna i don't know set up some

pages or whatever and if

no query string parameters are there

then you send back the whole product and

if you take a look

pretty much nothing stops me here from

just changing this to api and products

and the functionality is going to work

where if

there are some query string parameters

present beautiful

notice how we're filtering

our product if not then i always send

back these products anyway and as you

can see those are just copies of the

products that are coming from my data js

hopefully that is clear and now let's

move on to our next topic

nice and once we're familiar with route

params and query string let's really

kick things into gear and talk about

middleware in express.js

express middleware are functions that

execute during the request to the server

each middleware function has access to

request and response objects

and when it comes to functionality

literally sky is the limit in order to

hammer this home i have prepared quite a

few examples where we cover middleware

step by step since in my opinion actual

code examples are far more helpful than

text based explanations before we

continue though let me just stress

something middleware is literally

everywhere in express

you can even make an argument that

express apps are nothing but a bunch of

middleware functions stuffed together to

make one nice express cake or dessert if

you are in that sort of thing

and since that is the case middleware is

not one of those topics you can just

skip or avoid

it is at the heart and soul of express

so please don't dismiss it with that

said since you'll encounter it more than

once if you struggle with it in the

beginning don't panic the more examples

you'll do the better you will understand

it now let me start by cleaning out my

app.js and this is going to be the case

where i will leave

the code at least some of the code from

the previous lecture so let me delete

all the middle part and i'm just going

to leave express we are instantiating

our app and we're listening on port 5000

and let's just start by adding a comment

here

for your reference so there is a

incoming request

and so far we have been just sending

responses right

so what middleware does

it sits in between

hence the name so middle where over here

and then we pass the response so the

request comes in we'll do something so

we'll have access to the both to the

request and response we'll do some kind

of functionality again the most basic

you can just cancel log something

and then we'll send out the response and

again i know it probably looks confusing

at the moment but trust me the more

examples you'll do the better you'll

understand

and let's start by simple scenario where

i have two routes i have the home route

and i have the about route

and in those routes i would just want to

log

the method that the user is using the

url that the user is trying to access

and for example a date

and if you think that's silly there's

actually npm packages that do that

because

as your express apps grow bigger and

bigger it is very useful to see those

incoming requests in that manner so

let's start here by setting up add.get

again this is going to be my home page

and for time being i have my callback

function i pass it in and i just go with

the res dot send

and i send back the home and i'll do the

same thing here with my about

so there's going to be two routes at the

moment home and about unless it's just

going to say about so i'll save it and

it's not going to be surprised if i

navigate to localhost 5000 if i refresh

this is my home

and this is my about again something we

have covered already before now here's

the kicker

if i go with logger

and if i set up that functionality in

the route forward homepage i'll also

have to do that in the about so let me

showcase that so i have request object

and in there i have method i have url

and i'll simply set up the year because

i don't want to deal with javascript

types so let's go with method now that

one was on request

dot method property then we also have

the url so url here and that is going to

be a request url property

like so and then like i said i'm going

to go with const and i'll name this time

but in order to make it easier i'm

actually going to get a full year so i'm

going to go with new date and i'll

invoke it and i'll say get full year and

invoke it as well

and of course i'm sending back home yeah

that is nice but before i do anything i

would also want to

cancel console.log all three of them so

method url

as well as the time like so so i save it

and now every time

user is gonna hit this resource of

course i'll see that in a console log so

there it is if i go back to my home page

like so and if i refresh quite a few

times

there it is now in a console i can see

that the method was get so the user was

trying to get the resource and then the

path was the homepage that's my url and

then the year is 2021. okay awesome

but here's the problem if i want to have

the same functionality

in about what do i need to do right now

well again i need to copy and paste

now if i have 15 routes does that sound

like a reasonable approach of course the

answer is no

a better solution would be if we set up

a function

and in that function we have all this

logic and then i can just attach it

really nearly to all my routes and when

i say well in italy it just just means

that for some routes i maybe want to

attach it and for some maybe i don't

so here's the deal i can go above both

of my routes and i can just simply say

that there's going to be a function by

the name of

and for time being we're not going to

look for any parameters but yes there

will be there

and then we just take

all our i believe four lines of code

right and we just cut it out and pass it

here okay awesome and now of course

where do we attach this function so we

don't have to duplicate our code

and the place is following where we have

the path and then we have the callback

function now in between them we can

stuck a middleware so in this case as

you can see i'm referencing the function

please keep that in mind so i'm going to

go with logger that's my middleware

function

but now there's the second question well

in the logger i'm accessing request

object right so

how can i do that

because at the moment i'm not passing it

in well the good news is that express

passes it in to our middleware function

so in here i just set up the reference

for my function and express will do that

behind the scenes it will supply the rec

res and also a next and you'll see in a

second why we need this next function as

well so again

we don't have to do anything we just

pass here the middleware express

supplies them but of course it's our job

to access them as parameters and then

set up our logic so for them being i'm

not going to do anything with next i

will save

and we should see something where in the

console i'm still going to get my log

but the problem is going to be in the

browser so if i navigate back and if i

refresh

notice something where i have this

spinner

okay

so what's happening here well i

successfully logged

but i didn't pass it on to the next

middleware so here's the deal when you

work with middleware you must must must

must must pass it on to a next

middleware unless you're terminating the

whole cycle by sending back the response

and don't worry there's going to be

examples where we do that as well so for

now just keep in mind that when you have

a middleware

where you set up some kind of logic

unless you're sending back to response

yourself for example since i have access

to response i simply can go with res dot

and send and again i'm going to come up

with testing or whatever it doesn't

really matter what we send back if we

refresh notice it doesn't really matter

if i try to access the home page since i

have my middleware i'm actually sending

back the testing and this is why the

middleware is so so

powerful because you can literally do

whatever you want over here you can set

up all kinds of cool logic

and you have two options either you pass

it on to the

next middleware which in our case of

course

are going to be our methods our get

methods or

you simply terminate the whole cycle and

you just say res dot send and i'm

sending back my own data so let's not be

brutal over here i will actually remove

this line of code

and if

i want to pass it on to the next

function meaning in our case that is

going to be my method app.get i simply

go with next and we have to invoke it

again please keep that in mind there's

going to be more functionality later in

these middleware functions but you

always always

either you terminate

so either you send back your own

response or you pass it on to the next

middleware that is very crucial so now

if i go again to my homepage

there it is i successfully navigate to

my homepage i can clearly see that that

is my response and i also successfully

logged in my console

the method the url as well as the full

year and now of course instead of adding

this logic line by line to every request

simply can go and i say yep i would like

to invoke the logger here as well so if

we go to logo host 5000 and if we're

brave enough and we navigate to about

there it is now i have get request about

url as well as the full year hopefully

that gives you a good initial

understanding how the middle works

and now i can talk about more

complicated topics beautiful we are

familiar with the middleware we have our

first middleware function

but there are two issues with this

current setup first

our appdress is getting somewhat clunky

because

i mean we have this logger then we have

the methods

it's definitely nicer if we have this

logger function in a separate file

it's just going to keep our app.js lean

and in turn it's just going to make it

easier for us to navigate and

essentially work with our application

and the second issue what if i have 50

more routes

and i don't want to add this function

manually to all of them

wouldn't be nicer if there would be a

method that essentially just adds my

middleware function to any route and of

course the answer is yes there is such a

function in fact we used it a few videos

ago now let's start though by moving

this sucker into a separate file

so i'm gonna go to my not navbar app

sorry

this is what happens when you have a

bunch of

projects open meaning a bunch of folders

open let me go here where i have my

app.js

and i'm just going to

create a new file

and this is still going to create it in

the final sorry so let me go here and

i'll create a new file and i'll call

this logger

js now if you really want you can add

the middleware there in name as well but

in my case i'm just going to add

the name of my function

then i'll cut it out

and what's really cool that we know how

to export this right so we have cons

logger and then we go with module

exports and we'll just set it equal to

our logger so now we have default export

that's our logger so of course in the

app js i simply need to go with const

logger is equal

and then i require it i go with logger

and if i navigate to localhost 5000

i still should see in a console my log

and if you do then everything is correct

so that's the first part

now the second how can i apply this

logger

to all my routes

so for example

let me just copy and paste these ones

and i'll say api

and then

product

and then api

and i don't know not about maybe items

again doesn't really matter what you

place here i'm gonna go with products

as well as items

again i can add them manually but the

more routes i'm going to have

well the bigger issue this is going to

become right

because for every route i need to

manually add this logger so a better

solution is this one

where i select all of them i just remove

them like so now of course if i go to

any of these routes i'm not going to

have anything in a console but

there is a method by the name of app

dot use and in that app.use

this is what we do we pass in the

middleware so we simply go with logger

and once i save

check it out now if i go to about for

example or if i go to home

or api

and then products and hopefully you get

an idea

all the time you'll get this log in

console why well because app.use

will invoke this for any route now

please do keep in mind two things first

order matters here

if i'm gonna place this below

app.get

and if i'm going to try to do that in a

home page i'm not going to see anything

in the console why well because i invoke

my use only after get and express

everything goes in order so if app get

is before the used one the one that

applies to all the routes then yes

well first we'll hit the home route and

then we'll send back home so there is no

logger so that's why you'll see all the

middleware functions all the app.uses at

the top of the document

so you'll have your middleware functions

first and only then you'll have all your

roth methods whether that's get post and

you get an idea so that's the first

thing that i would like to mention now

the second thing that i would like to

mention

is the fact that we can add here a path

so if i go to app.use that's my method

and instead of providing only one

argument which in my case is the logger

i can set up a first one and that is

going to be path and i just need to come

up with a value now in my case i'm going

to type api

and you'll see e in a second why so if

you save with an api you'll notice

something interesting where this is

going to be apply to both of them to the

products as well as the items so here's

the deal once you apply this path over

here basically it's gonna apply to any

route after this api so for example if i

go with api and then some crazy one home

about and then products all the time is

going to keep on applying this

middleware so that's something new right

because previously we worked only with a

specific route so forward slash or about

or products here in this case so of

course these are different now when we

add this path to use then of course it's

going to be applied pretty much to

anything that comes after the path that

you provide over here so in my case

since i provided api and of course it's

going to go for any path that's after

that now if you want to find out more

info about app.use i suggest navigating

to docs again we're looking for api

reference in our case that is four and

if you take a look at the app.use

mounts specified middleware function or

functions and we're gonna cover that

later as well at the specified path and

middleware function is executed when the

base of the request path matches so this

is going to be our base

and then whatever comes after will still

invoke that middleware function and if

you omit the path then it's just going

to be applied to all of your requests so

if i were to remove the path

now it's going to be applied to home

about api product

as well as api items nice we're familiar

with app.use

and now i want to make our example even

more interesting by adding another

middleware function and in the process

we'll take a look at how we can execute

them in that use what is the syntax in

order to add it as well as what is the

execution order

and let's start simply by creating a new

file and i'm going to call this

authorize

authorize dot js again

i'll zoom in just so you can see that is

the file name and in here i'll just set

up a function similarly to how we worked

in the logger one so i'm going to go

with const authorized

or authorized it doesn't really matter

now it's going to be a middleware

function so of course i know that i'll

have access to rec res

as well as next and then in function

body for time being i'll just invoke

next and maybe i'll cancel log i'll say

log and authorize

like so okay let's save that one

remember that we need to export it so

module

exports and that's equal to

authorized awesome and then in the

app.js i'll just copy and paste

and i'll say

authorize like so

and of course the file name is also

different it's not a logger so we can go

with authorize

and once i have this setup in place

the way we execute

multiple middleware functions in app.use

we simply place them in the array so i'm

gonna go with my logger first so logger

and then we're gonna go with authorize

and now once you navigate to a localhost

5000 again any of them in this case

because notice there is no path

first in a console i'll see this get and

then authorize and that's something to

keep in mind where they will be executed

in the order so if we flip this one

if i go with authorized first

and then i go with logger then of course

in the console i'll have the opposite

order where i'm going to have authorized

first and only then get so that's

something to keep in mind now i'm going

to go back to my previous setup the

logger and then authorized and now let's

take a look at how we can have the if

condition in our middleware function now

before we do anything let me just stress

something very very important where this

is just for demonstration purposes this

is just an example and it's not how

we're going to authorize

users in our express applications i just

don't want to overwhelm you from the get

go so i'm just going to show you simple

example using the query string but again

this is not this is not how we

authorized users in our express

applications and with that said i'm

going to navigate back to my

authorized middleware and in here

i'm just going to set up a query string

so i'm going to say if the user

provides a query string

in my url then i'm good to go then i'll

send back the resource that the user is

requesting however if the user doesn't

provide the user query so query string

parameter in the url then i'll just send

back 401 which just stands for

unauthorized so let's start i'm going to

go with const and i'm going to be

looking for specific query string i'm

going to be looking for the user my url

parameter and of course we know that it

is available in rec dot query like so

and i'm going to say if the user exists

so if it's there with any value it

doesn't really matter which one or i

don't know maybe if you want to make it

more interesting let's go if the user

equals john okay if that is the case

then i'm going to go with rec.user

and notice what i'm doing here

i'm actually adding a property of user

onto the rack object

and i'll show you why it's so powerful

so i'm going to go with recuser that one

is equal to

whatever i mean that could be a object

for example and i'll say here name john

again this is just for demonstration

purposes and then id i don't know four

or three or whatever so that's my user

now i still need to call next if i won't

do that then the whole setup is gonna go

bananas so i'm gonna go with next here

and now of course i just need to set up

a response if

the

user or whoever is visiting

doesn't provide the query string with a

key of user and then value on john and

in that case i'm going to go with my

else and i'll say

res

and then let's add a status and the 401

is going to be for unauthorized and

let's just say send and simply let's

try to spell this sucker

unauthorized let's save that one

and now notice something interesting

if i'm going to go for example to my

home page or product again any of the

routes because there is no path

in my app.used check it out i have

unauthorized and if i inspect and in the

network tab the same deal i have 401

because i'm not authorized to access

this resource i have my authorized

middleware whereas say you didn't

provide the query stream parameter with

a key

of user and more specifically you didn't

provide here a value of john

and since you didn't do that you cannot

access the resource so now of course if

we change things around and if i go

with my question mark and if i say user

equals john

what do you know i have my home why well

because now the condition is met and now

we just go to next now why it is so

powerful because in the authorized we

add the user right so now of course not

only i can check for that query string

parameter but and also access this info

again

this is just demonstration normally what

you're going to do you'll check for the

json web token and then if the token

exists then we communicate with database

and actually get the user again this is

coming up for time being we're simply

hard coding these values so back in the

app.js in any of the routes now i'm not

going to add in all of them but just to

showcase

i'm gonna add for example in app items

i'm gonna set up here a log and i'll

look for

rec and user and you'll notice something

really cool where if i leave this

query string parameter and if i go to

api

and items

check it out first of all i have the

items and second in console what do i

see over here i see that user and that's

why it's so powerful because we can add

our middleware

we can do some kind of functionality and

now basically i'm attaching this to my

request object so i have the request

object and now i'm attaching this

property here and now in any of my

routes now of course i went with items

but in any of my routes i'll have access

to that user that's why middleware is so

so crucial and that's why it is a big

part of express applications because it

truly allows us to structure our

applications as lego blocks so we have

this piece of functionality we have that

piece of functionality and when we

combine them we have this nice working

express server now like i already

previously mentioned

middleware is all over express

so just because we're done with our

initial introduction doesn't mean that

you're not going to see middleware

you'll see it all over the place but

just to complete our initial

introduction i want to cover two common

questions first well if we have access

right now to app.use since we know how

to use it

are we going to add the middleware in a

route and actually the answer is yes

because imagine the scenario where

i don't want to apply this app.use to

all my routes

for example i only want to check for

authorized users in the api forward

slash items what do i do well i simply

add my authorized middleware correct so

now i'll be able to access all these

routes without any issues but the items

want yes

i'll check for that silly query string

parameter and if you're wondering well

how we can pass two middlewares if you

would want in a single route

same we just simply grab this array so

we copy and paste and now of course once

i hit the items not only i will log

but i'll also authorize

so let's go back

and i'm going to take a look where in

this case everything is fine

i was able to access the resource since

i provided the john so notice here name

john id number three i also have my

console log but if i were to go

to just my home page like so i have the

home and as you can see i don't get

anything in a console i don't get my

logger

and i'm also not looking for any kind of

authorized user so that's the first

thing that i would like to cover second

what are our options when it comes to

middleware so far we have covered the

first one our own so we can always set

up our own middleware now our other two

options are express so express provides

quite a few

built in middleware functions again in

this case we don't have to worry about

setting up the functionality we just

need to reference the docs to see what

options are provided and then of course

supply those values and if you remember

the express app example

we used app.use and i said put the pin

on this i'll explain this a little bit

later if you want you can retype this

but in my case i'm just going to copy

this from the for express app.js

and if we copy and paste and if i place

it here notice so this is a app.use

method now what argument the app.user is

expecting it is expecting a middleware

so in express

we have a built in middleware by the

name of static again somewhere in the

express source code there is a code

similar to this now of course this is

silly they have way more complicated

setup but hopefully you get the gist so

there is a method and the only thing

this method is looking for our public

folder and then i already told you that

it basically places all the contents of

public folder

as our static assets so they're publicly

available so we already covered that one

and now let me show you a simple example

of third-party middleware now for a

third-party malware we'll have to

install it and one of the most popular

ones i guess for the login is this

morgan npm so again just go to your

search engine and type morgan npm that

is going to direct you to the

docs i guess for the morgan and as you

can see in order to install we just run

npm i morgan so that's how we install

the package and the syntax is following

where we just go with morgan we required

a morgan and then we just pass in morgan

tiny now of course

this one we need to set it up in our

app.use so this is really optional

you don't have to install it you don't

have to run it but in order for me to

hammer this home i will do that so let's

go back i'll stop my server and remember

the command was npm

i and morgan okay i installed this one

so now of course this package

is going to be in my dependencies like

so so not only i have expressed i also

have the morgan

and then in the app.js of course i'm

going to have to require it so i'm going

to go with const morgan and that is

equal to

require and then again i don't have to

provide the path

that's the module that i installed so i

go with morgan and then where i have

app.use

and go with app.use since i would want

to add to all my rows again if you want

to add for specific one there's a

different scenario but if you want to

add for all the routes you just go with

morgan

and then they basically give you

multiple options and the tiny one is

just going to provide you the most

essential data and again if you want to

reference the docs please do so so i'm

going to go with morgan and now i just

need to spin up my app and i go with npm

start now i will remove logger and

authorized from my api items

just because i think the terminal is

getting quite busy

and now of course once i navigate for

example home page

in a console i have get i have forward

slash now this is a status code and then

i have 2.8 milliseconds and that

essentially just signals how long it

took for the server to respond and if i

were to go to localhost and forward

slash about now of course i'll see that

i have get request i have about the 200

and now of course time is a bit

different as well so hopefully this

gives you a general idea

why middleware functions are so crucial

and how powerful they are and yes the

bigger your express applications will

get

most likely the more middleware

functions you'll have

now

they could be your own ones they could

be the ones that provided by the express

or

there's also going to be tons of

third-party middleware functions

not bad not bad we have general

understanding how middleware works in

express and now i want to cover

rest of the http methods

so

if you remember which seems like an

eternity ago we covered the cycle the

request message as well as response and

in request

well

get was by default performed by browser

but of course we have other methods as

well and i also provided a second slide

just for these methods and here you can

see rest of the methods so get is again

by default set up in a browser and this

allows us to read data then we have post

that is for inserting data so for

example if we have some kind of api

orders route we can add an order so user

makes an order and we just place that

order on the server so of course

eventually we would say that in a

database then we have put if we want to

update data and of course we also have

one for deleting the data and before we

continue let me just mention something

we're not going to persist this data so

yes we'll have working examples of post

put and delete and hopefully i'll be

able to convey my message

in a manner where you understand the

general setup for rest of the methods

but since we haven't covered how to

connect to database we won't persist

this data now i could have went the file

system route

where essentially we are persisting this

data by writing in a file but i thought

it's a waste of your time because most

likely you're going to work with

database anyway so we might as well skip

that part so once we understand how we

can connect to the database what are the

methods by working with data in our

database then we'll have a proper

example where we're persisting in

as well

and in order to kick things off i'm

going to navigate back to my address

again the previous example is going to

be in the file number 10 middleware

options

and again we're just removing pretty

much everything starting with morgan so

right after app

and all the way to

app.listen

like so

now there's not going to be a home route

however i'm going to go with api and

people now why do i go with api people

because in the data file in the data js

where we had the product

there's also this one people people is

an array each person is an object

there's an id as well as the name as you

can see very simple example

so

with this data array i want to showcase

how we can read this data how we can add

for example an extra person

using the post how we can modify the

person

as well as deleting one and now of

course i want to navigate to app.js and

first i want to get my people so we

simply go

with import i'll structure it right away

and as a side note since i might make

some modifications i'll use let in this

case

and i'll set it equal to require

and then data hopefully this part is

clear since we have covered it quite a

few times and let's start with the one

that we already know and that is going

to be a get method so i'm going to go

with app dot get like i said i'll

purposely set up my route with a value

of api and people so that's going to be

my path i'll say api

and then people now this is a get method

and simply will return

this array so rec and res and again i'm

just going to go with res status let's

hard code the value of 200 then let's

set up our json and since i want to be

kind to my users i'll send back the

object i'll say that the success

property is true so the request was

successful and as far as data property

well i'll set it equal to people so

let's navigate back to our browser and

we're going to go with 5000 and of

course cannot get

so this is going to be 404 if i just go

to the homepage

and instead

i have a route for api

and i believe the whole path was people

like so so we run that

and now of course i have zoomed in

already massively here so let me zoom

out

in my browser and we should see

that we're getting our object the

success property is true beautiful and

then of course we have the data property

and in there we have the people's array

so a bunch of people in here so of

course that is our first http

method

that is the get one where effectively we

read the data and like i already have

mentioned

probably 20 000 times

that's the default

method that the browser performs so

when you set up a request with your

browser you right away use the http verb

by the name of get and that's why you

can read the data

all right so we're clear with get method

that's how we can read there however how

we can add data onto the server so how

we can

insert data

and in order to do that we need to use a

post method

but it's not like i can somehow

configure browser and start making post

requests unfortunately that's not how it

works that's why i provided a little bit

of help now keep in mind one thing where

after we set up a post method

effectively once we take a look at two

flavors of how we can set up post

request we will install one more tool

which is going to be crucial

in our express server development which

is just going to allow us to

test everything much faster

but since for the post i do want to show

you two flavors that we can have

we'll use a little bit of static data

meaning there's an app that i prepared

but don't worry

it's not like you'll have to do that

each and every time to test any of these

methods and you'll see what i'm talking

about in the following videos so first

let's start by jogging our memory a bit

we have app.use now what

app.use is doing is just applies the

middleware

to all our routes correct and i also

mentioned that we have this option

of setting up a public folder

now we can call whatever we would want

but for this methods example i prepared

a

methods.public

as you can see it is just a folder with

index.html with javascript html

some css

and once we navigate there of course

i'll show you how the functionality

works so this is just prepared so we can

test those other methods meaning more

specifically the post method because we

cannot simply just perform a post

request from the browser so first let's

set up

that methods public as our public folder

that's step number one so let's set it

up as our static assets and in order to

do that i'm just going to add first a

comment and i'll say assets and then i'm

going to go with app.use again remember

that is our method and this is going to

be a built in middleware

and the name is express static so i just

grab my express instance i look for the

method of static and if you remember we

just need to provide here a path

and instead of going public or static

like i showed you previously i'm just

going to go with forward slash and then

methods and then public

because this is where i set up my static

files for these examples we invoke it

and now if we go to the home page we

shouldn't get this error so once you

invoke

there it is we have a

somewhat decent looking html file with

two options we have this javascript

option which we're going to cover second

and first one is going to be a

traditional form example and again the

reason why we do that

is because you cannot simply just

configure

your browser

to perform

a post request you either need to use a

tool which we're going to install by the

name of postman or

insomnia here's another popular one

or you need to set up basically a

working application

and if you take a look in the methods

public we have this working application

all right and once we have the basic

setup in place now let's take a look at

our two flavors when it comes to the

post method

and i want you to navigate to index html

and in there you'll find pretty typical

index.html file with some styling

with nav as well as deform

and in form we have two attributes we

have action one

as well as the method and as you can

clearly see the value for the method is

post

and this action one just says

where we're going to send it and notice

now we have forward slash login so that

means that

this url this path is on our server but

of course we know that in the app.js

we're not handling that

so for the form there's going to be one

path and then for the second example

when we used straight up javascript then

of course there's going to be a

different path for that so this is going

to be the url or path where we're

submitting the form and inside of the

form we have label we have input

so basically

we have name attribute for this one we

have the id

as well as the autocomplete so we'll

type in some kind of value and then

we'll send this to

forward slash login so localhost and

then forward slash login and of course

we also have a submit button so now

let's start by taking a look what

happens when we simply submit this form

so go here type some kind of gibberish

in my case i'm going to go with john

bravely press enter and of course we do

have kind of post login okay that's fine

we're not expecting anything anyway

right we know that there is no route

that handles the post

for the login

but what's really interesting here

is in the network tab of course i can

see

my request

in this case this is login now this is

404 and again i'm going to repeat this

20 000 times but check out the method so

method is not

get method is post and then we're going

to localhost 5000 and then forward slash

login now what's also really interesting

all the way in the bottom

what do you see here you see this

forum data

and then we have key value pair we have

name and john and if you remember

when we talked about http messages i

said that the body is optional so for

example when we're sending a get request

we're not sending a body

but when we're sending a post request

it's very crucial so if i want to add

something onto the server

of course i want to get that data

i mean otherwise how i'm going to know

where to add to the server doesn't that

make sense i hope it does so let's go

back okay i see this name and i see john

and if you're not familiar basically the

way it works is whatever you provide

here

for the name is going to be a key

so for example if i'm going to set this

up as

testing you'll see that now when we

perform the same request the same post

request again with the same value

different value it doesn't really matter

now of course that key

name is going to be testing so whatever

value you provide over here that is

going to be the key and of course the

value is whatever you're submitting so

in my case

it's either peter or john okay

that's out of the way so i'm going to

change it back to name and now we need

to understand something

where the request is coming in

but a we're not handling that

and b we don't have the middleware that

actually adds this data that the form in

this case is sending to our request so

let's see how we can fix the first one

and we simply need to come up with a

round now in this case remember we're

dealing with post this is not get

and we're going to go with forward slash

and then log in here because of course

that's what i have in my form again we

go with rec and res

and technically we can come up with some

kind of info i can say send

and

i'm simply going to say post

and that's it just so we can save time

on typing again let's navigate back and

in this case let's try susan let's send

it yeah i see the post so i don't have

the 400 anymore or 404 so that's cool

but unfortunately i have no access at

this point to whatever

i'm being sent

so unfortunately i cannot access that

susan or john or whatever value so

unfortunately

i cannot add for example to my list if i

wanted to now how do we add it well this

is where the middleware comes in so

previously we covered static assets with

express static

in order to get the form data

we need to go with url and coded

middleware so i'll add here

parse

form data and essentially this is just

going to parse that data and add the

values to

rec.body so where we have a post request

in the rec.body property we'll find all

the info

and in order to use this middleware

surprise surprise we're going to use

app.use

and then we'll pass in express

and then url encoded and then you also

pass in flag where you go with extended

and you set up false and if you're

wondering why are we adding this

extended false flag or you just want to

get more info about this url in coded

middleware simply let's head back to the

documentation in this case we're looking

for the express and notice here i have

express url encoded this is a built-in

middleware function in express it parses

incoming requests with url and coded

payloads and it is based on the body

parser so in the previous versions of

express you have to actually install the

body parser now in this case you don't

it already comes built in and as far as

this extended this option allows to

choose between parsing url encoded data

with query string library when false

meaning

this is our case or the qs library when

true again i wouldn't lose my sleep over

this one then the common approach is

using this extended and false and once

we can access it then we can do some

cool functionality so first let's just

scroll down a bit where we have the

login and first i'm just going to start

by console logging rec

and body let's save that one

and again back to our browser

again i'm going to go with susan this

was 200 so everything was successful and

now of course in the right dot body i

also have a name and the value is susan

so

now we can start doing something with

this data now i purposely set up two

examples

one is going to be for form which of

course is this one and then one is for

javascript now with the javascript

example this is where we'll actually

manipulate this people array fourth time

being with login this is a separate

issue we're just dealing with the form

so

we'll just try to make things

interesting by checking for the name

if the name is provided then we'll send

back welcome and then pass in that name

if the name is not provided so for

example if the user

is trying to submit the form empty for

example like so we'll just send back 401

please provide credentials again

please keep in mind this is just a

example and i'm fully aware that we can

check for empty values here on the front

end again the goal of this example is to

show you how to handle this on the

server so i have wrecked that body okay

i can see that in this case i have

name but it is empty so now of course

let's set up our logic first i'm going

to go with const name and that one is

equal to rec

that body so i'm destructuring my name

property and i'll just check if the name

exists whatever the value that could be

b

that could be bobby lee not could be

again taco burrito whatever you want and

as you can see i'm getting quite hungry

so let's go with return res

dot status

then let's set up a 200

which just says that we were successful

and we're gonna go with send

and we'll set up a template string

welcome and i'm just going to access my

name

so if there's some value i'll send back

200 and i'll say welcome whatever is the

value if not

well here we're going to go with res

and let's just add status here and again

just for kicks i'm going to go with 401

and we're going to go with send and of

course let's say please

provide

and credentials

like so

let's save this one and now we should

truly see how it works in the action

now i'll leave i guess the tab for now

and let's just try to submit so for

example if i submit with empty values

i'm going to say please provide

credentials and as far as my login it is

401

that's what the server is sending back

however if i type in some kind of value

for example anna comes to mind i have

welcome and anna so that's our first

flavor when it comes to post request

where we use the form and again this is

just front end where we come up with an

action and since this index.html is on

the same server we simply go with

forward slash and login of course if

your front-end application is separate

from your server then you're going to

provide a full path where the server is

hosted so basically a full domain and

then we go with method post now this is

technically a front-end part but it is

crucial that we understand it so then we

perform of course a post request we hit

our url

so in this case we hit our forward slash

login and this is the part where we

handle that on a server

in order to get that data

whatever we are being sent we need to

use a middleware this one is built into

express so again we simply just need to

use

app.use which is going to apply this

middleware to all our incoming requests

and then we just pass an extended false

flag and the moment we do that

indirect.body

will have access to our form values so

whatever

is set up here as a value that is going

to be our key and whatever is passed

into our form well of course that is

going to be the actual value that we're

getting so if i go here with name i'm

gonna see either susan anna or whatever

user provides now like i already

previously mentioned this is just for

demonstration this is just so we have a

bit more interesting example e instead

of just sending back the name

so hopefully this part is clear

and now we can focus on our second

flavor where we use javascript to

send the request all right and once we

have the form set up out of the way now

let's take a look at the javascript

option before we do though there's one

more thing that i would like to mention

if you take a look at the headers

you'll notice something interesting

where we have a content type for the

request header and of course this is

going to be application

and then we have this form url encoded

and the reason why i'm showing that

because of course for javascript it is

going to be a bit different so just keep

this one for your reference now

let's navigate back to our

static files basically to our front end

and now let's take a look at the

javascript approach

and interestingly here

where i have the javascript i do have

the form

keep in mind we'll still handle this

form but in this case it's going to be

done strictly using javascript and we'll

use javascript to send our http requests

and that is very very crucial that is

going to be the difference where instead

of form now i'll be sending that request

using javascript

and of course the content type will be

different that's why i showed you the

form example but what you'll also notice

that right away we have our list and if

you don't believe me you can double

check in data we have john peter susan

anna and emma so what's happening well

let's go to javascript html

this is where we have our frontend logic

and again let's take a look at our index

html

a little bit of css

nav

and then we have the form now in this

case i don't have the action and i don't

have the method

okay interesting so i have name

attribute it still has a value of name

so i should expect probably that this is

going to be the value that's coming in

with my request then i have a little bit

of form alert this is where we'll

display a little bit of functionality as

well as the result

now if you're not familiar

there's a package called axios which

essentially just makes it easier to set

up http requests

so

instead of using the built-in fetch

which i could have used i think axios

provides a cleaner api and better error

messages

and since i don't want to spend three

hours on explaining all this code

i simply went with axios and the way i

set it up i just set up the cdn link so

this just gets me the axios library and

then the moment i install it of course i

have axios in my front-end project

please keep that in mind those are two

separate things this is a front-end

project and

in order not to confuse you more i just

set up a few script tags instead of

going with a separate javascript font so

as you can see here i'm selecting the

result

so that is my div

and i have this fetch people

so that is the function that fetches

people from my server now notice the

path

it is api and people

why well because

in my server i have also api people so

this is for get requests

that's the default one however in this

case we're not doing that with a browser

we're doing with javascript so axios

has the method by the name of surprise

surprise get that just means that on the

front end we're performing a

get request

to the same server that's why we go

forward slash api and then people so

make sure these urls match

so if these paths won't match then

you'll have an error and to showcase

that if i go with p poles

then if you navigate to the front end

and if you refresh

can't fetch data

so we try to fetch people from our

server then we do a little bit of logic

and this is just vanilla.js not going to

cover it basically we tear it over and

then we just set up a nice heading 5s

and all that and then we invoke the

function but

if there is an error we'll look for the

error property now in this case i'm not

the structuring it i'm actually not

using it i just say can't fetch data so

that's step number one now the second

one is of course using the form

so then i select the submit button i

select the form i also select the alert

because we will display an alert if the

value is empty and again let me repeat

i'm fully aware that we can check for

that in the front end i just wanted to

showcase the server setup and then

notice something interesting where i

have this try and catch block in my

functionality so the moment the user is

submitting the form of course i invoke

my callback function it is a sync

because

for the actuators i can wait for

response and notice this one so i have

axios and again surprise surprise the

method name is post why because we are

sending a post request

and this is just an axiorys thing but

again we provide the value in this case

the url value is api and people so

something that we're not handling yet on

our server and this is the value

so again this is just axio syntax where

in order to set up whatever data you're

sending you just pass it as a second

argument and you set it up as a key

value pair now what's really cool that

would axios they set up all the content

types and all that good stuff for you so

again you just save a little bit of time

now if there is an error in our case

that is going to be if we're trying to

submit something and in fact there's no

value meaning we just try to submit

empty form value then we will display

the error message and again this is

really cool because axiorys just

provides

a very useful

error api unlike the fetch where you

really need to

jump through the hoops so let me save it

back to people so we can see of course

all the people

that

we have in our array currently and then

of course we'll focus on this post one

so as you can see i get the input value

and i just passed it in as a

name property awesome so now back in our

app js of course we need to handle it

and please keep in mind one thing where

app dot post

and then api

and people

is not the same as api get and api

people

even though the url is the same

methods are different and that goes for

all the methods we're going to use

whether you're talking about put delete

or whatever so just because the urls are

the same

doesn't mean that they mean the same

thing no

the method is different here i'm just

reading the data i'm reading data from

api people here i'm actually trying to

add data

and again we're going to go with wreck

and res

and let's just go with some simple

response

now for time being i'm just going to say

that my response is going to be 201 now

that's the response that we send back if

we are performing a post request and we

are successful so i'll just say res that

status 201

and for time being let's just say send

and i'm just gonna say success and of

course now what i would want

is to navigate back to my javascript one

hour fresh i'm getting all my people and

now let's try it out so i'm gonna send

this one

so i sent again here nothing changed but

if i take a look at my network tab

i should see and by the way sorry i'll

have to do that one more time let's go

with i don't know susan here let's try

to submit and there it is now of course

i have api people and 201

so that's the response that i'm getting

on my front end so let's bravely click

on this one and we can see that the

request url is api people okay

the method was post now the response was

201 so it was successfully created and

now check it out when we look at the

request headers of course we have

application json so on our front end we

do need to add this content type

when we are sending the data now again

what's really cool about axios it adds

for us

but in general you need to keep that in

mind and there it is again we have this

request payload

and the name is equal to susan so

whatever i'm going to pass it in if i'm

going to send it empty then i'm going to

still have the key name

and the value will be empty now the

gotcha here is even though we're

handling a

form submissions we're not handling the

json data so yes we know how we can send

back the json data but we're not

handling the incoming json data and this

is where another middleware comes into

play so i'm going to say parse json here

and we simply need to go again with

app.use

and we go with express

and json now in this case i'm not going

to go to documentation

if you want you can do that in my case i

will try to save us a little bit of time

and we'll skip that and here we have api

people and now similarly to our login

we have access to the form data that is

being sent with javascript in the rec

dot body

previously

before this was added no we have no

access yes when it comes to form that

was one setup now when it comes to

straight up http requests for example in

this case sent with javascript no we had

no access so we were getting a json

and now we added a specific middleware

that handles that so of course in this

case now we can set up more logic

correct we can say that we're looking

for the name and if the name is provided

then awesome then i'm going to send back

that new person that was created so we

can add it to our front end and again

this is the case where we're not

persisting this data anywhere later

we'll learn how to do that for now i

already have the code that adds it to

our front end however if the user tries

to submit without any values well then

there's going to be a error message so

in the api people

in the post method let's set up our

logic

where i'm going to go with const name is

equal to

rec.body

the middleware makes it possible now

and then i'm going to say if the name is

not provided well then i'm going to send

back the 400 then i'm going to say

please provide name value so there's

going to be a error message so i'll say

here if and

exclamation point and if the name is not

provided then let's go to return

res

dot status and for the request error we

go with 400 that's the status code and

then let's go again with json and in

this case we're gonna go with success

now this success will be false and then

we're going to go with message again i

would suggest using the same properties

because of course i'm handling them on

the front end as well so in here i'll

say please provide

name value like so now if the value is

provided whatever it is then of course

we can send back res.status 201. hey

guys it's john from the future with a

small update

as you'll see in a second while i was

recording i forgot to change the methods

so instead of writing json i just left

it as send

and while we can get away with it in

this example normally you always want to

use json instead so make sure you change

your method from send to json and in

this case

let's just set up a proper object we'll

say success is true so now we're being

successful and i'm just gonna send back

that person now i'm going to set it up

with person key and the value will be

named whatever i'm getting again please

use the same ones if you want to have a

same result now

let's navigate back we can refresh just

so we are all on the same page and if we

type susan now we should see another

susan added to our list

and then again we can go with john and

i'm just being lazy on coming up with

original names and as you can see every

time we add

value in our form we're being successful

we're actually getting back this value

from our server and then we dynamically

added to our front end and again the

reason why we're doing this way is

because we're not persisting this data

so that's why the setup is following

later of course we'll learn how to

persist this in a database as well and

if i try to submit with empty value

check it out now of course i have people

and this one is what 400 right

notice here and it says please provide

name value now if you want to do a bit

of console logging you're welcome to do

that on the front end if for example you

are iffy about the syntax but just to

let you know when we talk about axios

here

effectively we're getting back the whole

thing so when we perform a request http

request with axiorys we're actually

getting back a

giant object

now what we're interested in that object

is a data property

so that's the response that is coming

back

from the server

and then in here as you can see i set up

a heading 5 with data.person so that's

the person that we're sending back from

our server now

if for example there is an error we go

with error response again data property

because that's where the useful

information sits because the object of

course is giant with lots of useful

information but as far as what we're

sending back it is sending in data and

then message now i'm looking for the

message property of course here because

i set up a message property

on the server hopefully it is clear this

is our second flavor

where effectively we perform a post

request from the application

and of course in that case we do need to

provide content type as well as the data

and next video we'll install

and cover some basic setup for a very

useful tool

that is going to save us a lot of

trouble when we work with post

delete as well as put methods

all right so at this point we're

familiar with two ways how we can send a

post request

so we covered how we can do that using

the form

as well as straight up http request in

our case using javascript

however there's a major problem in our

current setup

and the problem here is following

if

we need to create a frontend to test

something for every route as you can see

i mean our development is going to be

extremely slow

because we can clearly see that it's

probably going to take us way longer

just to set up a front end than setting

up just one simple route so every time i

create a route i'm probably going to

spend i don't know five six times more

on setting up the front end where i can

test this route and of course there has

to be a better option and that better

option

is a tool called postman

and postman is just awesome for quickly

testing our apis so at this point i

strongly suggest that you navigate to

postman.com again it's a free tool so

you're not going to have to pay anything

but for mainer of the course yes we'll

use this so if you're kind of iffy about

installing something new this is

something that is required so navigate

to

postman.com

and then they'll try to sign you up you

don't have to do that just keep

scrolling down keep scrolling down and

all the way in the bottom you'll see

this download app option go here and

they'll right away detect which

operating system you're using of course

in my case that is mac so download the

application once it's on my computer i'm

going to navigate back to the desktop

i'm going to go to downloads i'll crack

it open

then of course i'll just move it to my

applications like so and i already had

one on my computer but i removed it so

we can do these steps together then this

is the application let me zoom in that's

the postman so just click on it

and then it's going to spin up the app

and eventually

you'll hit the dashboard and i'm not

going to spend half an hour on this

setup but of course as we're progressing

we the course as we're progressing with

our examples we will cover

more features

that this app provides

and basically here you'll have all your

requests that you can actually group in

collections and again that's something

that we'll cover a bit later and this is

where we can make those requests and in

order to create a new request we just

click on this plus sign and check it out

so at the moment i have untitled a

request

in here i need to enter the url and i

can send my request not orders here on

left hand side what do i have i have get

but what's really cool i have all these

methods available as well so first let's

test out the get route and then we'll

see how we can deal with post route as

well now as far as our url what it is

well it is localhost 5000

and of course the full url is api and

people now this is for the post as well

as the get and since we're testing it of

course that's why we have a method with

the value of get so let's go here local

host and then five thousand

then forward slash api

and people and the moment i click send

check it out what do i see here in the

bottom i see my object the success value

is true and there i have my data so as

you can see the moment i create my route

for example post route or put route or

whatever i can test it immediately i can

test it within a few seconds instead of

building the whole front end just so i

can test one route and of course once we

have covered get route now let's see how

we can deal with a post route so we need

to change the method of course

now the url still stays the same because

i do have a route for the post as you

can see and in here what i'm looking for

i'm looking for the name

in the body

and how do we construct a post request

in a postman well we do that in a

following way first we go to the body

and we look for raw

and instead of text i go with json

because i'm going to be sending a json

data so this is not the case where we're

working with the forms in this case

we're sending a json data and what

you'll notice something really

interesting in headers right away

there's going to be a content type

so let's see let's set up first the body

and you'll see how it gets added so

we're gonna go here with a name again

this is what i'm looking for that's why

i need to pass it and then i'm gonna set

up some kind of value now since i'm

setting up the json please remember that

we need to use double quotation marks so

i'm going to go here with john and if

you paid attention previously we had

eight headers and now we have nine so

i'm gonna go back and there it is now i

have content type application json so

that's really cool we don't have to do

anything the header gets added for us

and of course the moment i click send

check it out now i have success true and

person john why do i have that well

because that is my response i have

success true and of course whatever name

i received i just sent it back so now of

course let's quickly test out our 400 as

well so i'm going to navigate back and

then in the body i'm just going to send

a empty string or you can remove name

altogether that's really up to you and

now of course i have 400 bad requests

and success is false and of course i can

see the message so as you can see we can

test it within seconds and to really

hammer this home why don't we create

another post route and quickly set up

some kind of response and let's test it

out in our postman as well so i'm going

to go in between the post and login i'm

just going to go with app.post

and the route is going to be following

i'm going to go with path of api

people

people

and i'm going to add a postman here

or you know what let's do it this way

let's go postman

and then

people like so

and then as far as the callback function

again

we get rec res

and then

in the body again i'm going to be

looking for the name property so i want

to get that name so i'm going to say

that i'm expecting it

we'll go with name rec

dot body again if you want to cancel log

the body you can do so but i think we

have done that quite a few times so i'm

going to omit that then i'll copy and

paste

my response so again if the name is not

provided meaning if the property is not

there or if it's just empty i'm sending

back to 400 however if i'm successful

then i'm just going to take my array

i'll add that extra person and i'll send

it back now i'm not going to add the id

i'll leave that one blank because

eventually database will do that for us

so i don't really see the point of doing

that manually so i'm going to go back to

my api postman people and then again

this is my error response and now let's

copy and paste our status and then

instead of sending that one person we

created why don't we do this why don't

we go with data

and then of course the array name is

people and now as you can see i'm using

the spread operator and i'm just going

to add that one single person so i'll

save now of course we do need to change

the route so it's not going to be api

it's going to be postman

and then people like so now let's add

for example peter and the moment i click

send there it is i have my success true

and as far as data

all the way somewhere should be peter as

well so again we just grabbed that peter

and then we added to our array hopefully

this makes sense and now of course we

can work on other http methods as well

all right and once we're familiar with

postman now let's work on the other two

methods

so now we're gonna be working on put

method as well as the delete

so i'm gonna scroll down and below the

post login route i'm gonna go with app

and then put now again this method

is for editing the data so put method is

for update

and again the convention is following

where if we have a list for example in

this case that would be api and orders

if we want to edit

or delete we go with our route parameter

where effectively we set up a route for

api orders and then we go with colon id

and this is going to get me that one

specific item now please keep in mind

one thing where this is a convention so

technically there are multiple other

ways how you can set it up but there's a

reason why that convention exists and

that's why throughout the course we'll

stick with this convention i'll cover

the official name of this convention a

little bit later as well as a bit more

details about it for now i just quickly

want to cover both of the methods so i'm

going to navigate back i have my put

method that is for modifying the data

and in our case what is the url for the

whole list because that is api people so

this was just for testing correct and

then we go with api forward slash

and then we go with people

and then of course i also want to add

that id so this is going to get me that

one specific item and again the reason

why we're doing that because when we'll

send our

put

or delete requests we'll send to a

specific path

so this is going to be that one item and

if that item exists

then in the body there's going to be

data to update

or in the case of delete there's going

to be nothing in the body we'll just

remove that item and you'll see how it

works in a second so please be patient

so we're going to go with people and

then remember again we have route params

and in this case i'm not going to call

this person id i'm just going to say id

just remember that we can call it

technically whatever we would want and

now in this case there's two things that

i'm looking for first i want to get the

value here in the params and remember we

access that using the rec params and the

second thing when it comes to update

when it comes to the put request

i'm also going to send something in the

body why well because if i'm updating

for example if i'm changing the name

from peter to susan or whatever of

course i also need to supply this value

so you need to understand that there's

two sides of this request

not only we're looking for that specific

item that's why we use the params that's

why i specifically say hey i would like

to get the item number one or item

number two i also need to supply this

value because otherwise what's the point

of updating something so let's access

both of those things let's say that i'm

gonna get the id from rec params so this

is going to tell me which item and then

the second thing since of course i want

to update that item i need that value as

well correct so we're going to go here

with const

and i'm going to be again looking for

the name and we'll say reg dot body

and that's it that should do it so these

are the two values that we're gonna get

from our question and just to make

things interesting i will console log

them right now so i'm gonna go back to

the postman and remember we need to

change the url it's not gonna be api

postman in this case it is going to be

people and now you can select any of the

ids whether that's one all the way up to

the five so we go here with one

and then as far as the value what is the

value for the first one it is john so

kind of makes sense if i'm updating that

i go with peter correct so we have put

request we have api and then people and

then check it out the moment we send it

now of course the request is hanging

don't worry about that but in a console

we should get api people and then the id

and of course the reason why i don't see

anything because i was smart enough and

i didn't console log anything so i'm

gonna go back with id name and you know

what for timing let me just send back

hello world okay let's go here

let's actually send it one more time as

you can see could not get the response

that was the error this time in this

case i am getting hello world so that

worked beautifully and as you can see

the status code is 200 as well and then

in the console i have one

and i have the repeater so this is going

to be the id

and of course this is going to be the

value now if i'll change it of course if

i'll say number two and if i'll send it

again i get back my response and now the

value for the id is due hopefully this

makes sense so now of course at this

point we need to set up the logic again

we are going to set up the logic with

our local data with our people array

eventually in next examples we'll work

actually with database but the main idea

is exactly the same

where from the postman while we're

testing we're sending the id

in the url basically we add that url

parameter and then in the body we'll

send the value so that part won't change

just the functionality in here and as

far as this functionality well since we

have a simple javascript array first i

would just want to get the person with

that id

if the person doesn't exist

then i'll send back the error response

and if the id does exist then i'll just

change the value now i'm not going to be

looking for the error message if the

value is not provided we're going to

cover that once actually we work with

database i think is just going to be at

the moment waste of our time so let's do

it people

i'm going to remove both of these

console logs hopefully you understand

how we supply both values in the postman

and i'm going to start by

creating a person and this is going to

be equal to people

dot find again i have the array so i

have access to all the array methods and

then

if the person id matches

to my params id then of course i'm going

to get the person now let me check in

the data notice i still have it as a

number so i'll have to change the type

as well so i'll say if person id is

equal to a number and i'll pass in the

id that i'm getting from my params

whether that's one five or maybe it's

going to be id that doesn't make sense

all right good and if the person doesn't

exist well then i'll send back the

response now again in order to save us a

little bit of time i'll scroll up and

i'll look for any of my error messages

since i just want to copy and paste and

change some values around so in this

case i'm going to look for this name if

it doesn't exist

then of course we have the error and in

our case of course we just need to

change it around if the person doesn't

exist so if we cannot find that in the

array then we're sending back 404

remember that was the status code if we

cannot find the resource and as far as

the response we have success and of

course it's going to be false and now

let's go with message and in the message

we're going to use a template string

we'll say no person

with id

and then i'm just going to pass in the

id

so that's the first

response if

of course the person doesn't exist so if

in the primes we enter for example value

six

we know that we have only one to five or

abc now the second thing if the person

doesn't exist now of course i just want

to iterate over the array

and for that specific person for the

person whose id matches my params value

i'll change the name since i'm expecting

that one to be in the body again we're

not going to deal with this error for

now we'll do that once we work with

database and we're going to go with new

people

new people here and we'll say people

map so i'm iterating over my array again

i'll reference each and every person as

a person and i'll say if person id

matches to that one i have in params so

number id again

then i'm going to say person name since

that is the only other property i have

is equal to my name now where i'm

getting the name because i'm getting it

from the body

so if the id of the person matches to

that one in the params then please

change the name that i can find in the

body if not

then simply return a person return

a person and now of course all the way

in the bottom i'm going to go with res

dot

status and then we're sending back 200

since the request was successful as far

as the json we go with success or sorry

not super we're gonna go with success

true

and then as far as data well now i'm

sending back the new people so let's go

back

at this point i have two

so let me change it back to 1 because i

know for sure the

first value was john so again

the path is api

people

and then id of 1 and i just want to

change it from john

to

peter so let me double check in data

this should be john uh it's a good thing

i didn't go

with the idf2 since that one is already

peter so now let me send it and check it

out

now i have success true

and data

of course is my array and instead of

name being john

for the person number one now the name

is peter and of course if i'll do the

same thing for example

for the person number three again we

send it back of course now i have three

peters because i just keep changing

those values again we're not persisting

that data but while we're making

requests you can clearly see how we are

modifying this data and we do that using

http put method

and then of course the path

is api people and then whatever the id

and again the whole reason why is that

happening because on our server we are

handling that

all right and the last method i would

like to cover

is a delete method so below the put

method below the modify option i'm going

to go with app and the method name is

delete again the convention if you have

a list is going with a list url and then

add that specific id because the setup

is going to be extremely similar to a

put one now the only difference is going

to be that of course in this case when

we're deleting we're not expecting

anything in the body

the user hits the url for example api

people and then one we just remove that

sucker from our list that's it

so let's go down where we have

app delete and again the path is

following where we go with api

and then people

and again let me stress one more time

something where these routes are

different

when we talk about app.get and api

people when we talk about

app.post and api people or even if we

talk about app.put and app.delete

just because the path is the same since

the method is different

these are different requests that is

crucial please don't think that just

because you have a different method you

have to set up a whole new path no

you can have the same value for the path

if the method is different that is

totally different request so let's go

here again with our callback function we

should already be comfortable with this

one we have rack and res and in this

case i'm not gonna the structure out the

id from the prompts i just want to

showcase that we also have this option

of accessing the params directly so

first again i want to look for the

person then we'll send back this

response and yes oftentimes put and

delete are going to be extremely similar

and then if the person does exist then

of course i'll just filter out the array

and remove that person from the array

since again the whole point of this

request is to remove that person from

the array so in this case

you can actually copy and paste and i

know that some of you might find that

annoying but at the same time we do need

to speed this up and start working with

a database so hopefully you can forgive

me i'm just gonna grab everything

starting with the person all the way

until the end of our error response d404

let's scroll down copy and paste and

this is what we're trying to do so i'm

trying to find a person whose id

matches that in the params and of course

in this case i haven't destructured out

the id right so i just need to change

this around where i go with rack

and then params and the id again the

setup is exactly the same the difference

is that i'm directly accessing the

params object and if the person doesn't

exist

then we send back d404 so let's try this

response

i'm gonna go back to my postman again

the api is people but we need to change

the method right so now i would want to

delete and since i want to test out the

error and as a sign up you can send the

body doesn't really matter we're not

handling that on server anyway so it's

really irrelevant but since i want to

test out the error i'm going to go with

abc so again the path is localhost api

people and then abc and if everything is

correct i should see the error and of

course there is but something tells me

that this is a different error so let's

go back and check it out and of course

the issue is following notice here in

the json how i'm accessing the id now of

course i haven't destructured it right

in this case i went with rec params and

then the id so i'm going to go with rack

params and the id let's save it and

let's try one more time again i'm

looking for a person whose id doesn't

exist so i'm gonna get the error and

there it is i have success

false

and as far as the message no person with

id of abc so i was looking for the

person

with id

that's not in my array so that's why of

course i got back the error response so

now i'm gonna go back to our app delete

request and here i just want to filter

out the array and the way we're going to

do that i'm going to go with const new

people

is equal to

people.filter

that's my array and i'm just filtering

it i'll pass in my callback function

and

i'll reference each

object with the person parameter

and i'll just say if person

id

does not match

the id found in rec dot params then

return that person

if it does match then it's not going to

be included that's why we go with

exclamation point and remember that we

still get our id as a string so we must

do the number one first and then only we

go with params and the id so that's our

new array without that specific person

whose id

matched the one in params so now of

course let's just go with our return

return

res

dot status

here and this is going to be 200 of

course

and i'm going to go with json and we'll

set up our object success is true

and i'll send back the new people array

so we're going to go with data and then

new people let's save it

and let me test that out e in the

postman where of course now i'm gonna go

with id

that is in the array and that's gonna be

number one so if i send notice how it is

irrelevant if i send body

again because i'm not handling that on

the server anyway but

if i take a look at my data

well the person with id number one

john is missing why well because his id

matched to the one that i passed in the

primes so now of course he was removed

from the array so if i'll go with five

same deal now the john is back here

because again we're not persisting data

but

the person with id of five has been

removed from the array hopefully this

gives you a good understanding how we

use other methods as well not just get

and why we go with postman instead of

setting up the front-end but before we

cover

router in express let me just stress

something

that yes

while we're developing our server of

course we'll use postman because you can

clearly see how much faster it is i set

up the route and i quickly tested

otherwise if i would have to build a

front end for every route that i'm

creating i mean the process would be

just very very long but at the end of

the day

when you set up the api

the expectation is that there is going

to be someone who's using that data now

that could be on your own server so for

example if you're building a full stack

application with mern that's one of the

options that could be decoupled

application remember how i showed you

a example where i have the api on my

server but then there is a react

application that uses it it doesn't mean

that you have to build that front-end

application yourself

just be mindful that the whole idea of

setting up the api

is that someone is going to be using

that data that's it that's all i want to

say and now of course we can talk about

router in express

all right i think we're moving along

quite nicely

but as you can see the moment we're

starting to have

more routes

and more functionality

we have another issue and that issue of

course is the fact that our app.js

is getting quite busy and technically we

don't even have that many routes so what

is the solution well the solution is

using express router where we can group

those routes together

and then as far as the functionality and

actually set them up as separate

controllers

now eventually

in the next example when we work with

database i'll cover again the common

setup

which is called mvc basically it is a

pattern it's not a rule but it is a

nicely used pattern when you're setting

up the api but we are missing the model

part in the mvc pattern because we

haven't connected the database so i'll

just leave it at that just please keep

in mind whatever i'm about to show you

in this video and in the next yes it is

a pretty common convention and pattern

so

i also suggest sticking to that now also

i want to mention that in this video

we will do a bit of copy and pasting

meaning we'll have to refactor the code

because i think this is a perfect

example for us to set up the router

where we already have some code so you

can clearly see the benefits of setting

up the router instead of me coming up

with some empty routes and then saying

that yes that is the best pattern so

with that said first where we have the

request the post request for api postman

people i want you to change this around

a little bit so as you can see i keep

going back and forth in this case i want

to go with api people and then let's

just say postman again it doesn't really

matter we're not going to make requests

anymore from the postman in these

examples anyway this is just about our

code structure and then once we change

this around i also want to move this

login up just so it's a bit clearer what

we're doing so take this login route and

keep moving moving moving moving and

just place it on top of your routes

and there it is now of course i have my

login and now notice the pattern

whereas i have one route for the login

but then rest of them i have api people

api people api people postman

api people id

and hopefully you get the gist again i

have api people id

so wouldn't it be nicer

if i could somehow group all the api

people and also add one for the login

but basically in a separate file and the

way we can do that is by setting up the

router now again common convention

is just creating another folder

so i just want to make sure that i'm

actually doing that in the express

tutorial let's create a new folder

and common convention is calling this

route and then you just come up with

whatever name you want now in my case

i'm gonna go

off for the login because

we're just gonna imagine that maybe

there's going to be one for register one

for logout or whatever

and then there's going to be one

40 people so that's going to be for my

api and people so let's set up these two

files i will zoom in massively just so

you don't think that i'm cheating so

let's go here with alt js this is where

i'll place my login one and also right

away set up my

people

people

just okay awesome i'll start working in

people.js because it's going to be a bit

interesting and then we'll do the same

thing in the auth as well

and the way we set this up we simply

start by requiring the express so we go

here express require and of course the

module name is express and then instead

of setting up the app we go with router

and we explicitly get the router from

the express so this is going to be a

router instance

that takes care of the routing instead

of the app

so

we're not going to do the routing

anymore in our app.js well sort of we

will we'll use the middleware but as far

as the specific urls we'll handle that

in this routes people file and the way

we set up the router we go with router

and that one is equal to like i said

express dot and then we go with capital

letter router and then we invoke it

awesome

that's a great start we can save this

sucker and now i want you to go back to

app.js

and don't grab the login that's why i

set it up separately above all the

routes but grab all of the ones with api

and people so take these suckers here

all the way

up to delete

basically stop at listen cut it out

and then copy and paste in people like

so okay

great so now of course i have all my

routes here

now our next step is actually changing

from app

to router because i want the router to

handle the routing so in my case i'm

going to select all of my apps like so

so i'm just doing that with command d

in the visual studio code and

at this point i should have multiple

cursors like so and i'll set up my

router

and now all the way in the bottom

i want to go with module

not exports and of course at the moment

i'm exporting my router

and then once we export a router of

course in the app.js

i want to set up a app.use where i'll

say yes for the path that starts with

api and people

i want to use my people router and the

way it's going to look like we're going

to go back

and

at this point we have people here and as

a side note actually we need to cut it

out but we're not going to use it here

as well eventually the setup is going to

be different so for now yes

please cut it out and copy and paste in

people but since we'll be setting up the

controls we'll have to do that one more

time anyway so i guess i'm going to go

below the router i'm going to look for

my people otherwise my functionality

won't make sense and in this case

remember

we are sitting already in routes so i

need to go two levels up and i still

need to look for my data correct so now

of course our functionality should work

hopefully we don't have some weird bugs

and then like i said in the app jess now

of course i would want to use my

app.use so i'm going to go below express

json and i'm going to say app.use and

now i need to set up that base route now

what is my base route here well it is

api and people correct

because

this is just my route and then in some

cases i have the postman or i have the

id

that's it but the base stays the same

okay awesome so we provide this path we

say api and then people and now i want

to set up that router

and of course in order to set up the

router

i need to import it

and you can call it people router you

can just call it people again

that is really up to you i'm just going

to say people is equal and now we need

to require it and remember we have a

folder by the name of what routes

and then we also have people file okay

awesome we require our router

here correct

so that's our router and we're exporting

awesome so we get the people and like i

said with use we can use the path if we

want so this is not going to be applied

to all of them this is only going to be

applied to the ones

that start with api people and then we

pass in the people we'll save it but

there is a problem you see once we set

up this router

with a base path

in the people

actually we have a mess right now

because we already have the base

for our router in app js where we have

api people and now in the people.js if

you check it out we actually have api

people forward slash api people so i

fully understand that this is going to

look a bit drastic

but in order for this to work we

actually remove everything we remove

that base so we go here with just a

forward slash why well because we

already have the base here we have api

people

so that's how the route is going to

start

and then

we just have the forward slash so this

will match whatever i have in the

address

and since in the get and in a post both

of them just have api people well i

simply go with forward slash again i

fully understand that this might look a

bit confusing in the beginning but again

the more routers you'll set up the

easier it's going to get so this will

just match

whatever path i have here whatever base

path i set up in my app.js so i'm just

saying yes i'm using this people router

and in the people since i already have

base path in place i can simply

reference it using the forward slash so

this is going to match whatever i have

in app

and once i have spent what seems like an

eternity on the base path i can keep on

scrolling and again notice i have api

people and then postman so what's the

only thing that i need here it's just a

postman because i already have api

people so i remove this sucker here

keep on scrolling

then the same with id right we only care

about this one that's the whole point of

setting up the router so we can start

splitting up our functionality in

multiple files same goes with this last

id

and even though i think i said that

we're not going to use the postman i do

want to quickly check

and i'm going to go with get simple if

the get works trust me the other ones

work as well so we go here with api

people we send but unfortunately i get

the error hmm that's interesting so let

me check i think the problem here is in

the app.js

i don't have the forward slash so let me

try this one

let me send it one more time and there

it is now of course everything works so

my apologies i forgot to add here

forward slash that's why we were getting

the error and of course everything works

i can go with get i can get my list

if i want i can also maybe delete a

person so i'm going to go delete and

we're gonna test three so let's see we

send and as you can see

the person with id of three is missing

so as you can see our route works so

that's the first step so now here's the

challenge

try to repeat the same thing with login

now with login

it is going to be a bit simpler because

we don't have that long of a path but

again stop the video and try to set up

the login yourself and then once you're

ready resume it and we're going to do it

together

how was it hopefully you were successful

and i'm going to give it a shot so first

remember we needed a file so in this

case i do have auth js awesome

so i'm just gonna cut this sucker out

from my app.js

and place it in off then of course i do

need to have the boilerplate for the

router so again let's go with express

require

we require the module by the name of

express of course then we set up our

router

router and that one is equal to express

dot router we invoke it then we change

this value

around like so

and then we're just gonna go with module

and then export and that one is equal to

our router we do this

then we navigate back to app.js and

we'll have to import it as well so we go

with auth i guess let's call it that

and we're looking for auth file

that's where our router is coming in and

then of course i just need to set up my

middleware myapp.use where i provide a

path of what well of login and in this

case i'm going to be more careful and i

will add the forward slash and of course

i'll set it up as auth so let's save

this one and then the only thing we need

to do in the login

is simply change it around where i'm

already handling the login in the app.js

so forward slash login so again my route

now is forward slash login so i simply

go with the forward slash i already

covered the route in the objects so

i don't need to do that anymore in here

and you know for this sucker just to

make things a bit more interesting

why don't we use the browser now keep in

mind you can still use the postman if

you want but i'm gonna go the browser

out so we're gonna go with new window

i'm gonna go with 5

000 here

and of course this is going to be the

small screen i have traditional form so

let's go with some kind of name peter

and i send and i have welcome peter and

of course if that is the case i know

that my functionality works so we are in

good shape again probably the most

confusing thing

is this one where we use app.use to set

up our route so all the routes

that will start with this api people are

going to be located in the people.js in

the routes folder and in there instead

of using app we use the router and then

since we already have the base

setup in the app.js

when we have a route that exactly

matches the base we just go with forward

slash now if there is something else

after the base route so some additional

info of course then we go with forward

slash which just means that we match the

base path and then we add whatever value

we want

and hopefully you can see how much

cleaner is our app.js

where now we're splitting up the

functionality in separate files

for our routes beautiful i think we

really clean up our app js

but we're not out of the woods yet

if we take a look at our auth js yeah

this one looks somewhat clean but we

need to keep in mind that we only have

one request

we only have one post request to our

login however if we take a look at our

people.js

it is still somewhat of a mess because

we have a bunch of functionality since

of course we have more routes

and of course a better setup is if we

would be able to split this up into a

separate file and i'm talking about the

functions so imagine this scenario where

we only would have a router

then i'm gonna set up my method whether

that's get post or whatever then i'm

still gonna have the route but the

functionality this one the controller

is going to be in a separate file so

it's going to be a separate function and

you'll see how much cleaner our file is

going to look like just in a second so

again we need to head back to our

express tutorial

now i'll zoom in

i'll create a new folder

and again common convention is calling

this controllers

for the reason that there is a pattern

called mvc so model view controller and

then again we come up with the name in

my case i'm going to go with jobs or i'm

sorry not jobs i'm going to go with

people and i'm not gonna set up one for

the other one for the auth since there's

only one but for people i will set up a

controllers file by the name of

people.js and here

i just to set up first my functions

and the way it's going to work we're

going to go with const and then again

you just need to come up with a name so

for example for get request where i'm

getting people i'm just going to call

this get people keep in mind this is

just a function so the name is really up

to you and since i'm going to have the

same functionality of course i need to

keep in mind that i do need to have

access to rack and res now it's really

cool that once i pass this function as a

reference it's still going to work so i

simply go here with this rack res and

set up the functionality now probably

faster is just going to be doing like

this where i cut out

and then back into controllers i copy

and paste now i know that some people

might find this annoying but yes i'm

purposely refactoring the code so you

can see the benefits right away and i'm

going to do that for all the functions

and

for a little bit it's gonna probably

look messy

where i'm gonna do the same thing for

the post so i guess first i'm just gonna

cut it out and then back in the

controllers nothing routes in the

controllers let's come up with that

function as well so const and in this

case i'm going to call this create

person

i'll copy and paste the code

okay awesome

back in the routes let's get the postman

one so in a controller let's also call

this const and create

person

and postman like so copy and paste

that's my function then back in routes i

have one for put

so i think it would make sense if i call

this for example update person again cut

out everything

starting with a function and then all

the way to the closing parenthesis

cut it out

back in controllers we're going to call

it const

update person

like so copy and paste and lastly let's

deal with a delete one as well

so let's keep scrolling

again we cut everything out

like so

and then back in the controller let's

create one for deleting the person so

const

cons delete person

and copy and paste and if you remember

which seems like an eternity go

when we covered the exports i said that

of course we can also use right away

module exports and then whatever so for

example in this case that could be get

people or create person or

create person postman now in my case i

always prefer to do my exports all the

way on the bottom where i say

module exports now this is going to be

the object and now i just want to access

all the functions keep in mind

it doesn't change the functionality

functionality is the same where i'm

basically exporting an object

with bunch of functions so here i just

need to reference their names so it's

get people it is create person

create person postman

then update person and lastly it is also

for deleting the person now one thing

that is missing of course is the people

like i said this is just going to be

temporary

so i'm going to go to the controller

here

and i'll copy and paste now in this case

the path is correct because

the route was already in a separate

folder so

that

should still work and of course now i

can save my controllers and in the

routes what i need to do is of course

import all of them

so in this case we go with const and

again i'll write away the structure all

of them so let me just copy and paste i

think it's going to be faster

like so since the names of course are

going to be exactly the same i

destructure them and i'd structure them

from

require and then of course we're looking

for controllers and then more

specifically i'm looking for the people

like so and once we have required them

of course now we pass in the function

reference so for example here i can say

get people now i do need to add a comma

and if everything is correct our

functionality is still going to work

so in the controllers we're still

accessing rack and arrays

and we're still sending back the

response but of course the benefit of

all of this work

is the fact that our routes file is

gonna get much cleaner so in here

remember the name was create person

like so

and then we have one for create person

postman

and let's set it up like so then we have

also one for update

person and lastly we have one for the

leading person right so we go here with

delete person i save again i'm not gonna

test all of them out but i'm gonna go

with for example delete

and i'm gonna look for four this still

works

i remove the person number four

and also if i check out the get one

for the people this also should get me

back the array so i know that my

functionality still works but i nicely

cleaned out my file now lastly before we

talk about the databases i just want to

mention that when it comes to setting up

the routes

we actually have two flavors so i'm

gonna comment these ones out and i'll

show you another way how we can set up

the routes and effectively the benefit

is that we can set it up in fewer lines

of code keep in mind the functionality

is going to be exactly the same so again

this is going to be the case where it

comes down to your preference if you

prefer setting up your routes this way

you can definitely do so there's no rule

against it if you prefer the method that

i'm about to show you then of course you

can use that one instead so we go with a

router and then we go with route and

then in the route i set up the path

and again since there's get and post

that match exactly what i have in base

same situation i just set up the forward

slash and instead of setting up them

separately for example get and post i

can just chain them so chain one after

another so i go with get that is of

course my method

that is not changing and then i need to

pass in my controller function okay as

you can see

almost the same in this case however i

can change it now the method names did

not change the paths did not change

they're still

actually referencing the base path in

here what we have in app.js but since we

can chain it we can simply write it in

one line of code so of course the

callback function is gonna be create and

i believe it was person so create and

person like so

then we have of course one for the

postman so in this case of course it's

not going to change it's pretty much

going to be the same logic where we go

the router route

like so and then we go with forward

slash postman and then of course i want

to chain

dot and i believe it was post right and

then we go with create person postman

and then we can again set up one line of

code for the put and delete so in this

case i think i'm going to just copy

where i have router dot route then we

set up our route and in this case it is

going to be forward slash and then id

and then we have two we have one for put

and we have one for delete so we go with

delete and then as far as the callback

functions we go with update person

and also we have delete person and

finally let me just stress it one more

time where whichever setup you choose is

really up to your preference

functionality is exactly the same we go

with router route and then we can just

chain our methods and add the callback

functions

now in this case we set up each route

separately so for example if you have

multiple urls that match yeah you're in

good shape you can just set up router

route pass in the url and then chain all

the methods and lastly let me just

quickly test it one more time since i

made some changes i send it and there it

is i successfully get back my people so

with this in place

with our router in place

with the fact that we have covered all

the methods

the get post put and delete i think

we're ready for the next level where we

connect our server