CSCI2720 - Building Web Applications
Lecture 14: [Link] with Express
Dr Colin Tsang
Outline
• Overview of [Link]
• Express Basics
• Routing
• Retrieving data from query string (GET) and from body (POST)
• Generating content of a response
• Retrieving and setting header fields from a request
• Retrieving and setting cookie and sessions
[Link] and Express
• [Link] – a JavaScript run-time environment
• Was first released in 2009
• Makes writing servers, including web servers, easier
• Runs JS on server side (using Chrome V8 engine)
• It uses non-blocking I/O
• No waiting for I/O, network operations and other software
• Express – a module (add-in) for [Link]
• Allows easy set up of web and mobile applications
[Link] and Express
• With [Link], to implement a web application, a common approach is to create a
custom-made web server by
• Incorporating a web application framework like Express
• Including only the needed modules
• Writing application specific script in JavaScript
Usual scenario of [Link]
• This is often how people set up [Link] with Express
• But you can also do this:
Process of the web server
• Typical steps involved in a Request-Response cycle
1. Routing (deciding the actions to take based on URL and HTTP method)
2. Retrieve data from an HTTP request
3. Process the data, e.g.,
• Validation
• Apply business logic
• Update database
4. Generate an HTTP response
The Express Framework
• Express is a minimal and flexible [Link] web application framework
• Core features of Express allows one to
• Define a routing table
• To map request URL and HTTP method to an action
• Set up middleware to respond to HTTP Requests
• Use template engine to produce HTML output
• Ref: [Link]
Installation
• To use [Link], it needs to be installed onto the machine which will act as the web
server
• Available as Current and LTS (long term support) versions
• Multiple platforms
• [Link]
• Although you can run a zip version without installing, [Link] cannot listen to the
server ports on a machine without administrator rights.
• Cloud version: try StackBlitz for a blank [Link] project, using Google Chrome for
support of WebContainers
NPM
• [Link] allows the management of modules through npm
• Modules are like libraries, and we can install them when needed
• Set up the folder first
• npm init
• The installed modules will exist as a folder node_modules under the app folder
• To install additional modules using npm, e.g., Express
• npm install express
• More steps are indeed required by Express, see:
• [Link]
Helo World!
• After setting up [Link] and Express, create [Link] (the entry point) anywhere on
your computer
• Note: this .js file is not run in a browser, but at the web server of Node/Express
• See: [Link]
• req is an object representing the current HTTP request
• res is an object representing the current HTTP response
Hello World!
• Start the server with the command:
• node [Link]
• The system path may need to be adjusted for the command to run
• Now the server is ready to be accessed at port 3000
• To try on your own machine, access [Link]
• See: [Link]
Express basics
• We are going to discuss the following basic Express function:
• Routing
• Retrieving data from query string (GET) and from body (POST)
• Generating content of a response
• Retrieving and setting header fields from a request
• Retrieving and setting cookie and sessions
Routing
• Routing is to determine the response based on the request URI and method
• Virtual files and paths can be specified in the URL
• The path specified by the URL is simply parsed as a string
• In express, routing depends on the HTTP method
• [Link](route_path, callback);
• METHOD can be on of GET, POST, PUT, DELETE, ALL
• The route path can be strings, string pattern, or regular expressions
• See: [Link]
• Query strings are not part of the route path
• If a URL is [Link] only /x/y will be matched against the route
path
Route based on request method
• The code can be found at: [Link]
• You can only use [Link]() once for a response.
[Link]('/path1', function (req, res) {
[Link]('You made a GET path1 request');
})
[Link]('/path2', function (req, res) {
[Link]('You made a GET path2 request');
});
[Link]('/*', function (req, res) {
[Link]('You made a request');
});
[Link]('/path3', function (req, res) {
[Link]('You will not see this');
});
Route Path
Generating file content dynamically
Serving static files
• [Link]() transfers the file at the given absolute path
• You cannot use both [Link]() and [Link]() in one response
• It sets the Content-Type response HTTP header field based on the file extension
See: [Link]
GET parameters from a query string
• The code can be found at: [Link]
More on [Link] vs [Link]
[Link] [Link]
Example URL /test/123 /test?mykey=123&yourkey=456
Example data access [Link](‘/test/:keyid', [Link](‘/test', (req,res) =>
(req,res) => [Link]([Link]))
[Link]([Link]))
Usage Handle values within a consistent URL Searching items within URL parameters
structure
POST parameters in request body
Retrieving request headers
Setting response headers
Middleware and routing
• Middleware is a function in the form of:
• An Express application is essentially a series of middleware calls
• Routing – defining how middleware(s) are used to handle a request (i.e., without
next)
Built-in middleware
• These middleware functions come with Express:
• [Link]()
• For serving static files
• [Link]()
• For parsing JSON in incoming requests
• [Link]()
• For parsing URL-encoded contents
• Third-party middleware can be loaded using require()
• See: [Link]
Designing URL
• The URL of a page to show the detailed view of an item (with a specific ID) can be
represented as: [Link]
• i.e., representing the ID as a name-value pair in query string
• Query parsing in [Link][]
• Or as: [Link]
• i.e., embedding the ID in a particular path fragment
• Route parameters parsing in [Link][]
• What is the difference between two designs?
• User experience
[Link] vs Others
• See: [Link]
development-he7oa24wp
• [Link] is written in JavaScript, while most of the other server-side technologies are
written in C or C++.
[Link] vs Others
• Express is only one of the implementations of web servers on [Link]
• Koa, Hapi, [Link], [Link], Meteor, ……
• With React, there are also other possibilities:
• create-react-app runs a web server automatically with npm start, to show the React app
in development mode
• For static deployment, the server serve can be used
• See: [Link]
Further reading
• Express routing guide:
• [Link]
• Express 4 APIs:
• [Link]