Express.
js
"Express is a fast, unopinionated minimalist web framework for [Link]" - official web site: [Link]
[Link] is a web application framework for [Link]. It provides various features that make web
application development fast and easy which otherwise takes more time using only [Link].
[Link] is based on the [Link] middleware module called connect which in turn uses http module. So,
any middleware which is based on connect will also work with [Link].
Advantages of [Link]
1. Makes [Link] web application development fast and easy.
2. Easy to configure and customize.
3. Allows you to define routes of your application based on HTTP methods and URLs.
4. Includes various middleware modules which you can use to perform additional tasks on request
and response.
5. Easy to integrate with different template engines like Jade, Vash, EJS etc.
6. Allows you to define an error handling middleware.
7. Easy to serve static files and resources of your application.
8. Allows you to create REST API server.
9. Easy to connect with databases such as MongoDB, Redis, MySQL
Install [Link]
You can install [Link] using npm. The following command will install latest version of [Link]
globally on your machine so that every [Link] application on your machine can use it.
npm install -g express
The following command will install latest version of [Link] local to your project folder.
C:\MyNodeJSApp> npm install express --save
As you know, --save will update the [Link] file by specifying [Link] dependency.
Install [Link] in Visual Studio
In the [Link] web app, we created a simple [Link] web application in Visual Studio. Now, to install
[Link], right click on the project MyNodejsWebApp -> select Install New npm Packages.
It will open the following dialog box.
Now, type 'express' in the search box. It will display all the packages starting with express. Select latest
version of [Link] and select Add to [Link] checkbox and then click Install Package button as
shown below.
So, this will install [Link] package into your project under node_modules folder. It also adds a
dependencies entry for [Link] as shown below.
Now, you are ready to use [Link] in your application.
Learn how to create web application using [Link] in the next section.
[Link] Web Application
In this section, you will learn how to create a web application using [Link].
[Link] provides an easy way to create web server and render HTML pages for different HTTP requests
by configuring routes for your application.
Web Server
First of all, import the [Link] module and create the web server as shown below.
[Link]: [Link] Web Server
In the above example, we imported [Link] module using require() function. The express
module returns a function. This function returns an object which can be used to configure Express
application (app in the above example).
The app object includes methods for routing HTTP requests, configuring middleware, rendering
HTML views and registering a template engine.
The [Link]() function creates the [Link] web server at the specified host and port. It is identical
to Node's [Link]() method.
Run the above example using node [Link] command and point your browser
to [Link] It will display Cannot GET / because we have not configured any routes
yet.
Configure Routes
Use app object to define different routes of your application. The app object includes get(), post(),
put() and delete() methods to define routes for HTTP GET, POST, PUT and DELETE requests
respectively.
The following example demonstrates configuring routes for HTTP requests.
Example: Configure Routes in [Link]
In the above example, [Link](), [Link](), [Link]() and [Link]() methods define routes for HTTP
GET, POST, PUT, DELETE respectively. The first parameter is a path of a route which will start after base
URL. The callback function includes request and response object which will be executed on each request.
Run the above example using node [Link] command, and point your browser to [Link] and
you will see the following result.
Handle POST Request
Here, you will learn how to handle HTTP POST request and get data from the submitted form.
First, create [Link] file in the root folder of your application and write the following HTML code in it.
Example: Configure Routes in [Link]
Body Parser
To handle HTTP POST request in [Link] version 4 and above, you need to install middleware module
called body-parser. The middleware was a part of [Link] earlier but now you have to install it separately.
This body-parser module parses the JSON, buffer, string and url encoded data submitted using HTTP POST
request. Install body-parser using NPM as shown below.
Now, import body-parser and get the POST request data as shown below.
[Link]: Handle POST Route in [Link]
In the above example, POST data can be accessed using [Link]. The [Link] is an object that includes
properties for each submitted form. [Link] contains firstName and lastName input types, so you can
access it using [Link] and [Link].
Now, run the above example using node [Link] command, point your browser
to [Link] and see the following result.
Fill the First Name and Last Name in the above example and click on submit. For example, enter "James"
in First Name textbox and "Bond" in Last Name textbox and click the submit button. The following result
is displayed.
This is how you can handle HTTP requests using [Link].
Serving Static Resources in [Link]
In this section, you will learn how to serve static resources like images, css, JavaScript or other static files
using [Link] and node-static module.
Serve Static Resources using [Link]
It is easy to serve static files using built-in middleware in [Link] called [Link]. Using
[Link]() method, you can server static resources directly by specifying the folder name where you
have stored your static resources.
The following example serves static resources from the public folder under the root folder of your
application.
[Link]
In the above example, [Link]() method mounts the middleware [Link] for every request.
The [Link] middleware is responsible for serving the static assets of an [Link] application. The
[Link]() method specifies the folder from which to serve all static resources.
Now, run the above code using node [Link] command and point your browser
to [Link] and it will display [Link] from the public folder (public
folder should have [Link]).
If you have different folders for different types of resources then you can set [Link] middleware as
shown below.
Example: Serve resources from different folders
In the above example, [Link]() method mounts the [Link] middleware for every request that starts
with "/images". It will serve images from images folder for every HTTP requests that starts with "/images".
For example, HTTP request [Link] will get [Link] as a
response. All other resources will be served from public folder.
Now, run the above code using node [Link] and point your browser
to [Link] and it will display [Link] from the images folder,
whereas [Link] request will be served from public folder. (images folder must
include [Link] and public folder must include [Link])
You can also create a virtual path in case you don't want to show actual folder name in the url.
Example: Setting virtual path
So now, you can use [Link] to serve all the images instead
of [Link]
In this way, you can use [Link] to server static resources such as images, CSS, JavaScript or other files.
Serve Static Resources using Node-static Module
In your node application, you can use node-static module to serve static resources. The node-static module
is an HTTP static-file server module with built-in caching.
First of all, install node-static module using NPM as below.
After installing node-static module, you can create static file server in [Link] which serves static files only.
The following example demonstrates serving static resources using node-static module.
Example: Serving static resources using node-static
In the above example, node-static will serve static files from public folder by default. So, an URL request
will automatically map to the file in the public folder and will send it as a response.
Now, run the above example using node [Link] command and point your browser
to [Link] (assuming that public folder includes [Link] file) and it
will display the image on your browser. You don't need to give "/public/[Link]" because it will
automatically serve all the static files from the public folder.