Buzz
Continue exploring the article below by Mytour to understand and get acquainted with Express Framework in Node.js.
1. What is Express?
2. Installation and Usage of Express
3. What are Routes?
4. Creating a Web Server Template using Express.js
1. What is Express.js?
Express.js is a Node.js web application server framework, specifically designed to build single-page, multi-page, and hybrid web applications, and has become the standard framework for Node.js.
Express is the backend component of the MEAN stack. MEAN is a free open-source JavaScript software used to build dynamic websites and web applications containing the following components:
1. MongoDB - Standard NoSQL database.
2. Express.js - Default web application framework.
3. Angular.js - JavaScript MVC framework used in web applications.
4. Node.js - Framework used in network and scalable server applications.
The Express.js framework facilitates the development of applications used to handle various types of requests such as GET, PUT, POST, and DELETE, making it easier.
2. Installation and Usage of Express
Express is installed via the Node Package Manager. Simply open the command-line utility and enter the following command:
npm install express
The above command will instruct the Node package manager to download and install the express modules.
Next, use the Express Framework that has just been installed and create a simple Hello World application:
Starting Output:
- It's evident that upon browsing to the localhost URL on port 3000, the string Hello World will be displayed on the page.
- In this code snippet, we specifically refer to the server listening on port number 3000, hence we can visualize the output when navigating to this URL.
3. What exactly is a Route?
Route (routing) refers to determining how an application responds to client requests to a specific endpoint.
For example, a client can make http GET, POST, PUT, or DELETE requests to different URLs, such as one of the URLs listed below:
http://localhost:3000/books
http://localhost:3000/students
In the given example:
- If a GET request is made to the first URL, the response will be a list of different types of books.
- If a GET request is made to the second URL, the response will be a list of students.
- Based on the accessed URL, another function on the web server will be called and the response will be sent to the client. This is known as the concept of routing.
Each route may have one or more handler functions, which are executed when the route is matched.
Below is the general syntax for a route:
app.METHOD(PATH, HANDLER)
Where:
- app represents an instance of the express module.
- METHOD stands for the HTTP request method (GET, POST, PUT, or DELETE).
- PATH refers to the route on the server.
- HANDLE is the function executed when the route is matched.
Let's explore the example below to gain a better understanding of routes. In this example, we'll create 3 routes:
1. Route A /Node displays the string 'Node tutorial' if this route is accessed.
2. Route A /Angular displays the string 'Angular tutorial' if this route is accessed.
3. A default route will display the string 'welcome to Mytour'.
Fundamentally, the code Mytour employs will resemble the code snippets in previous examples. The following code snippet is an add-on to demonstrate how routes are implemented:
var express = require('express');
var app = express();
app.route('/Node').get(function(req,res)
{
res.send('Node tutorial');
});
post(function(req,res)
{
res.send('Angular tutorial');
});
put(function(req,res)
{
res.send(' welcome to Mytour ');
}));
In the above code snippet:
1. Here we define a route if the URL http://localhost:3000/Node
This function has 2 parameters:
- The main parameter we use is the 'res' parameter, used to send information to the client.
- The 'req' parameter holds information about the requests made. Sometimes additional parameters can be sent as part of the request made, so the 'req' parameter can be used to find the additional parameters sent.
2. Use the send function to send the string 'Node tutorial' back to the client if the Node route is selected.
3. Here we define a route if the URL http://localhost:3000/Angular
4. Use the send function to send the string 'Angular tutorial' back to the client if the Angular route is selected.
5. This is the default route selected when the user navigates to the application's route - http://localhost:3000
The output result appears as follows:
From the output result:
- If you browse to the localhost URL on port 3000, you will see the string 'welcome to Mytour' displayed on the page.
- In the above code snippet, we refer to the default URL which will be shown in this message.
- If the URL changes to /Node, the corresponding Node route will be selected, and the string 'Node tutorial' will be displayed.
- If the URL is changed to /Angular, the corresponding Angular route will be selected, and the string 'Angular tutorial' will be displayed.
4. Creating a Web Server Template using Express.js
From the above example, you can see how we determine which output to display based on the route. This type of routing is used in most modern web applications. Another part of the web server uses templates in Node.js.
To quickly create Node applications, the simplest and easiest way is to use application templates. In the example below, Mytour will demonstrate the use of the jade framework for templating.
Install Jade via the Node Package Manager. To do this, enter the command below into the command line window:
npm install jade
The above command will prompt the Node Package Manager to download and install the Jade module.
Note: The latest version of Node Jade is not accepted; instead, we use pug.
Utilize the newly installed jade framework and create some basic templates:
First, create a jade template. Create a file named index.jade and insert the following code:
In the above code snippet:
1. Here we define that the page title will be dynamically changed to any value when this template is called.
2. Text within the header tag will be replaced with any value through the jade template.
var express=require('express');
var app=express();
app.set('view engine','jade');
app.get('/',function(req,res)
{
res.render('index',
{title:'Guru99',message:'Welcome'})
};
var server=app.listen(3000,function() {});
Explaining the above code:
1. Initially, to specify that the application's 'view engine' will be used to render templates. Thus, we'll use jade to render templates.
2. The render function is utilized to display a web page. In this example, it displays the pre-created template (index.jade).
3. Translate the values Guru99 and Welcome into corresponding title and message parameters. These values will be substituted with the title and message parameters declared in the index.jade template.
If the above command is executed successfully, the output will be displayed when you run the code on your web browser.
From the output:
- We can observe that the title of the page is set to Guru99 and the header is set to Welcome.
- This is because the jade template is called within the Node.js application.
So, readers have just explored and familiarized themselves with the Express Framework in Node.js alongside Mytour. Essentially, the Express Framework is the most popular framework used in developing Node.js applications and is integrated with leading Node.js frameworks, supporting the tracking of server-based applications.
Routes are used to redirect users to different sections within a web application based on the performed request. The response for each route can vary, depending on what is displayed to the user. Templates are used to efficiently insert content. Jade is one of the most popular template engines used in Node.js applications.
