Scaler
Academy
Data Science
Neovarsity
New
Skill Test
CoursesFree Masterclass
Search for Articles, Topics
ExpressJS Tutorial
Template Route in ExpressJS

Template Route in ExpressJS

By Apoorv Dwivedi
13 mins read
Last updated: 3 Feb 2024
242 views
Learn via video courses
Topics Covered

Overview

Express is essentially the standard framework for building websites with Node. Setting up a template and routing is the initial step in creating an Express website, just like with any other website. EJS is an easy-to-use Javascript templating language for creating HTML. Without needing to understand more difficult front-end frameworks like Angular or React, it functions well with Node.

Introduction

Routing describes how URI endpoints in an application respond to client requests. See Basic Routing for a guide to routing.

You define routing using Express app object methods that are equivalent to HTTP methods, such as app. get() for GET requests and app.post for POST requests. See app.method for a complete list. Additionally, you can specify middleware as the callback function with app.use() and handle all HTTP methods with app.all() (learn how to use middleware for more details).

When the programme receives a request to the provided route (endpoint) and HTTP method, it calls the callback function specified by these routing methods (also known as "handler functions"). To put it another way, the application essentially "listens" for requests that match the route(s) and method(s) supplied, and when it finds a match, it calls the callback function specified.

In actuality, the callback functions that are input to the routing methods can be several. With numerous callback functions, it is crucial to passing control to the next callback by passing next as an argument to the callback function and then calling next() inside the function body.

An extremely simple route is demonstrated by the code that follows:

Express is a popular Node.js framework for building web applications. One of the key features of Express is its routing system, which allows developers to define the behavior of their application based on incoming HTTP requests.

In Express, routes are defined using HTTP methods (e.g., GET, POST, PUT, DELETE) and a URL pattern that maps to a specific handler function. For example, the following code defines a route for handling GET requests to the root URL of the application:

This route will respond to HTTP GET requests to the root URL of the application (/) by sending the string "Hello World!" as the response.

Template route in express are a way to define dynamic routes in Express using URL patterns that include variables. These variables are then extracted from the URL and passed to the handler function as parameters. For example, the following code defines a template route in the express that captures a parameter called name:

In this example, the: name portion of the URL pattern indicates that this is a template route in the express that captures a parameter called name. When an HTTP GET request is made to a URL that matches this pattern (e.g., /hello/John), Express will extract the value of the name parameter from the URL and pass it to the handler function as req.params.name. The handler function can then use this value to dynamically generate a response.

Template routes in express can include multiple parameters and can also use regular expressions to define more complex patterns. For example, the following code defines a template route that captures two parameters, id, and slug, where id must be a number and slug must be a string of lowercase letters:

In this example, the:id([0-9]+) portion of the URL pattern uses a regular expression to specify that the id parameter must be a number, and the :slug([a-z]+) portion specifies that the slug parameter must be a string of lowercase letters. What are template routes in express.js

ExpressJS is a popular Node.js web application framework that provides a robust and flexible routing system. In Express, routes are used to determine how an application responds to client requests. These routes are defined by HTTP methods (such as GET, POST, PUT, DELETE) and URL patterns, which map to specific handler functions.

Template route in express, also known as parameterized route, are a type of route that allow developers to create dynamic routes in their applications. These routes are defined using URL patterns that include parameters, which can be used to extract dynamic values from incoming requests. In this article, we'll explore the concept of template route in Express in more detail.

Defining Template Routes

Express template route are defined using URL patterns that include one or more parameters. A parameter is a variable that is included in the URL pattern, and can be used to extract dynamic values from incoming requests. The syntax for defining a parameter in a URL pattern is to prefix the parameter name with a colon (:). For example, the following URL pattern includes a parameter called id:

In this example, the app.get() method is used to define a route for handling GET requests to the /users URL path with a dynamic parameter called id. This parameter can match any value and is used to extract the value from the incoming request.

When a client requests a URL path that matches this pattern (such as /users/123), ExpressJS will extract the value of the id parameter and make it available in the req.params object. The req.params object is an object that contains key-value pairs, where the keys are the names of the parameters defined in the URL pattern, and the values are the values extracted from the request URL.

