Jade Templates for Express.js: Simplify Dynamic Web Page Creation

Learn how to use Jade (Pug) templates with Express.js to create dynamic web pages effortlessly. Discover installation steps, setup tips, and a concise example to get started quickly. Simplify your Node.js web development with Jade's clear and easy-to-use syntax.

Jade Templates for Express.js Applications

Jade (now known as Pug) is a template engine for Node.js that simplifies creating dynamic web pages. Its syntax is concise and relies on indentation to define HTML structure.

Installation and Setup

Install Jade:

Use npm to install Jade into your project:

Syntax


npm install jade

Create Jade Templates:

Jade templates have the .jade extension and are usually placed in a views folder within your project directory. Express.js searches for views in this folder by default. You can change this location using app.set('views', 'yourFolder').

Example Jade Template:

Syntax


doctype html
html
  head
    title Jade Page
  body
    h1 This page is produced by Jade engine
    p some paragraph here..

This template generates the following HTML:

Output


<!DOCTYPE html><br>
  <html><br>
  <head><br>
    <title>Jade Page</title><br>
  </head><br>
  <body><br>
    <h1>This page is produced by Jade engine</h1><br>
    <p>some paragraph here..</p><br>
  </body><br>
  </html>
Important: Indentation in Jade is crucial. Misplaced spaces can alter the output. For more details, refer to the Jade documentation.

Using Jade with Express.js

Set the View Engine:
Configure Express.js to use Jade as the view engine:

    Syntax
    
        
const express = require('express');
const app = express();

// Set Jade as the view engine
app.set('view engine', 'jade');

    
    


Render Jade Templates:
Use the res.render() method in your Express.js routes to render Jade templates. Provide the template name (without the .jade extension) and an optional data object:

    Syntax
    
        
app.get('/', (req, res) => {
  // Render the 'sample.jade' template
  res.render('sample');
});

    
    


Example:

    JavaScript Code
    
        
const express = require('express');
const app = express();

// Set Jade as the view engine
app.set('view engine', 'jade');

app.get('/', (req, res) => {
  res.render('sample');
});

app.listen(5000, () => console.log('Node server is running on port 5000!'));

    
    


Complex Example with Database Integration

Create the Jade Template (StudentList.jade):
This template generates a list of students from an array:

    Syntax
    
        
doctype html
html
  head
    title= title
  body
    h1 Student List using Jade engine
    ul
      each item in studentList
        li= item.StudentName

    
    


Render the Template with Data (server.js):
Use this code to render a student list from a SQL Server database:

    JavaScript Code
    
        
const express = require('express');
const app = express();
const sql = require('mssql'); // SQL Server connection library

// Set Jade as the view engine
app.set('view engine', 'jade');

app.get('/', (req, res) => {
  const config = {
    user: 'sa',
    password: 'password',
    server: 'localhost',
    database: 'SchoolDB',
  };

  sql.connect(config, (err) => {
    if (err) {
      console.error(err);
      return;
    }

    const request = new sql.Request();
    request.query('select * from Student', (err, recordset) => {
      if (err) {
        console.error(err);
        return;
      }

      // Pass student data to the template
      res.render('StudentList', { studentList: recordset.recordset });
    });
  });
});

app.listen(5000, () => console.log('Node server is running on port 5000!'));

    
    


Explanation:

    Import Express.js and create an Express application.
    Set Jade as the view engine using app.set().
    The GET route handler renders the StudentList.jade template with student data from the database.


By understanding how to use Jade with Express.js, you can create dynamic web applications efficiently and integrate data seamlessly.

        
          Previous
          Next