EXPRESS.

JS
TUTORIAL
 EXPRESSJS
-
2

OVERVIEW
ExpressJS is a web application framework that
provides you with a simple API to build websites,
web apps and back ends. With ExpressJS, you need
not worry about low level protocols, processes, etc.

NGUYEN MINH DAO

WHAT IS EXPRESS?
 Express provides a minimal interface to build our applications. It
provides us 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.
 Express was developed by TJ Holowaychuk and is maintained by
the Node.js foundation and numerous open source contributors.

NGUYEN MINH DAO 3

WHY EXPRESS?
 Unlike its competitors like Rails and Django, which have an
opinionated way of building applications, Express has no "best
way" to do something. It is very flexible and pluggable.
 MongoDB and Mongoose
 MongoDB is an open-source, document database designed for ease of
development and scaling. This database is also used to store data.
 Mongoose is a client API for node.js which makes it easy to access
our database from our Express application.

NGUYEN MINH DAO 4

5
EXPRESSJS -
ENVIRONM
ENT

NGUYEN MINH DAO

EXPRESSJS - ENVIRONMENT
 In this chapter, we will learn how to start developing and using the
Express Framework.
 To start with, you should have the Node and the npm (node
package manager) installed. If you don’t already have these, go to
the Node setup to install node on your local system. Confirm that
node and npm are installed by running the following commands in
your terminal.
 node --version
 npm --version

NGUYEN MINH DAO 6

NGUYEN MINH DAO 7
NODE PACKAGE
MANAGER(NPM)
 npm is the package manager for node.
 The npm Registry is a public collection of packages of open-source
code for Node.js, front-end web apps, mobile apps, robots, routers,
and countless other needs of the JavaScript community. npm allows
us to access all these packages and install them locally.
 You can browse through the list of packages available on npm at
npmJS.

NGUYEN MINH DAO 8

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>

NGUYEN MINH DAO 9

NGUYEN MINH DAO 10
HOW TO USE NPM?
 This is all we need to start development using the Express
framework. 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 start working on Express.

NGUYEN MINH DAO 11

NGUYEN MINH DAO 12
NGUYEN MINH DAO 13
 EXPRESSJS
14
–
HELLO
WORLD

NGUYEN MINH DAO

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 expressjs_demo1.js and type the following in it.

NGUYEN MINH DAO 15

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 var 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.

NGUYEN MINH DAO 16

HOW THE APP WORKS?
 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 input and it sends this to the
requesting client. Here we are sending the string "Hello World!".
 app.listen(port, [host], [backlog], [callback]])

NGUYEN MINH DAO 17

 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.

NGUYEN MINH DAO 18

 19

EXPRESSJ
S-
ROUTING

NGUYEN MINH DAO

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, set, put,
delete. An alternate 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.

NGUYEN MINH DAO 20

NGUYEN MINH DAO 21
NGUYEN MINH DAO 22
NGUYEN MINH DAO 23
NGUYEN MINH DAO 24
ROUTERS
 Defining routes like above is very tedious to maintain. To separate the
routes from our main index.js file, we will use Express.Router.
 Create a new file called things.js and type the following in it.

NGUYEN MINH DAO 25

ROUTERS
 Now to use this router in our index.js, type in the following before the
app.listen function call.

NGUYEN MINH DAO 26

ROUTERS
 Now to use this router in our index.js, type in the following before the
app.listen function call.
 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.

NGUYEN MINH DAO 27

NGUYEN MINH DAO 28
ROUTERS
 Routers are very helpful in separating concerns and keep relevant
portions of our code together. They help in building maintainable code.
 You should define your routes relating to an entity in a single file and
include it using the above method in your index.js file.

NGUYEN MINH DAO 29

 30

EXPRESSJS –
HTTP
METHODS

NGUYEN MINH DAO

HTTP METHOD
 The HTTP method is supplied in the request and specifies the operation that
the client has requested. The following table lists the most used HTTP methods
−

NGUYEN MINH DAO 31

GET METHOD
 A GET request retrieves data from a web server by specifying parameters in
the URL portion of the request. This is the main method used for document
retrieval.
 The following example makes use of GET method to fetch hello.htm:

NGUYEN MINH DAO 32

GET METHOD
 The server response against the above HEAD request will be as follows:

NGUYEN MINH DAO 33

HEAD METHOD
 The HEAD method is functionally similar to GET, except that the server
replies with a response line and headers, but no entity-body.
 The following example makes use of HEAD method to fetch header
information about hello.htm:

NGUYEN MINH DAO 34

NGUYEN MINH DAO 35
POST METHOD
 The POST method is used when you want to send some data to the server, for
example, file update, form data, etc.
 The following example makes use of POST method to send a form data to the
server, which will be processed by a process.cgi and finally a response will be
returned:

NGUYEN MINH DAO 36

 37

EXPRESSJ
S - URL
BUILDING

NGUYEN MINH DAO

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 −

NGUYEN MINH DAO 38

URL BUILDING
 You can replace '123' in the URL with anything else and the change will reflect
in the response. A more complex example of the above is −

NGUYEN MINH DAO 39

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 −

NGUYEN MINH DAO 40

41
EXPRESSJS -
MIDDLEWARE

NGUYEN MINH DAO

NGUYEN MINH DAO 42