Express.js, a popular web application framework for Node.js, offers seamless integration with various templating engines. In this tutorial, we will focus on using Pug (formerly known as Jade) as the templating engine with Express.

Pug’s concise syntax and powerful features make it an excellent choice for building dynamic and elegant web applications.

By following this step-by-step guide, you’ll learn how to integrate Pug with Express, render dynamic views, use layout templates, and leverage Pug’s advanced capabilities to create stunning web applications.

Introduction to Pug Templating Engine

Pug is a powerful and expressive templating engine that focuses on simplicity and readability. It uses indentation-based syntax and eliminates the need for closing tags, resulting in clean and concise code. Pug is particularly well-suited for building HTML-based views and components in Node.js applications.

Setting up Express Project

1. Create a new directory for your project and navigate to it in your terminal:

mkdir express-pug-app
cd express-pug-app

2. Initialize a new npm project by running the following command and following the prompts:

npm init

3. Install Express as a dependency:

npm install express

4. Create a file named app.js (or any other preferred name) in the project directory. This will be the entry point of your Express application.

5. Open app.js in a code editor and add the following code to set up a basic Express application:

// Import the required modules
const express = require('express');
const app = express();
const port = 3000; // Choose your preferred port number

// Set up a route for the homepage
app.get('/', (req, res) => {
  res.send('Hello, Express!');
});

// Start the server
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

6. Save the file and go back to your terminal.

7. To start the Express application, run the following command:

node app.js

Open your web browser and visit http://localhost:3000 (replace 3000 with the port number you chose in the code). You should see the message “Hello, Express!” displayed in the browser.

Press CTRL+C to stop the server.

Installing and Configuring Pug

npm install pug

Configure Pug as the template engine

Open the app.js file located in the root directory of your Express.js application. Add the following lines of code to configure Pug as the template engine:

// Set the 'views' directory for your Pug templates
app.set('views', path.join(__dirname, 'views'));

// Set Pug as the template engine
app.set('view engine', 'pug');

In the code above, we’re setting the “views” directory as the location where your Pug templates will be stored. Adjust the path as per your project’s structure.

Create Pug templates

Create a new directory called views in the root directory of your application. Inside the views directory, create PUG template files with a .pug extension. For example, create a file named index.pug with the following content:

// index.pug
doctype html
html
  head
    title My Express App
  body
    h1 Welcome to My Express App
    p This is a sample Pug template.

Render Pug templates from a route

To render the Pug template from a route, open the routes/index.js file in your application directory and add the following code:

const express = require('express');
const router = express.Router();

// GET home page
router.get('/', (req, res, next) => {
  res.render('index');
});

module.exports = router;

Make sure, to configure these routes in app.js.

const routes = require('./routes/index');
app.use('/', routes);

Modified code for app.js

// Import the required modules
const express = require('express');
const path = require('path');
const routes = require('./routes/index');
const app = express();
const port = 3000; // Choose your preferred port number

//use the routes
app.use('/', routes); 

// Set the 'views' directory for your Pug templates
app.set('views', path.join(__dirname, 'views'));

// Set Pug as the template engine
app.set('view engine', 'pug');

// Start the server
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

Start the application

Finally, start your Express.js application by running the following command in your terminal:

node app.js

Now, if you visit http://localhost:3000/ in your web browser, you should see the rendered Pug template.

Just for your reference, here’s the complete thing:

Please note that, we can also use dynamic values inside our pug template.

That’s it! You have successfully installed and configured Pug in your Express.js application.

Focus Meta Keywords: Express.js, Pug, Jade, Templating Engine, Web Application, Node.js, Integration, Configuration, Views, Templates, Routes, Dynamic Web Applications.