Server-Side Node.js and Express

Node can be used to build a server that generates HTML in response to HTTP requests, it uses JavaScript as its programming language.

Node Advantages

• JavaScript Everywhere
• Push Architectures (pub/sub, webSockets)
• Nonblocking Architectures
• Rich Ecosystem of Tools and Code
• Broad Adoption

If you have installed Node, you will need to open a command/terminal window, navigate to the folder of your application, and enter the following command:

• node app.js

You can also just type:

• node app

Then to stop it, type: ctrl-c Node.js version 22.x (The latest version: https://nodejs.org/en/download/package-manager/current)

// make use of the http module const http = require('http’); // configure HTTP server to respond with simple message to all requests const server = http.createServer(function (request, response) {

response.writeHead(200, {"Content-Type": "text/plain"}); response.write("Hello this is our first node.js HTTP server"); response.end;

}); // Listen on port 8080 on localhost const port = 8080; server.listen(port); // display a message on the terminal console.log("Server running at port=" + port);

asynchronous code is code that is doing (or seemingly doing) multiple things at once. In multi-tasking operating systems, asynchronous execution is often achieved via threads: each thread can do only one task at a time, but the operating system switches between threads Many contemporary web sites make use of asynchronous JavaScript data requests of Web APIs, thereby allowing a page to be dynamically updated without requiring additional HTTP requests.

(A web API is simply a web resource that returns data instead of HTML, CSS, JavaScript, or images).

How to run:

npm install json-server

1. npx json-server data.json
2. run index.html

Modern browsers prevent cross-origin requests by default, so sharing content legitimately between two domains becomes harder.

Cross-origin resource sharing (CORS) is a mechanism that uses new HTTP headers in the HTML5 standard that allows a JavaScript application in one origin (i.e., a protocol, domain, and port) to access resources from a different origin. If an API site wants to allow any domain to access its content through JavaScript, it would add the following header to all of its responses:

Access-Control-Allow-Origin: *

In node: > npm install cors And then in your app.js:

app.use(cors); // cors allows to access api through javascript;

Versions: an Industry Standard Versions of the npm packages in package.json follow a standard: Semantic Versioning (SemVer):

"package": "MAJOR.MINOR.PATCH" The MAJOR version should increment when you make incompatible API changes.

The MINOR version should increment when you add functionality in a backwards-compatible manner.

The PATCH version should increment when you make backwards-compatible bug fixes.

This means that PATCHes are bug fixes and MINORs add new features but neither of them break what worked before.

Finally, MAJORs add changes that won‟t work with earlier versions.

Request npm install to automatically update to the latest minor version or patch:

Update to the latest patch versions: "package": "~1.3.8" Update to latest MINOR version: package": "^1.3.8"

(Definition) Middleware: software that is a bridge between an application and the data.

const express = require("express"); const app = express; app.use (express.static('public’

)); // static files like css files

app.listen(8080, => { ... });

The app.use function installs the provided middleware function on the chain of responsibility.

// Middleware that logs all incoming requests (middleware at the root of the route).

app.use((req, res, next) => { console.log(`${req.method} ${req.path} - ${req.ip}` ); next; });

// Middleware can be mounted at a specific route using app.METHOD(path, middlewareFunction, callback):

app.get('/now' , function(req, res, next) { req.time = new Date.toString; next; }, function(req, res) { res.json({time: req.time}); });

What if we had five or six or more routes? In such case, our single Node file would start becoming too complex. A better approach would be to separate out the routing functionality into separate modules.

You could also place your route handler logic into a separate module.

const fs = require('fs'); const path = require('path'); const jsonPath = path.join(__dirname, 'data', 'SE2022.json'); let curriculum; fs.readFile(jsonPath, (err,data) => { if (err) console.log('Unable to read json data file'); else curriculum = JSON.parse(data); }); const getData = => { return curriculum; } module.exports = getData;

(route params)

With the :param syntax you can send parameters to the api:

app.get('/echo/:word', (req, res) => { let param = req.params.word; res.json({ echo: param } ); //use the variable as needed });

By requesting: https://ip:port/echo/ hello

word variable (from req.params.word) then you can

„hello‟ will be assigned to the use this argument as you need.

(query params)

We can also use URL encoded queries then access the query parameters using req.query.parameter: http://ip:port/employee?first=skander&last=turki

app. get ('/ employee’, (

req, res) => {

res.json({ employee: `${req.query.first} ${req.query.last}`});

}); app. post ('/ employee’, (

req, res) => {

res.json({employee: `${req.query.first} ${req.query.last}`});

});

Note: no need to install any library.

Using a form on the client side, we can send requests using forms:

<form action="/name" method=" post "> <label>First Name :</label><input type="text" name=" first "><br>

<label>Last Name :</label><input type="text" name=" last "><br> <input type="submit" value="Submit">

</form>

We need a middleware to parse parameters from request payload (POST, DELETE..):

const bodyParser = require('body- parser’

);

app.use(bodyParser.urlencoded({ extended: false })) let p_first = req.body.first; // then access the req.body object

(E mbedded J ava S cript Templates ) 2

ejs file as part of another, so that parts of documents can be reused by

EJS supports “partials” : include an different files.

If the head is common to all our pages, we can create a head.ejs file containing the header then include the header as “partial” of all our pages with:

The partial files can be organized inside a partials folder under the views folder:

/views/partials/head.js /views/partials/header.js /views/partials/footer.js <%- include("./partials/head.ejs") %> <body> <%- include("./partials/header.ejs") %>

....

<%- include("./partials/footer.ejs") %>

</body> </html>

LISTING 13.11 Example EJS view

https://www.youtube.com/watch?v=yXEesONd_54&t=1309s Installation:

-Node.js version 22.x (The latest version: https://nodejs.org/en/download/package-manager/current)