The handler function can then use the req.params object to access the value of the parameter and respond to the request accordingly. For example, the following handler function sends a response with the value of the id parameter:

In this example, the handler function extracts the value of the id parameter from the req.params object and uses it to send a response back to the client.

Using Multiple Parameters

Express template route can include multiple parameters, which can be used to extract multiple values from the request URL. The syntax for defining multiple parameters in a URL pattern is to separate the parameters with slashes (/). For example, the following URL pattern includes two parameters, userId and postId:

In this example, the app.get() method is used to define a route for handling GET requests to the /users URL path with two dynamic parameters, userId and postId. When a client makes a request to a URL path that matches this pattern (such as /users/123/posts/456), ExpressJS will extract the values of both parameters and make them available in the req.params object.

The handler function can then use the req.params object to access the values of the parameters and respond to the request accordingly. For example, the following handler function sends a response with the values of both parameters:

Route Methods

An instance of the express class is given a route method, which is derived from one of the HTTP methods.

Routes for the GET and POST methods to the app's root are defined in the following code, as an example.

All HTTP request methods are supported by Express, including get, post, and others. See app.METHOD for a complete list.

For all HTTP request methods, the custom routing method app.all() is used to load middleware routines at a path. For instance, when a request is made to the route "/secret" using any of the HTTP request methods allowed by the http module, such as GET, POST, PUT, or DELETE, the following handler is executed.

Route Paths

The endpoints at which requests may be made are defined by route pathways in conjunction with a request method. Strings, string patterns, or regular expressions can all be used as route pathways.

The symbols ?, +, *, and () are subsets of their equivalents in regular expressions. By string-based pathways, the hyphen (-) and the dot (.) are taken literally.

If you need to use the dollar character ($) in a path string, enclose it escaped within ([ and ]).

Note

  • Express uses path-to-regexp to match the route paths; for a list of all possible ways to define a route path, see the path-to-regexp documentation. Even though it doesn't enable pattern matching, Express Route Tester is a useful tool for testing fundamental Express routes.
  • The route path does not include query strings.

Here are several instances of string-based route pathways. Requests to the root route, /, will be matched by this route path.

This route path will match requests to /about.

Requests for /random.text will be matched by this route path.

Here are some instances of string pattern-based route pathways. Acd and abcd will match this route's itinerary.

Abcd, abbcd, abbbcd, and so forth will all match this route path.

Abcd, Abxcd, AbRANDOMcd, Ab123cd, and so forth will all match this route path.

Both /abe and /abcde will work with this route path.

Route pathways based on regular expressions include the following:

Anything with a "a" in it will match this travel path.

This route's path will be compatible with butterflies and dragonflies, but not with butterflymen, dragonflymen, and so forth.

Route Parameters

The values supplied at their place in the URL are captured by route parameters, also known as URL segments. The names of the route parameters supplied in the path are used as the keys for the captured values in the req.params object.

In Express.js, route parameters are used to capture dynamic values from the URL. They are specified in the route path as a placeholder preceded by a colon. When a request is made to a route that matches the path pattern, Express.js automatically extracts the value of the parameter from the URL and adds it to the request object as req.params.

Here are a few ways to work with route parameters in Express.js:

1. Accessing Route Parameters in a Route Handler:

In the route handler function, you can access the route parameter value using req.params.parameterName. For example, if the route path is /users/, you can access the value of id using req.params.id.

2. Using Multiple Route Parameters in a Single Route:

You can define multiple route parameters in a single route by separating them with slashes in the route path. For example, if you want to capture both user ID and book ID, you can define the route path as /users//books/. Then, you can access the values of both parameters using req.params.userId and req.params.bookId, respectively.

3. Defining Optional Route Parameters:

You can define optional route parameters by adding a question mark after the parameter name in the route path. For example, if you want to capture an optional parameter status, you can define the route path as /users//?. If the status parameter is not present in the URL, req.params.the status will be undefined.

4. Defining Route Parameters with Regular Expression Patterns:

You can define route parameters with regular expression patterns to restrict the type of value that can be captured. For example, if you want to capture only numeric values for the user ID, you can define the route path as /users/(\d+). The regular expression pattern \d+ matches one or more digits.

