[go: up one dir, main page]

0% found this document useful (0 votes)
11 views28 pages

Introduction To ExpressJS

The document provides an introduction to ExpressJS, a minimalist web application framework for Node.js, highlighting its features, installation process, and basic routing. It also discusses the MERN stack, which includes MongoDB, Express, React, and Node.js, emphasizing its efficiency for web application development. Additionally, it covers middleware functions and their role in handling requests and responses within an Express application.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
11 views28 pages

Introduction To ExpressJS

The document provides an introduction to ExpressJS, a minimalist web application framework for Node.js, highlighting its features, installation process, and basic routing. It also discusses the MERN stack, which includes MongoDB, Express, React, and Node.js, emphasizing its efficiency for web application development. Additionally, it covers middleware functions and their role in handling requests and responses within an Express application.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

Introduction to ExpressJS

pearlyjaleco19@gmail.com
YWU6ZOAHE3

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
Agenda
● Introduction to ExpressJS
● Install ExpressJS
● ExpressJS – First Program
● Building Application Stack
● Express Routing
● Express Middleware
pearlyjaleco19@gmail.com
YWU6ZOAHE3

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
Introduction to ExpressJS
● Express is a web application framework for Node.
● It is a server-side or back-end framework not comparable to client-side frameworks like React, and
Angular but can be used in combination to build full-stack applications.
● Express is a fast, unopinionated, and minimalist web framework for Node.js.
● Building web applications with Node.js is MUCH easier.
● Used for both server-rendered apps as well as APIs.
pearlyjaleco19@gmail.com
YWU6ZOAHE3

● Full control of request and response.


● Most popular framework for Node.
● Great to use with client-side frameworks as it’s all JavaScript.

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
Prerequisites
● JS fundamentals ( Objects, Arrays, Conditions etc)
● Basic Node.js and NPM
● HTTP status codes
● JSON

pearlyjaleco19@gmail.com
YWU6ZOAHE3

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
Basic Server Syntax

pearlyjaleco19@gmail.com
YWU6ZOAHE3

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
Basic Route Handling
● Handling requests/route is simple.
● app.get(), app.post(), app.put(), app.delete() etc.
● Access to params, query string, url parts, etc
● Express has routers so we can store routes in separate files and export.
● We can parse incoming data with Body Parser.
pearlyjaleco19@gmail.com
YWU6ZOAHE3

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
Install Express JS
● Prerequisite: Node.js installed on the system.
● Visit the website for installation of node.js http://nodejs.org/en
● Assuming you’ve already installed Node.js.
● Create a directory to hold your application, and make that as your working directory.

pearlyjaleco19@gmail.com
YWU6ZOAHE3

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
Install Express JS
● Use the npm init command to create a package.json file for your application.
● This command prompts you for a number of things, such as the name and version of your application.
Hit RETURN to accept the default settings.
● For more information on how package.json works, see specifics of npm’s package.json handling.

pearlyjaleco19@gmail.com
YWU6ZOAHE3

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
Install Express JS

pearlyjaleco19@gmail.com
YWU6ZOAHE3

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
Install Express JS
● The package.json file for your application is as shown below.
● Used nodepad++ text editor

pearlyjaleco19@gmail.com
YWU6ZOAHE3

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
Install Express JS
● Use the npm i express command to install express

pearlyjaleco19@gmail.com
YWU6ZOAHE3

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
Install Express JS
● Create a myapp.js file in the root folder of express.

pearlyjaleco19@gmail.com
YWU6ZOAHE3

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
Express JS – First Program
● First program to print Hello World using express js.

pearlyjaleco19@gmail.com
YWU6ZOAHE3

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
Express JS – First Program
● We can check the output on any browser by using the url: http://localhost/5000.

pearlyjaleco19@gmail.com
YWU6ZOAHE3

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
Building Application Stack
● What is MERN Stack?
● A stack is the mixture of technologies used to create Web applications.
● Any web application will be made utilizing various technologies like (frameworks, libraries, databases).
● The MERN stack is a JavaScript stack that is intended to make the Application Development process
smoother.
pearlyjaleco19@gmail.com
YWU6ZOAHE3

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
Building Application Stack
● MERN Stack Components:
● MERN incorporates four open-source components:
○ MongoDB,
○ Express,
○ React, and
Node.js.
pearlyjaleco19@gmail.com
YWU6ZOAHE3○

● These components give an end to end frameworks for developers to work with.

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
Building Application Stack
● Components Overview:
● MongoDB A document-oriented, No-SQL database used to store the application data.
● NodeJS: The JavaScript runtime environment. Used to run JavaScript on a machine rather than in a
browser.
● ExpressJS: A framework layered on top of NodeJS, used to build the backend of a site using NodeJS
functions and structures.
pearlyjaleco19@gmail.com
YWU6ZOAHE3

