What is Express.js?
Express is a node framework. It is a collection of codes that someone wrote and which adds extra features to our code. It prevents us from writing repetitive codes.
Getting started
Firstly, initialise npm in your js file(npm init). Then type
npm install express
to install express. Doing so will add a new folder named package-lock.json in your current directory and will also add a dependency named “express” in your package.json file.
First app
const express = require (express);
calls the express module and stores it in a variable named “express”.
const app = express();
stores the express() function in a variable named “app”.
app.listen(3000);
listens at the port 3000 to any http request that is sent to the server.
At this time if we run our server in hyper, it will show nothing because we haven’t “sent” anything yet to the server.
To ensure that our server is running, we can add a callback function in app.listen() which simply logs “ our server is running”.
Yet, if we visit our browser and type localhost:3000/, we would get “Cannot GET/” as the message because our browser, upon reaching the server at port 3000, didn’t get anything back.
localhost:3000/ just represents the homepage of our website.
The app.get() is a method provided by express that responds to the get request made by the browser to the homepage(in this case).Here, the response is triggering a callback function upon receiving the get request to the homepage. The “/” parameter specifies the location of the route, which is the homepage localhost:3000. The callback function, however, consists of two parameters: req(request) and res(response). The req parameter tells the server what to do if it receives a get request from the browser. The res parameter tell the server what to respond after getting the request.
If we console log req, we’ll get all the details of the request made to the server .
res.send(“hello”); sends a response containing the string hello to our homepage i.e localhost:3000. We aren’t bound here to send only strings or characters as a response. We can send html, images, etc. as a response too.
Adding another route
As shown in line number 10, I have changed the route from “/” to “/contact” for the user to go to.
Nodemon
It is a utility that detects any changes in our code and restarts the server accordingly. Hence preventing us from starting the server again and again. To install nodemon, type
npm install -g nodemon
Sending a file as a response
Let’s say we have to make a calculator app.
To send a file(say index.html)as a response, “post” should be added to the method attribute and “/” to the action attribute in the html form. “post” method tells the server to post the contained information to the browser at the location “/”.
In server.js, to post index.html, instead to writing res.send , we write res.sendFile(see line 6)since we’ve to send a file here.The __dirname gives the path of current directory, which is appended to index.html to reach the destination file index.html.
Now that we have told our server what to respond when the browser sends a get request, we have to instruct it further what to do when the user hits the calculate button.
When the user hits the calculate button, the server posts a string “Thanks for sending that”(see line 11). So, in order to calculate the values entered in the two boxes, we have to install another NPM package called Body-Parser.
npm install body-parser
after installing it, we will have one more dependency called body-parser in package.json. Body-parser passes the post request made to the server.
In order to use body-parser, we have to “require” it ( line number 02).
Line number 6 is the syntax to use body parser to send an information. The urlencoded keyword is used whenever we have to send a form as a post request. The extended: true is used for posting nested objects.
Adding two numbers
We have to store the numbers in a variable which has to be entered in our homepage. req.body.num1 gives the value which we have stored as num1 in “name” element in index.html form. So is for req.body.num2.