5. Using Middleware to Handle Common Functionality for Specific Route Parameters:

You can define middleware that will be executed only for routes that have a certain route parameter. This can be useful for performing validation or pre-processing on the parameter value before executing the route handler function. You can define middleware functions using the app.param() method. For example, you can define a middleware function to validate the user ID parameter like this:

This middleware function will be executed only for routes that have the: id route parameter. It checks whether the id parameter is valid, and if it is, it sets req.params.id and calls next() to pass control to the next middleware function or route handler function. If the id parameter is not valid, it sends a 400 Bad Request response.

These are just a few examples of how to work with route parameters in Express.js. Express.js provides many more features for handling route parameters, and you can use them to build powerful and flexible APIs.

Template Route Example

here's an example of how you can create an Express.js server with different express template routes:

In this example, we're using EJS templates as the view engine, but you can use other templating engines as well. The first route / renders a home page using the home.ejs template and passes a title variable to the template. The second route /contact renders a contact page using the contact.ejs template and passes a title variable to the template.

The third route /product/ renders a product page using the product.ejs template and passes the id parameter value as productId. It then queries the database to get the product with the specified ID and passes it as a product to the template along with the product name as the title variable.

Note that the getProductById function used in this example is just a placeholder for a function that would query the database to get the product with the specified ID. When the server receives a request for any of these routes, it renders the corresponding template with the specified variables and sends the rendered HTML back to the client.

Benefits of Using Template Routes in Express

A template route is a route in Express.js that uses a template engine to render dynamic HTML pages. In a template route, you define the route path and the HTTP method and then call res.render() to render the corresponding template. The template engine replaces variables in the template with data from the server, allowing you to create dynamic web pages that can be customized based on user input or database queries. Some of the advantages of using template routes in express are listed below:

  • Modular code: Using a template engine and defining routes that render templates makes it easier to organize your code into modular components. Instead of having one large HTML file that contains all of your HTML, you can break your HTML up into smaller templates that are easier to maintain and reuse.
  • Separation of concerns: Separating the presentation layer from the business logic and data access layer is a best practice in software engineering. By using a template engine and defining routes that render templates, you can separate the presentation layer from the rest of your code, making it easier to maintain and modify your application over time.
  • Dynamic content: One of the main benefits of using template routes is the ability to create dynamic web pages that can be customized based on user input or database queries. By using a template engine, you can easily insert data into your HTML templates, allowing you to create web pages that display data from the server in real-time.
  • Flexibility: Template routes give you the flexibility to create web pages that can be customized based on user input or database queries. For example, you can create a route that displays a list of products and then create a second route that displays the details of a specific product based on its ID.
  • Reusability: By using templates and defining routes that render them, you can create reusable components that can be used across multiple pages. For example, you can create a header and footer template that can be included in all of your web pages, making it easier to maintain a consistent look and feel across your application.
  • Improved performance: Using a template engine can improve the performance of your web application by reducing the amount of data that needs to be sent to the client. By separating the presentation layer from the business logic and data access layer, you can send only the data that is needed for each page, reducing the size of the response and improving the performance of your application.

Conclusion

Here are some key takeaways about template routes in Express.js:

  • Template engines allow you to create dynamic HTML pages by using templates that can be filled with data at runtime.
  • Express.js supports a variety of template engines, including EJS, Handlebars, and Pug.
  • To use a template engine in Express.js, you need to set the view engine and the views directory using app.set(). For example, app.set('view engine', 'ejs') sets EJS as the view engine.
  • To render a template in Express.js, you can use the res.render() method, which takes the name of the template and an object containing the data to be passed to the template.
  • You can define routes in Express.js that use templates by specifying the route path and the HTTP method, and then calling res.render() to render the corresponding template.
  • In a template route, you can use route parameters to capture dynamic values from the URL and use them in the template.
  • You can also use middleware functions to perform common tasks such as data validation or authentication before rendering the template.

Overall, template routes in Express.js provide a powerful way to create dynamic web pages that can be customized based on user input or database queries. By using a template engine and defining routes that render templates, you can create a flexible and modular web application that can be easily maintained and extended over time.