WEB 322 Express Basics Lecture

WEB 322 WEB PROGRAMMING TOOLS AND FRAMEWORKS WEEK 2 - LECTURE 2 Express Basics Review of Node.js What is Node.js? What can we build using Node.js? What are alternatives to Node.js? What are some advantages of Node.js? WEB322 - Express Basics...

WEB 322 WEB PROGRAMMING TOOLS AND FRAMEWORKS WEEK 2 - LECTURE 2 Express Basics Review of Node.js What is Node.js? What can we build using Node.js? What are alternatives to Node.js? What are some advantages of Node.js? WEB322 - Express Basics 2 Modules vs Libraries Modules are libraries in Node.js A set of functions you want to include in your application. Examples of modules: Circle.js Rectangle.js Square.js A package is one or more modules (or libraries) grouped (or packaged) together. Packages are commonly used by other packages (or a project of your own). Node.js uses a package manager, where you can find and install thousands of packages. WEB322 - Express Basics 3 Modules in Node.js A simple (or complex) functionality organized in a single (or multiple) JavaScript files. Can be reused throughout the Node.js application. Each module has its own context, so it cannot interfere with other modules or pollute global scope. Types of Modules: Core Modules: The core modules are compiled and are loaded automatically when the Node.js process starts. 3rd Party Modules: These are modules that were built and created by someone else. You must install these, usually using a package manager like NPM. Local modules: These modules are created by you. They include different functionalities of your application separated in files and folders. WEB322 - Express Basics 4 Core Node.js modules The http and https module includes classes, methods and events to create a Node.js http server. The fs module includes classes, methods, and events to work with file I/O. The path module includes methods to deal with file paths. The os module provides information about the operation system WEB322 - Express Basics 5 What is NPM? NPM stands for “Node Package Manager”. It is the official package manager for the JavaScript runtime environment Node.js. It is bundled and installed automatically with the environment. It consists of a command line client and the NPM registry. NPM registry: an online database of public and paid-for private packages. WEB322 - Express Basics 6 NPM & Packages WEB322 - Express Basics 7 Basic NPM Commands Create a package.json file: The package.json is the project manifest file. You can use it to manage dependencies and write scripts. It contains the metadata about your project. npm init or npm init -y Install a 3rd party package locally: A locally installed package can be accessed only in the folder it is downloaded. Local packages are installed in the node_modules folder. npm install or npm i Remove a package that was previously installed: If a package is no longer desired, delete it from node_modules and remove it from the package.json file. npm remove WEB322 - Express Basics 8 Node Commands Run a JavaScript program: Start a JavaScript program by specifying the “entry point file”. node Example: If the entry point file name is called “myApp.js”, you will run the following: node myApp.js or node myApp Note, you can omit the.js extension. WEB322 - Express Basics 9 Package.json File The package.json file is core to the Node.js ecosystem. A piece of the puzzle when working with Node.js, npm, and even modern JavaScript. Used as what equates to a manifest about applications, modules, packages, and more. A tool that is used to make modern development streamlined, modular, and efficient. WEB322 - Express Basics 10 What is Express? A popular and highly flexible Node.js framework (package). Designed for building web applications and APIs. The de facto standard server framework for Node.js. It makes handling requests and routes way easier (compared to vanilla Node.js). WEB322 - Express Basics 11 Alternatives to Express Vanilla Node.js Adonis.js Frameworks Koa Sails.js WEB322 - Express Basics 12 Frameworks vs Libraries Similarities: Both frameworks and libraries contain code written by someone. Used to help solve common problems. Differences: Library: You oversee the flow of the application. You choose when and where to call the library. Framework: The framework oversees the flow. It offers some places for you to “plug in” your code It calls the code you plugged in as needed. WEB322 - Express Basics 13 Middleware A core feature of Express. Functions that travel through an incoming HTTP request journey until you send a response to the browser. All middleware functions: Have access to the request and response WEB322 - Express Basics 14 What can we do with Express? Respond to HTTP requests. Supports routes so that you can handle responses at specific URLs. Supports multiple templating engines to simplify generation of HTML. Very simple and WEB322 - Express Basics 15 minimalistic. Routing Core feature of Express. Handles setting up URLs on your server than can be accessed by a client. A route is a path on your site that can receive requests. When a route is access, a function (you create) is called by Express. WEB322 - Express Basics 16 Three Core Objects of Express (app) app locals Attach local variables to the application. Can be used in HandleBars. listen() Called at the start of your program after it has been configured. Begins listening for new requests. use() Add additional middleware to your application. Useful when you want to do something with every request like check if a user is signed in. get(), post(), put(), delete(), all() Handle HTTP requests for various verbs WEB322 - Express Basics 17 Three Core Objects of Express (req) req body: Contains the data submitted from a request. cookies: Read cookie data sent from the browser. params: Dynamically read “variables” from the URL. (:var) query: Parse key/value pairs read from the query string of a URL. (? = &) get(): Read the header key/value pairs sent from the browser. WEB322 - Express Basics 18 Three Core Objects of Express (res) res cookie(): Set a cookie with the response (write to browser). download(): Send a file to the browser (save file dialog). end(): End a response immediately (nothing is sent back). get() / set(): Read or write a header. json(): Send back a JSON object with key/value data. redirect(): Redirect the browser to a different page. send(): Send a response to the client, can be a string, object or array. status(): Send back a specific status number. WEB322 - Express Basics 19 Serving Static Files A static resource (or file) is a resource that is not going to change. Examples include CSS or Image files. Don’t make a route to handle each static resource, instead, specify a folder that contains the static files. “static” is the name of the relative folder (to the server) that contains static content. It does not become part of the URL. WEB322 - Express Basics 20 Error Handling Performed via middleware. Create a function with four parameters: function handleClientError(err, req, res, next) Can have multiple error handlers. Call next() to move to the next error handler in the chain. Use to log the error in the server console or a database. WEB322 - Express Basics 21 Processing Form Data body-parser library: When you are expecting standard (text-based) form submissions. Add the body-parser middleware and “use” it to allow it to grab the data on the request and insert it into the req.body property. Recently added as a dependency of express. multer or express-fileupload library: When you are expecting multi-part form submissions (text & files). Require some setup. Always validate forms on both client-side and server- WEB322 - Express Basics 22 Demo of Express WEB322 - Express Basics 23