Learn What Matters 2 - Mastering Node.
js Fundamentals
1)What is backend?
-The backend is the server side of the website. It stores and arranges data, and also makes sure
everything on the client side of the website works fine. It is part of the website that you cannot see
and interact with. It is the portion of software that does not come in direct contact with the users.
-backend developer is the person who programs server and database.
2)why backend?
-To make websites more usable and purposeful for the audience
-To make websites dynamic.
Dynamic means user can consume information from and give information to a website.
For eg: in a Facebook profile, one user’s profile image and bio is different from other users’ profile. In
such places backend is used.
3)Why not front end alone?
With front end, websites are static and they are not of much use.
4) what do we need?
[Link], mongodb, mongoosejs, [Link]
CONTENT:
-node js install:-
Install means to copy files into your computer/laptop/tablet/any device
Installing is not same as copying but installing is copying the files into C drive or wherever we want to
do the installation.
To install node js, go to [Link]/en and download LTS version of nodejs and install it.
-import and export in js:-
Import => require(‘<js file path>’)
Export => [Link] = <some variable>;
-run the code:-
To run the code, open terminal by clicking “CTRL + Backtick key” [` =>backtick , ~ =>tilde ] and type
“node .\<jsfilename>.js ”
Eg:
(keyboard shortcut => after typing node and <space> , type sc<tab key> => node .\[Link])
-Node JS is a lot of C++ code of chrome browser’s v8 engine wrapped with JS code which allows us to
make server environment with JS. [node=>v8 engine and JS wrapper]
-npm usage:-
npm => node package manager.
//npm is a place where we can get many packages.
//npm is like node’s playstore of packages.
//package=> already created functions/features to accomplish some tasks is called as a package.
(or) //package => files of code | npm => playstore of packages.
//initially npm was used to get and install only node’s packages but now, using npm, we can even get
and install packages for react js, vue js, java, etc. So, now , they removed the fullform of npm as node
package manager and now if we visit npmjs’s website, we can see that for every click on the logo or
full form , we can see that the full form keeps on changing and hence, right now, there is particular
full form for npm.
//when we install node js, with it, even npm gets installed. So, we need not install npm separately.
To check if npm is installed or not in our pc, open cmd prompt and type “npm -v” and if cmd returns
the version as o/p, it means that so and so version of npm is installed in our PC. And if not installed,
we’ll get the o/p as “npm -v” is not recognized.
//Usage of npm : used to install something from npm
To install a package from npm: type “npm i <any package’s name>” in cmd prompt,
(where i means install)
For example : [Link]
Now, let’s learn how to install, use and how to print results from npm.
//install => npm i <package name>
//use :-
=>
//to print the results, run the code by typing “node .\[Link]” in terminal.
Let’s try out another package:
//if we have already installed the package, then we need not install the package again before running
the code. We can directly run the node js source code file.
For example: Now that we have already install figlet package in the folder, we can directly run the js
file which uses figlet package without reinstalling the package.
-express:-
Express is a node package. It is basically a framework for [Link]
Use case of express => routing.
//What is route?
Let’s take an example of [Link]
Assume
If we click on a profile, we’ll be taken to : [Link] =>profile page
If we click on a picture, we’ll be taken to: [Link] =>picture page
Now, [Link] is the base URL.
That which is written after “/”(single forward slash) with that slash - is route.
Here: “/profile” is the route for first URL and “/profilepicture” is the route for second URL.
Note: “profile” is not route. “/profile” is only route and likewise for 2nd URL also.
But for the home page, “[Link]”, the route is just “/’.
// there are many types of routing : GET POST PUT PATCH DELETE and many more.
But 8 out of 10 times, we use GET and POST only.
So, for now, let’s learn GET and POST.
And the remaining routes like PUT, PATCH, DELETE, etc can be learnt while learning RESTful API.
->GET: If we go to [Link] and search “hello friends”, in the coming page, we can see ”what
we’ve searched” in URL present at the address bar located at the top of the browser.
Such route is called as GET route.
Here, I’m just searching and there is no problem in seeing “what we’ve searched” in the URL. Hence
we use GET route.
->POST: If we go to [Link] and enter login details in the login page and hit login, we can see
that our data we entered is not seen in the URL. And here we don’t want our data we entered(email
and password) to be visible in the URL. For that, we use POST route.
In short:
->If there is no problem for the user in letting his details entered to be visible on URL, then the route
is GET route. (In GET route, data entered is visible in the URL)
->If we don’t want the data entered by the user to be visible in the URL, then route to use is POST.
(In POST route, data entered is not visible in the URL).
->How to use express?
1st - install express in terminal by typing “npm i express”
Next, how to use it in js?
Eg:
(The PC/Lap where we write and run this code is our server)
Now, to make our server run this code: - just run/execute the code in terminal by typing
“node (space) .\<filename>.js “ and hit enter.
After we hit enter, we can see that command starts running but it does not finish/stop running.
That’s because now our server is running and it’s listening on port 3000.
YES! Our computer has become a server now.
If we go to “localhost:3000”, we can see that our server has sent “Hi Hello hELLO hI” to port 3000.
But If I go to code and change “Hi Hello hELLO hI” to “BYE bye”, will it reflect in the “localhost:3000” ?
Answer is NO!
Ok, if I refresh the page, will it atleast reflect now?
NO! because, our server is still running the previous code and it has not stopped.
So, we have to stop the server by typing “CTRL+C” in that line and this will terminate the command.
Now, we have to again run the code by typing “node .\[Link]” in terminal and this will start the
server.
Now, if we refresh the page, we can see the new code’s result reflected in the page.
->If we don’t want to stop the server and then again run the server for each time we change the
code, then we can use a package called “nodemon”.
First, let’s install nodemon by typing “npm i nodemon -g”.
// typing -g here is very important.
What’s “-g” here? (-g => global)
This “-g” will install the package globally in our computer, so that, next time when we want to use
the package in any folder in our computer, we can use that package in any folder(even new folder)
without any need for installing the package again in the folder.
If we used “-g”, then installing that package for just one time is enough. We can use that package
directly in any folder.
Now , we have to run the code and start the server by typing “nodemon .\[Link]”.
Note: If error comes for the above cmd, then type :“npx nodemon .\[Link]”
Now, if I change “BYE bye” in code to “Hello bYE”, then just refreshing the page will make the
changes reflect in our page. We need not stop the server and again start the server. It will
automatically restart the server for us.
=>
Ok, now let’s create a route - “/profile”.
-middleware:-covered in [Link] lwm