● ReactJS: A library created by Facebook. It is used to build UI components that create the user interface
of the single-page web application.

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
Building Application Stack
● Benefits of MERN Stack
● Javascript is the programming language utilized both for client-side and server-side.
● For tech stack with different programming languages, developers need to find out how to interface
them together. With the JavaScript stack, developers should be proficient in JavaScript and JSON.
● Using the MERN stack enables developers to build highly efficient web applications.
pearlyjaleco19@gmail.com
YWU6ZOAHE3

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
ExpressJS Routing
● Routing refers to the mechanism for serving the client the content it has asked for.
● It is the most important aspects of your website or web services.
● Routing in Express is simple, flexible, and robust.
● A route specification consists of
○ An HTTP method (GET, POST, etc.),
A path specification that matches the request URI,
pearlyjaleco19@gmail.com
YWU6ZOAHE3○

○ And the route handler.


● The handler is passed in a request object and a response object.
● The request object can be inspected to get the various details of the request, and
● The response object’s methods can be used to send the response to the client

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
Routing – Request Objects
● To access a parameter value we use req.params.
○ req.param(name [, defaultValue])

● req.query: This holds a parsed query string.


○ It’s an object with keys: as the query string parameters and
Values as the query string values.
pearlyjaleco19@gmail.com
YWU6ZOAHE3○

○ Multiple keys with the same name are converted to arrays, and
○ Keys with a square bracket notation result in nested objects
○ (e.g., order[status]=closed can be accessed as req.query.order.status).

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
Routing – Request Objects
● req.header, req.get(header):
○ The get method gives access to any header in the request.
○ The header property is an object with all headers stored as key-value pairs.

● req.path: The path for which the middleware function is invoked; can be any of:
A string representing a path.
pearlyjaleco19@gmail.com
YWU6ZOAHE3○

○ A path pattern.
○ A regular expression pattern to match paths.
○ An array of combinations of any of the above.

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
Routing – Request Objects
● req.url, req.originalURL:
○ Contain the complete URL, including the query string.
○ If any middleware modifies the request URL, originalURL retains the original URL as it was received,
before the modification.

● req.body:
pearlyjaleco19@gmail.com
YWU6ZOAHE3

○ Contains key-value pairs of data submitted in the request body.


○ By default, it is undefined and is populated when you use body-parsing middleware is installed to
read and optionally interpret or parse the body.

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
Routing – Response Objects
● The res object represents the HTTP response that an Express app sends when it gets an HTTP request.
● res.send(body): Sends the HTTP response.
○ If the body is an object or an array, it is automatically converted to a JSON string with an
appropriate content type.

pearlyjaleco19@gmail.com
YWU6ZOAHE3

● res.status(code): This sets the response status code.


○ If not set, it is defaulted to 200 OK.
○ One common way of sending an error is by combining the status() and send() methods in a single
call like res.status(403).send("Access Denied").

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
Routing – Response Objects
● res.json(object): Sends a JSON response
○ This method sends a response (with the correct content-type) that is the parameter converted to a
JSON string using JSON.stringify().
○ The parameter can be any JSON type, including object, array, string, Boolean, number, or null.

pearlyjaleco19@gmail.com
YWU6ZOAHE3

● res.sendFile(path):
○ This responds with the contents of the file at path.
○ The content type of the response is guessed using the extension of the file.

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
Routing – Response Objects
● for a complete list, please refer to the Request documentation of Express at
● Request Objects: http://expressjs.com/en/api.html#req
● Response Objects: http://expressjs.com/en/api.html#res

pearlyjaleco19@gmail.com
YWU6ZOAHE3

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
ExpressJS Middleware
● An Express application is a series of middleware function calls.
● Router is nothing but a middleware function.
● Middleware functions have access to the request and response object (req,res), and the next
middleware function in the application’s request response cycle.
● The next middleware function is commonly denoted by a variable named next.
● next is the only built-in middleware (other than the router) available as part of Express.
pearlyjaleco19@gmail.com
YWU6ZOAHE3

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
ExpressJS Middleware
● Middleware can be at
○ The application level (i.e.,, applies to all requests) or
○ The router level (applies to specific request path patterns).
● The Middleware at the application level can be used like this: app.use(middleware function);
● The static middleware that knows the location of static files to serve.
● In order to use the same middleware in a route-specific way, you define it as:
pearlyjaleco19@gmail.com
YWU6ZOAHE3

○ app.use('/public', express.static('static'));
● This would have mounted the static files on the path /public and all static files would have to be
accessed with the prefix /public,
● For e.g.,: /public/index.html.

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.
Summary
● Express is a web application framework for Node. It is a server-side or back-end framework, fast,
unopinionated, and minimalist web framework for Node.js.
● Use the npm init command to create a package.json file for your application.
● The command npm i express is used to install express.
● MERN has four open-source components MongoDB, Express, React, and Node.js. These components
give an end to end frameworks for developers to work with.
pearlyjaleco19@gmail.com
YWU6ZOAHE3

● Using the MERN stack enables developers to build highly efficient web applications.
● Routing refers to the mechanism for serving the client the content it has asked for.
● There are various request and response objects used for interacting with the server.
● An Express application is a series of middleware function calls. Router is nothing but a middleware
function.

This file is meant for personal use by pearlyjaleco19@gmail.com only.


Sharing or publishing the contents in part or full is liable for legal action.

You might also like