Lec4_Final_Oct8_clean.pptx

EIE4432 Web Systems and Technologies LECTURE 4: NODE.JS SERVER-SIDE PROGRAMMING Dr. Pauli Lai 1 Expected learning outcomes After this lecture, you should understand …  Client-side VS server-side programming  Javascript running in browsers VS in Node.js environment Synchronous VS asynchronous code  Three types of asynchronous programming model in Node.js and why async is important  Node.js File I/O, HTTP module basics  Node Package Management with package.json Express.js as an alternative to the plain HTTP module  Express.js routing, router modules, and middleware 2 Server-side Web Programming Client and server usually work together to deliver complete and interactive user experience. This lecture will mainly focus on server-side web programming. 4 Characteristics of client-side programming With client-side programming, all the code and data is executed and stored locally.  Mainly for user interface (UI) rendering, i.e., animations, user control  Immediate handling of user actions  Computing resources are limited to local  Difficult to share data across devices and users  Difficult to ensure data integrity since local data can be modified easily 5 Benefit of server-side programming With server-side programming, all the code and data is executed and stored remotely  Handle business logic, data processing, heavy computational tasks and database operation  Perform user authentication and authorization  Enforce data integrity since the server has full control on the data  Share data across devices and locations  Connect with database, storages and other external services 6 Limitation of server-side programming Server-side programming relies on network communication to interact with clients, there are several limitations:  Latency  Since network latency is significantly high comparing to local processing, server may need to offload the latency-sensitive tasks to client side, i.e., UI rendering  Scalability concern  Server-side code need to write in the way such that it can run in distributed system to maximize the server performance, increased complexity Limited client control  Difficult to ensure consistent behavior across different client devices  Rely on client-side software and capabilities to achieve certain functionalities 7 Server-side Web Programming Server-side programming usually integrates with database for data storage and retrieval, also makes use of frameworks to simplify the development process. The following software or toolkits will be covered in this course:  Node.js runtime  Express.js (API server)  MongoDB (NoSQL database) 8 Introduction to Node.js EIE4432 WEB SYSTEMS AND TECHNOLOGIES 9 What is Node.js? •Node.js is an open-source server environment •Node.js is free •Node.js runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.) •Node.js uses JavaScript on the server 10 Key Features of Node.js 1.Asynchronous and Non-blocking 2.JavaScript Everywhere 3.NPM - Node Package Manager 4.Scalability 5.Microservices Architecture 11 Why use Node.js in server-side? Fast and performant ◦ V8 use JIT (Just-In-Time)-based engine show greater server-side performance than other programming languages, like PHP. Large community and high popularity ◦ Node.js are used by 42.65% developers (2023 Developer Survey - Stackoverflow) Used by many famous companies ◦ Netflix ◦ Twitter (Now X) ◦ Walmart ◦ And more …. Single language in both client and server-side programming https://survey.stackoverflow.co/20 23/#technology-most-popular-tec hnologies 12 What Can Node.js Do? •Node.js can generate dynamic page content •Node.js can create, open, read, write, delete, and close files on the server •Node.js can collect form data •Node.js can add, delete, modify data in your database Use Cases for Node.js: 1. Web Applications 2. Real-time Applications 3. Streaming Applications 4. API Gateways 13 What is a Node.js File? •Node.js files contain tasks that will be executed on certain events •A typical event is someone trying to access a port on the server •Node.js files must be initiated on the server before having any effect •Node.js files have extension ".js" (CommonJS or ES Module) 14 Node.js vs Javascript in Browsers  Use same Javascript syntax, i.e., Array, Object, if-else, switchcase and other basic data types  In the browser js, there are document and window objects so that you can interact with the HTML DOM and other Web Platform APIs like cookies, while Node.js does not have.  Differ from the browser js, Node.js provides a lot of native APIs through its modules, like File I/O and other native system access, while data access in browser js is strictly restricted to the sandboxed environment and website-specific storage. 15 Node.js Get Started Reference: https://www.w3schools.com/nodejs/ 16 Download Node.js The official Node.js website has installation instructions for Node.js: https://nodejs.org 17 Getting Started Once you have downloaded and installed Node.js on your computer, let's try to display "Hello World" in a web browser. Create a Node.js file named "myfirst.js", and add the following code: myfirst.js import http from 'http'; http.createServer((req, res) => { res.writeHead(200, {'Content-Type': 'text/html'}); res.end('Hello World!'); }).listen(8080); Save the file on your computer: C:\Users\Your Name\myfirst.js The code tells the computer to write "Hello World!" if anyone (e.g. a web browser) tries to access your computer on port 8080. For now, you do not have to understand the code. It will be explained later. 18 Getting Started Create a new file called "package.json" under the directory you want to run the code with the following content: { "type": "module" } Without this setting, you will encounter SyntaxError: Cannot use import statement outside a module. With this minimal configuration, you enable the ESM module support for Node.js. It is the newer module system for Node.js. In this lecture, most of the example would be written in ESM module. I will explain ESM later. 19 Initiate the Node.js File The file you have just created must be initiated by Node.js before any action can take place. Start your command line interface, and navigate to the folder that contains the file “myfirst.js”. Write node myfirst.js and hit enter: C:\Use rs\Your Name>node myfirst.js Now, your computer works as a server! If anyone tries to access your computer on port 8080, they will get a "Hello World!" message in return! Start your internet browser, and type in the address: http://localhost:8080 20 Before initiating the Node.js file. After initiating the Node.js file. 21 Asynchronous programming 22 Synchronous vs asynchronous  Synchronous programming  Executed sequentially  Waits for each task to be completed before moving on to the next one.  Predictable execution flow Asynchronous programming  Executed concurrently  Continue executing other tasks while waiting for the completion of asynchronous tasks in the background.  Especially useful for waiting for I/O operation, i.e., remote call and File I/O Assume cbN() is the callback  No need to be multithreaded functions run after the fN() completed 23 Asynchronous programming Asynchronous programming in Node.js can be achieved in 1. Callback handlers (Old way) 2. Promise 3. Async/await syntax (A syntactic sugar for Promise) It is essential for all I/O operations so that the I/O will not block the main thread. 24 Callback In the past, due to the nature of asynchronous Javascript, many Javascript functions accept a callback argument that allow you define code to be run after the task is completed (or failed). Usually, callbacks are only used when doing I/O, i.e., downloading files, doing File I/O, waiting for remote replies. Here is a common example of reading a file: fs.readFile('demo.txt', 'utf-8', (err, data) => { … }) This readFile method returns nothing but provide the result to data argument of the provided callback (err, data) => { … } once reading file is done. 25 Callback hell It is ok only if the logic is simple. The code can be difficult to maintain when the logic becomes complex. There are a famous term called "callback hells" to describe where callbacks are nested within other callbacks, resulting in deeply nested and hard-to-read code. Imagine when you have tasks depends on the result of an async task, you would have to nest the code inside the callback! The code would become unreadable and hard to maintain! Credit: Nikhil Upadhyay - Callback Hell and How to Rescue it? 26 Promise A Promise in Javascript represents the eventual completion (or failure) of an asynchronous operation and its resulting value. It is a new mechanism to handle asynchronous operations compared to traditional callbacks. A Promise is in one of these states:  pending: Initial state  resolved: The operation was completed successfully  rejected: The operation was failed It can chain handlers or callbacks for the resolved and rejected conditions. .then(handleResolved1[, handleRejected1]) .then(handleResolved2[, handleRejected2]) .catch(handleRejectedAny) Each .then() returns a new Promise object, so we can handle the error in the last .catch() statement 27 Promise Promise allows defined callbacks to be run after the tasks completed or settled in a chained way. Assume Task C depends on Task B depends on Task A: Callback s taskA(…, (…) => { if (err) { … error … } taskB(…, (…) => { if (err) { … error … } taskC(…, (…) => { if (err) { … error … } // … more nested tasks }) }) }) Promis e taskA(…) .then((…) => taskB(…)) .then((…) => taskc(…)) .catch(() => { … error … }) When a Promise is completed, the attached handlers will be called in order in which the .then methods are declared. Note that .catch attaches the error handler 28 Callback vs Promise Callba Promis ck e import fs from 'fs/promises'; import fs from 'fs'; function read_file() { function read_file() { fs.readFile('demo.txt', 'utffs.readFile('demo.txt', 'utf-8', (err, 8') data) => { .then((data) => { if (err !== null) { console.log(data); console.error('error', err); }) return; .catch((err) => { } console.error('error', err); console.log(data); }); }); } } read_file(); read_file(); Both programs do exactly the same task: Output the content of demo.txt to the console 29 Async/await The async/await is a newer syntax to simplify asynchronous programming in JavaScript.  This syntax is built on top of Promises, as a syntactic sugar  Allow writing asynchronous code to look like synchronous code  await/async syntax can only be used inside an async function  async function is a Promise  Use try/catch block to handle the error, i.e., rejected Promise.  E.g. const c = await fetch(...)  if network error, fetch will reject the promise.  While using await/async syntax, this line will throw an exception instead 30 Async/await async do_task1(…) { Automatically returns a Promise try { const resA = await taskA(…); const resB = await taskB(…); const resC = await taskC(…); if (…) {…} … } catch (err) { … error … } } 31 Javascript Promises vs Async Await EXPLAINED (in 5 minutes) H TTP S :// YOUT U. B E /L I 7 FZD H Y ZP C ?S I= A 22C Z45 QB K DV 4A B X 32 Promise vs async/await syntax Promi Async/await se syntax import fs from 'fs/promises'; import fs from 'fs/promises'; function read_file() { async function read_file() { fs.readFile('demo.txt', 'utftry { 8') const data = .then((data) => { await fs.readFile('demo.txt', 'utf-8'); console.log(data); console.log(data); }) } catch (err) { .catch((err) => { console.error('error', err); console.error('error', } err); } }); read_file(); } read_file(); Both programs do exactly the same task: Output the content of demo.txt to the console 33 Node.js Modules 34 What is a Module in Node.js? What is a Module in Node.js? Consider modules to be the same as JavaScript libraries. A set of functions you want to include in your application. Built-in Modules Node.js has a set of built-in modules which you can use without any further installation. Refer to Built-in Modules Reference for a complete list of modules. https://www.w3schools.com/nodejs/ref_modules.asp 35 Include Modules To include a module, use the import with the name of the module: import http from 'http'; Now your application has access to the HTTP module, and is able to create a server: http.createServer((req, res) => { res.writeHead(200, {'Content-Type': 'text/html'}); res.end('Hello World!'); }).listen(8080); 36 Create Your Own Modules You can create your own modules and easily include them in your applications. The following example creates a module that returns a date and time object: export const MyDateTime = () => { return Date(); }; Use the export keyword to make properties and methods available outside the module file. Save the code above in a file called "myfirstmodule.js" 37 https://www.youtube.com/watch?v=qgRUr-YUk1Q 38 Include Your Own Module Now you can include and use the module in any of your Node.js files. Example Use the module "myfirstmodule" in a Node.js file: import http from 'http'; import { MyDateTime } from './myfirstmodule.js'; http.createServer((req, res) => { res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'}); res.write("The date and time are currently: " + MyDateTime()); res.end(); }).listen(8080); Notice that we use ./ to locate the module, which means that the module is located in the same folder as the Node.js file. Save the code above in a file called "demo_module.js", and initiate the file. 39 Result Press Ctrl-C to stop initiating the previous NodeJS file. Initiate demo_module.js: C:\Users\Your Name>node demo_module.js If you have followed the same steps on your computer, you will see the same result as the example: http://localhost:8080 40 Require() vs ESM Import syntax When looking for Node.js code sample, you often see the following two different module import syntaxes: const http = require('http'); import http from 'http'; The former is part of the CommonJS module import syntax, while the latter uses ESM (ECMAScript 2015) module import/export syntax. Even though they have similar behaviors on module import, they are two different module systems. ES6 modules are more commonly used in modern web development. 41 ComonJS vs ESM Import/Export Syntax ESM Import import http from 'http'; http.createServer(function (req, res) => { res.writeHead(200, {'Content-Type': 'text/html'}); res.end('Hello World!'); }).listen(8080); ESM Export const MyDateTime = function () { return Date(); } export { MyDateTime }; CommonJS import const http = require('http'); http.createServer(function (req, res) => { res.writeHead(200, {'ContentType': 'text/html'}); res.end('Hello World!'); }).listen(8080); CommonJS export exports.MyDateTime = function () { return Date(); } 42 Start Using ES Modules Now https://www.youtube.com/watch?v=lMWUqWKEGg Q 43 Node.js HTTP modules 45 The Built-in HTTP Module Node.js has a built-in module called HTTP, which allows Node.js to transfer data over the Hyper Text Transfer Protocol (HTTP). To include the HTTP module, use the import syntax: import http from 'http' 46 Node.js as a Web Server The HTTP module can create an HTTP server that listens to server ports and gives a response back to the client. Use the createServer() method to create an HTTP server: import http from 'http'; //create a server object: http.createServer((req, res) => { res.write('Hello World!'); //write a response to the client res.end(); //end the response }).listen(8080); //the server object listens on port 8080 47 Result The function passed into the http.createServer() method, will be executed when someone tries to access the computer on port 8080. Save the code above in a file called "demo_http.js", and initiate the file: C:\Users\Your Name>node demo_http.js Press Ctrl-C to stop initiating the previous NodeJS file. Initiate demo_http.js: C:\Users\Your Name>node demo_http.js If you have followed the same steps on your computer, you will see the same result as the example: http://localhost:8080 48 Add an HTTP Header If the response from the HTTP server is supposed to be displayed as HTML, you should include an HTTP header with the correct content type: import http from 'http'; http.createServer((req, res) => { res.writeHead(200, {'Content-Type': 'text/html; charset=utf8'}); res.write('Hello World!'); res.end(); }).listen(8080); The first argument of the res.writeHead() method is the status code, 200 means that all is OK, the second argument is an object containing the response headers. 49 Read the Query String The function passed into the http.createServer() has a req argument that represents the request from the client, as an object (http.IncomingMessage object). This object has a property called "url" which holds the part of the url that comes after the domain name: import http from 'http'; http.createServer((req, res) => { res.writeHead(200, {'Content-Type': 'text/html; charset=utf8'}); res.write(req.url); res.end(); }).listen(8080); 50 Result Save the code above in a file called "demo_http_url.js" and initiate the file: Initiate demo_http_url.js: C:\Users\Your Name>node demo_http_url.js If you have followed the same steps on your computer, you should see two different results when opening these two addresses: http://localhost:8080/EIE4432 http://localhost:8080/Web Systems 51 The Built-in URL Module The URL module splits up a web address into readable parts. To include the URL module, use the import syntax: import { URL } from 'url'; Create a new URL object with an address, and it will return a URL object with each part of the address as properties. import { URL } from 'url'; // Create a new URL object const myURL = new URL('https://www.example.com:8080/path/? param=value#fragment'); console.log('Host:', myURL.host); // Output: Host: www.example.com:8080 console.log('Path:', myURL.pathname); // Output: Path: /path/ console.log('Query:', myURL.search); // Output: Query: ?param=value console.log('Fragment:', myURL.hash); // Output: Fragment: #fragment 52 Knowledge check What is the output result if the address is changed like this? const adr = 'http://localhost:9999/index.htm? code=eie4432&subj=websystems'; 53 Split the Query String To split the query string into individual key-value pairs in Node.js, you can use the `URLSearchParams` constructor along with the `get()` or `forEach()` method. import { URLSearchParams } from 'url'; // Create a URL object const myURL = new URL('https://www.example.com/path/? param1=value1&param2=value2&param3=value3'); // Get the search params const searchParams = new URLSearchParams(myURL.search); // Get a specific parameter value console.log(searchParams.get('param1')); // Output: value1 Result: // Loop through all parameter key-value pairs searchParams.forEach((value, key) => { console.log(key, ':', value); }); 54 Split the Query String Split the query string into readable parts: import http from "http"; import { URL } from "url"; http.createServer((req, res) => { console.log(req.url); //Output: /?year=2017&month=July console.log(`http://${req.headers.host}`); //Output: http://localhost:8080 // Create a new URL object based on the request URL const myURL = new URL(req.url, `http://${req.headers.host}`); // Get the search params for the request url const searchParams = new URLSearchParams(myURL.search); res.writeHead(200, { "Content-Type": "text/html" }); const txt = searchParams.get("year") + " " + searchParams.get("month"); res.end(txt); }) .listen(8080); 55 Result Save the code above in a file called "demo_querystring.js" and initiate the file: Initiate demo_querystring.js: C:\Users\Your Name>node demo_querystring.js The address: The address: http://localhost:8080/?year=2017&month=July Will produce this result: http://localhost:8080/?year=2023&month=10 Will produce this result: 2017 July 56 Knowledge check Modify demo_querystring.js such that it can display also the day like this: //const txt = searchParams.get("year") + " " + searchParams.get("month"); const txt = searchParams.get("year") + " " + searchParams.get("month") + " " + searchParams.get("day"); 57 Node.js File I/O 58 Node.js File System Module The Node.js file system module allows you to work with the file system on your computer. To include the File System module, use the import syntax: import fs from 'fs/promises'; Common use for the File System module: •Read files •Create files •Update files •Delete files •Rename files 59 Read Files The fs.readFile() method is used to read files on your computer. Assume we have the following HTML file (located in the same folder as Node.js file): demofile1.html <html> <body> <h1>My Header</h1> <p>My paragraph.</p> </body> </html> Create a Node.js file that reads the HTML file, and return the content: import http from 'http'; import fs from 'fs/promises'; http.createServer((req, res) => { fs.readFile('demofile1.html').then((data) => { res.writeHead(200, {'Content-Type': 'text/html'}); res.write(data); return res.end(); }).catch((err) => console.error('error', err)) }).listen(8080); 60 Result Save the code above in a file called "demo_readfile.js", and initiate the file: Initiate demo_readfile.js: C:\Users\Your Name>node demo_readfile.js If you have followed the same steps on your computer, you will see the same result as the example: http://localhost:8080 61 Create Files The File System module has methods for creating new files: •fs.appendFile() •fs.open() •fs.writeFile() 62 Create file by appendFile() The fs.appendFile() method appends specified content to a file. If the file does not exist, the file will be created: Create a new file using the appendFile() method: import fs from 'fs/promises'; fs.appendFile('mynewfile1.txt', 'Hello content!') .then(() => console.log('Saved!')) .catch((err) => console.error('error', err)); 63 Create file by open() The fs.open() method takes a "flag" as the second argument, if the flag is "w" for "writing", the specified file is opened for writing. If the file does not exist, an empty file is created: Create a new, empty file using the open() method: import fs from 'fs/promises'; fs.open('mynewfile2.txt', 'w') .then((file) => { console.log('Saved!'); }) .catch((err) => console.error('error', err)); 64 Create file by writeFile() The fs.writeFile() method replaces the specified file and content if it exists. If the file does not exist, a new file, containing the specified content, will be created: Create a new file using the writeFile() method: import fs from 'fs/promises' fs.writeFile('mynewfile3.txt', 'Hello content!') .then(() => console.log('Saved!')) .catch((err) => console.error('error', err)); 65 Update Files The File System module has methods for updating files: •fs.appendFile() •fs.writeFile() 66 Update file by appendFile() The fs.appendFile() method appends the specified content at the end of the specified file: Append "This is my text." to the end of the file "mynewfile1.txt": import fs from 'fs/promises'; fs.appendFile('mynewfile1.txt', ' This is my text.') .then(() => console.log('Updated!')) .catch((err) => console.error('error', err)); 67 Update file by writeFile() The fs.writeFile() method replaces the specified file and content: Replace the content of the file "mynewfile3.txt": import fs from 'fs/promises'; fs.writeFile('mynewfile3.txt', 'This is my text') .then(() => console.log('Replaced!')) .catch((err) => console.error('error', err)); 68 Delete files To delete a file with the File System module, use the fs.unlink() method. The fs.unlink() method deletes the specified file: Delete "mynewfile2.txt": import fs from 'fs/promises'; fs.unlink('mynewfile2.txt') .then(() => console.log('File deleted!')) .catch((err) => console.error('error', err)); 69 Rename files To rename a file with the File System module, use the fs.rename() method. The fs.rename() method renames the specified file: Rename "mynewfile1.txt" to "myrenamedfile.txt": import fs from 'fs/promises'; fs.rename('mynewfile1.txt', 'myrenamedfile.txt') .then(() => console.log('File Renamed!')) .catch((err) => console.error('error', err)); 70 Knowledge check Now you know how to parse the query string, and you learned how to make Node.js behave as a file server. Let us combine the two, and serve the file requested by the client. Create two text files and save them in the same folder as your node.js files. 71 Knowledge check Create a Node.js file that opens the requested file and returns the content to the client. If anything goes wrong, throw a 404 error: 72 Knowledge check (answer) 73 Upload Files The Formidable Module There is a very good module for working with file uploads, called "Formidable". The Formidable module can be downloaded and installed using NPM: C:\Users\Your Name>npm install formidable After you have downloaded the Formidable module, you can include the module in any application: import formidable from 'formidable'; formidable is a Node.js module for parsing form data, especially file uploads. https://www.npmjs.com/package/formidable 75 Upload Files – Step 1: Create an Upload Form Now you are ready to make a web page in Node.js that lets the user upload files to your computer: Create a Node.js file that writes an HTML form, with an upload field: This code will produce an HTML form: import http from 'http'; http.createServer((req, res) => { res.writeHead(200, {'Content-Type': 'text/html'}); res.write('<form action="fileupload" method="post" enctype="multipart/formdata">'); res.write('<input type="file" name="filetoupload"><br>'); res.write('<input type="submit">'); res.write('</form>'); return res.end(); }).listen(8080); 76 Upload Files – Step 2: Parse the Uploaded File Include the Formidable module to be able to parse the uploaded file once it reaches the server. When the file is uploaded and parsed, it gets placed on a temporary folder on your computer. import http from 'http'; import formidable from 'formidable'; http.createServer((req, res) => { if (req.url == '/fileupload') { const form = formidable({}); form.parse(req, (err, fields, files) => { const oldpath = files.filetoupload[0].filepath; res.write('File uploaded to ' + oldpath); res.end(); }); } else { res.writeHead(200, {'Content-Type': 'text/html'}); res.write('<form action="fileupload" method="post" enctype="multipart/form-data">'); res.write('<input type="file" name="filetoupload"><br>'); res.write('<input type="submit">'); res.write('</form>'); res.end(); } }).listen(8080); 77 Upload Files – Step 3: Save the File When a file is successfully uploaded to the server, it is placed on a temporary folder. The path to this directory can be found in the "files" object, passed as the third argument in the parse() method's callback function. To move the file to the folder of your choice, use the File System module, and rename the file: import http from 'http'; import formidable from 'formidable'; import fs from 'fs/promises'; http.createServer((req, res) => { if (req.url == '/fileupload') { const form = formidable({}); form.parse(req, (err, fields, files) => { const oldpath = files.filetoupload[0].filepath; const newpath = 'C:/Users/User/NodeJS/' + files.filetoupload[0].originalFilename; fs.rename(oldpath, newpath) .then(() => { res.write('File uploaded and moved!'); res.end(); }) .catch((err) => console.error('error', err)); }); } else { res.writeHead(200, {'Content-Type': 'text/html'}); res.write('<form action="fileupload" method="post" enctype="multipart/form-data">'); res.write('<input type="file" name="filetoupload"><br>'); res.write('<input type="submit">'); res.write('</form>'); return res.end(); } }).listen(8080); 78 Node Package Management 79 Package What is a Package? A package in Node.js contains all the files you need for a module. Modules are JavaScript libraries you can include in your project. Download a Package Downloading a package is very easy. Open the command line interface and tell NPM to download the package you want. I want to download a package called “xyz": C:\Users\Your Name>npm install xyz Now you have downloaded and installed ‘xyz’ package! NPM creates a folder named "node_modules", where the package will be placed. All packages you install in the future will be placed in this folder. Using a Package Once the package is installed, it is ready to use. Import the “xyz" package the same way you import any other module. 80 What is NPM? NPM is a package manager for Node.js packages, or modules. www.npmjs.com hosts thousands of free packages to download and use. The NPM program is installed on your computer when you install Node.js NPM is already ready to run on your computer! 81 How to use npm? There are two ways to install a package using npm: globally and locally. •Globally − This method is generally used to install development tools and CLI based packages. To install a package globally, use the following code. npm install -g <package-name> •Locally − This method is generally used to install frameworks and libraries. A locally installed package can be used only within the directory it is installed. To install a package locally, use the same command as above without the -g flag. npm install <package-name> Whenever we create a project using npm, we need to provide a package.json file, which has all the details about our project. 82 package.json – Basic configuration This package.json is the main project configuration file for Node.js project name The name of the project version The version of the project main The entry point of the project script Set of commands to be run by the package manager devDepende ncies Development-only dependencies 83 package.json – Basic configuration Run the `start` script npm start npm run start npm run xxx  node src/index.js Download and install ALL the project dependencies: npm install Install and add as development-only dependencies npm install typescript --save-dev Install and add as runtime dependencies npm install express or npm i express 84 Semantic versioning { … “package-name”: “version” … } Package name expre ss https://semver.npmjs.c om/ ^4.18 Version .2 ^4.18.2 mean compatible major version with 4 (Release from 4.18.2 to <5.0.0) ~4.18.2 mean compatible minor version with 4 (Release from 4.18.2 to <4.19.0) Reference: https://docs.npmjs.com/about-semantic-versioning 85 86 Express.js Reference: https://www.tutorialspoint.com/expressjs/index.htm 91 Overview Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. It is an open-source framework developed and maintained by the Node.js foundation. It provides you with a simple API to build websites, web apps and backends. With ExpressJS, you need not worry about low-level protocols, processes, etc. Express provides a minimal interface to build our applications. It provides us with the tools that are required to build our app. It is flexible as there are numerous modules available on npm, which can be directly plugged into Express. 92 Why use Express.js instead of the built-in HTTP server? Recall the server code using the built-in http module: All incoming request will share a same request handler, regardless the HTTP method used and request path. If you want to handle API request by path, you need to handle the flow of control manually: Express.js route on GET / 93 Why use Express.js instead of the built-in HTTP server? Simplicity  Abstracts away many low-level details and simplifies the process of handling HTTP requests and responses. Routing  Express.js provides a flexible routing system that allows you to define routes for different URL patterns and HTTP methods. Middleware  Modify request and response objects  Authentication  Handle errors  And more… 94 Install express You can install a package using npm install <package-name> Whenever we create a project using npm, we need to provide a package.json file, which has all the details about our project. npm makes it easy for us to set up this file. Let us set up our development project. Step 1 − Start your terminal/cmd, create a new folder named hello-world and cd (change directory) into it. 95 Install express Step 2 − Now to create the package.json file using npm, use the following code. npm init It will ask you for the following information. Just keep pressing enter, and enter your name at the “author name” field. 96 Install express Step 3 − Now we have our package.json file set up, we will further install Express. To install Express and add it to our package.json file, use the following command − npm install --save express This is all we need to start development using the Express framework. Tip − The --save flag can be replaced by the -S flag. This flag ensures that Express is added as a dependency to our package.json file. This has an advantage, the next time we need to install all the dependencies of our project we can just run the command npm install and it will find the dependencies in this file and install ALL of them for us. To confirm that Express has installed correctly, run the following code. dir node_modules 97 Install nodemon To make our development process a lot easier, we will install a tool from npm, nodemon. This tool restarts our server as soon as we make a change in any of our files, otherwise we need to restart the server manually after each file modification. To install nodemon, use the following command − npm install -g nodemon You can now using nodemon to initiate the NodeJS file. 98 Error in running nodemon Solution: •Open Windows PowerShell as “Administrator” (cannot set using ordinary user identity) •set-ExecutionPolicy RemoteSigned Press [Y] and Enter •get-ExecutionPolicy RemoteSigned you should see “RemoteSigned” •set-ExecutionPolicy RemoteSigned -Scope Process Press [Y] and Enter The Process scope only affects the current PowerShell session. The execution policy is saved in the environment variable $env:PSExecutionPolicyPreference, rather than the registry. When the PowerShell session is closed, the variable and value are deleted. 99 ExpressJS - Hello World We have set up the development, now it is time to start developing our first app using Express. Create a new file called index.js and type the following in it. import express from 'express’; const app = express(); Need to add “type”: “module” in package.json for ESM. app.get('/', (req, res) => { res.send("Hello world!"); }); app.listen(3000); Compare 100 Result Save the file, go to your terminal and type the following. node index.js or nodemon index.js This will start the server. To test this app, open your browser and go to http://localhost:3000 and a message will be displayed as in the following screenshot. 101 How the App Works? The first line imports Express in our file, we have access to it through the variable express. We use it to create an application and assign it to const app. app.get(route, callback) This function tells what to do when a get request at the given route is called. The callback function has 2 parameters, request(req) and response(res). The request object(req) represents the HTTP request and has properties for the request query string, parameters, body, HTTP headers, etc. Similarly, the response object represents the HTTP response that the Express app sends when it receives an HTTP request. res.send() This function takes an object as an input and sends this to the requesting client. Here we are sending the string "Hello World!". 102 How the App Works? app.listen(port, [host], [backlog], [callback]]) This function binds and listens for connections on the specified host and port. Port is the only required parameter here. S.No. 1 2 3 4 Argument & Description port A port number on which the server should accept incoming requests. host Name of the domain. You need to set it when you deploy your apps to the cloud. backlog The maximum number of queued pending connections. The default is 511. callback An asynchronous function that is called when the server starts listening for requests. 103 ExpressJS - Routing Web frameworks provide resources such as HTML pages, scripts, images, etc. at different routes. The following function is used to define routes in an Express application − app.method(path, handler) This METHOD can be applied to any one of the HTTP verbs – get, post, set, put, delete. An all method also exists, which executes independent of the request type. Path is the route at which the request will run. Handler is a callback function that executes when a matching request type is found on the relevant route. 104 ExpressJS - Routing import express from 'express'; const app = express(); app.get('/hello', (req, res) => { res.send("Hello world!"); }); app.listen(3000); If we run our application and go to localhost:3000/hello, the server receives a get request at route "/hello", our Express app executes the callback function attached to this route and sends "Hello World!" as the response. 105 ExpressJS - Routing We can also have multiple different methods at the same route. For example, import express from 'express'; const app = express(); app.get('/', (req, res) => { res.send("Hello world at root /!"); }); app.get('/hello', (req, res) => { res.send("Hello world at /hello!"); }); app.post('/hello', (req, res) =>{ res.send("You just called the post method at '/hello'!\n"); }); app.listen(3000); To test the POST request, open your terminal and use cURL to execute the following request − curl -X POST "http://localhost:3000/hello" 106 ExpressJS - Routing A special method, all, is provided by Express to handle all types of http methods at a particular route using the same function. To use this method, try the following. import express from 'express'; const app = express(); app.all('/test', (req, res) => { res.send("HTTP method doesn't have any effect on this route!"); }); To test the POST request, open up your terminal and use cURL to execute the following request − curl -X POST "http://localhost:3000/test" app.listen(3000); 107 Router Defining routes like above is very tedious to maintain. To separate the routes from our main index.js file, we will use Router from Express. Create a new file called things.js and type the following in it. Now to use this router in our index.js, type in the following before the app.listen function call. import { Router } from 'express'; const router = Router(); import express from 'express'; const app = express(); router.get('/', (req, res) => { res.send('GET route on things.'); }); router.post('/', (req, res) => { res.send('POST route on things.'); }); import things from './things.js'; //both index.js and things.js should be in same directory app.use('/things', things); app.listen(3000); //export this router to use in our index.js export default router; 108 Result The app.use function call on route '/things' attaches the things router with this route. Now whatever requests our app gets at the '/things', will be handled by our things.js router. The '/' route in things.js is actually a subroute of '/things'. Visit localhost:3000/things/ and you will see the following output. 109 S.No. Method & Description 1 GET The GET method requests a representation of the specified resource. Requests using GET should only retrieve data and should have no other effect. 2 POST The POST method requests that the server accept the data enclosed in the request as a new object/entity of the resource identified by the URI. 3 PUT The PUT method requests that the server accept the data enclosed in the request as a modification to existing object identified by the URI. If it does not exist then the PUT method should create one. 4 DELETE The DELETE method requests that the server delete the specified resource. ExpressJS - HTTP Methods The HTTP method is supplied in the request and specifies the operation that the client has requested. This table lists the most used HTTP methods. These are the most common HTTP methods. To learn more about the methods, visit http://www.tutorialspoint.com/http/http_methods.htm. 110 ExpressJS - URL Building We can now define routes, but those are static or fixed. To use the dynamic routes, we SHOULD provide different types of routes. Using dynamic routes allows us to pass parameters and process based on them. Here is an example of a dynamic route − import express from 'express'; const app = express(); app.get('/:id', (req, res) => { res.send('The id you specified is ' + req.params.id); }); app.listen(3000); 111 Knowledge check Modify the above code to produce the following outputs. 112 Knowledge check - Answer 113 Pattern Matched Routes You can also use regex to restrict URL parameter matching. Let us assume you need the id to be a 5-digit long number. You can use the following route definition. import express from 'express'; const app = express(); app.get('/things/:id([0-9]{5})', (req, res) => { res.send('id: ' + req.params.id); }); app.listen(3000); 115 Pattern Matched Routes Route paths can be strings, string patterns, or regular expressions. The characters ?, +, *, and () are subsets of their regular expression counterparts. The hyphen (-) and the dot (.) are interpreted literally by string-based paths. String pattern in the form of regular expression syntax ◦ “*”: Represent arbitrary string ◦ “?”: Represent zero or one character/group ◦ “+”: Represent at least one or more character/group ◦ “[]”: Find any character between the brackets, i.e., “[abc]” match a, b or c ◦ “-” and “.” keep its literal meaning here JavaScript regular expressions in the form of /<regex>/<modifier> ◦ Example: “/.*fly$/” match any string end with “fly” ◦ This route path will match butterfly and dragonfly, but not butterflyman, dragonflyman, and so on. References: https://expressjs.com/en/guide/routing.html https://www.w3schools.com/jsref/jsref_obj_regexp.asp 116 Pattern Matched Routes Note that this will only match the requests that have a 5-digit long id. You can use more complex regexes to match/validate your routes. If none of your routes match the request, you'll get a "Cannot GET <your-requestroute>" message as response. This message can be replaced by an invalid URL page using this simple route. import express from 'express'; const app = express(); app.get('/things/:id([0-9]{5})', (req, res) => { res.send('id: ' + req.params.id); }); //Other routes here app.get('*', (req, res) => { res.send('Sorry, this is an invalid URL.'); }); app.listen(3000); 117 Pattern Matched Routes Important − This should be placed after all your routes, as Express matches routes from start to end of the index.js file, including the external routers you imported. If swapping the order: import express from 'express'; const app = express(); //Other routes here app.get('*', (req, res) => { res.send('Sorry, this is an invalid URL.'); }); app.get('/things/:id([0-9]{5})', (req, res) => { res.send('id: ' + req.params.id); }); app.listen(3000); 118 ExpressJS - Middleware Middleware functions are functions that have access to the request object (req), the response object (res), and the next middleware function in the application’s request-response cycle. These functions are used to modify req and res objects for tasks like parsing request bodies, adding response headers, etc. Here is a simple example of a middleware function in action import express from 'express'; const app = express(); //Simple request time logger app.use((req, res, next) => { console.log("A new request received at " + Date.now()); /* This function call is very important. It tells that more processing is required for the current request and is in the next middleware function route handler. */ next(); }); app.listen(3000); This middleware is called for every request on the server. So after every request, we will get the following message in the console − A new request received at 1467267512545 119 ExpressJS - Middleware To restrict it to a specific route (and all its subroutes), provide that route as the first argument of app.use(). For Example, import express from 'express'; const app = express(); //Middleware function to log request protocol app.use('/things', (req, res, next) => { console.log("A request for things received at " + Date.now()); next(); }); // Route handler that sends the response app.get('/things', (req, res) => { res.send('Things'); }); app.listen(3000); 120 Knowledge check import express from 'express'; const app = express(); //Middleware function to log request protocol app.use('/things', (req, res, next) => { console.log("A request for things received at " + Date.now()); //next(); }); // Route handler that sends the response app.get('/things', (req, res) => { res.send('Things'); }); What will happen if we remove next()? Suppose we make a GET request to http://localhost:3000/things. 1. Will it print current timestamp to console 2. Will it send the response ‘Things’ to the client? app.listen(3000); 121 Order of Middleware Calls One of the most important things about middleware in Express is the order in which they are written/included in your file; the order in which they are executed, given that the route matches also needs to be considered. For example, in the following code snippet, the first function executes first, then the route handler and then the end function. This example summarizes how to use middleware before and after route handler; also how a route handler can be used as a middleware itself. 122 Order of Middleware Calls import express from 'express'; const app = express(); //First middleware before response is sent app.use((req, res, next) => { console.log("Start"); next(); }); //Route handler app.get('/', (req, res, next) => { res.send("Middle"); console.log('Middle'); next(); }); app.use('/', (req, res) => { console.log('End'); }); app.listen(3000); 123 ExpressJS - Middleware The following diagram summarizes what we have learnt about middleware − Now that we have covered how to create our own middleware. A list of third-party middleware for Express is available here: http://expressjs.com/en/resources/middleware.html Here are some of the most commonly used middleware: body-parser, cookie-parser, express-session. 124 ExpressJS - Serving static files Static files are files that clients download as they are from the server. Create a new directory, public. Express, by default, does not allow you to serve static files. You need to enable it using the following built-in middleware. app.use(express.static(‘public’)); Note − Express looks up the files relative to the static directory, so the name of the static directory (e.g. ‘public’ in here) is not part of the URL. Note that the root route is now set to your public dir, so all static files you load will be considering public as root. To test that this is working fine, add any image file in your new public dir. 125 ExpressJS - Serving static files 126 Multiple Static Directories We can also set multiple static assets directories using the following program 127 Virtual Path Prefix We can also provide a path prefix for serving static files. For example, if you want to provide a path prefix like '/static', you need to include the following code in your index.js file 128 Virtual Path Prefix Now whenever you need to include a file, for example, a script file called main.js residing in your public directory, use the following script tag − <script src = "/static/main.js" /> This technique can come in handy when providing multiple directories as static files. These prefixes can help distinguish between multiple directories. 129 Self-learning  Node.js provides rich set of API and libraries that we cannot cover in this lecture  Official document provides very detailed API usage and examples  https://nodejs.org/docs/latest/api/  https://www.w3schools.com/nodejs/  Express.js is a RESTful API framework and has a large ecosystem of plugin and modules  https://expressjs.com/en/4x/api.html  There are many middleware modules and its document maintained by official team  https://expressjs.com/en/resources/middleware.html 149

Lec4_Final_Oct8_clean.pptx

Document Details

Related

Full Transcript