Previous

Express.js Using Templating Engines

Templating engines allow you to generate dynamic HTML pages by embedding variables and expressions within templates. This is useful when building web applications that require dynamic content, such as displaying user data, creating custom forms, or rendering views based on specific conditions. Express.js supports various templating engines to render views.

 

Key Features of Using Templating Engines

  • Dynamic Content Rendering: Templating engines help inject dynamic data into HTML views.
  • Separation of Concerns: It separates the logic and view layers, keeping code clean and maintainable.
  • Popular Templating Engines: Common templating engines supported by Express include EJS, Pug, and Handlebars.

 

Setting Up a Templating Engine in Express.js

To use a templating engine in Express, you need to install the relevant package, configure it, and then render views. Below is an example using EJS as the templating engine.

Install the Templating Engine

For example, to use EJS, you can install it via npm:

npm install ejs

Set Up Express to Use the Templating Engine

After installing the engine, you need to configure Express to use it for rendering views.

Example for EJS:

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

// Set the view engine to EJS
app.set('view engine', 'ejs');
app.set('views', './views'); // Optionally specify the views directory

// Route to render the index.ejs file
app.get('/', (req, res) => {
    res.render('index', { title: 'My Express App' });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

Create Template Files

In the example above, we render a view called index.ejs. You can create this template inside the views folder.

Example of views/index.ejs:

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1>Welcome to <%= title %>!</h1>
</body>
</html>

Render Data with Templating

You can pass data to the view, which will be dynamically rendered. In this case, the value of title will be displayed in the HTML.

Example of route passing data to view:

app.get('/', (req, res) => {
    res.render('index', { title: 'My Express Application' });
});

 

Using Other Templating Engines

You can use different templating engines depending on your preference. Here are examples of how to use popular templating engines in Express:

Pug (formerly Jade): A minimalist templating engine with a concise syntax.

npm install pug

Set up in Express:

app.set('view engine', 'pug');

Example views/index.pug:


doctype html
html
  head
    title #{title}
  body
    h1 Welcome to #{title}!

Handlebars: A powerful and flexible templating engine.

npm install express-handlebars

Set up in Express:

const exphbs = require('express-handlebars');
app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');

Example views/index.handlebars:

<html>
  <head><title>{{title}}</title></head>
  <body>
    <h1>Welcome to {{title}}!</h1>
  </body>
</html>

 

Passing Data to Templates

You can pass any kind of data (strings, arrays, objects, etc.) to the templates. Express will inject these values wherever placeholders are placed in the template.

Example:

app.get('/user', (req, res) => {
    const user = { name: 'John Doe', age: 30 };
    res.render('user', { user });
});

Template (views/user.ejs):

<h1>User Profile</h1>
<p>Name: <%= user.name %></p>
<p>Age: <%= user.age %></p>

 

Using Static Files with Templates

You can serve static files (like images, CSS, and JavaScript) in Express by using the express.static middleware. This can be helpful when linking assets in templates.

Example:

app.use(express.static('public'));

Now, if you have a public folder with images or CSS files, you can refer to them in your templates like so:

<link rel="stylesheet" href="/styles.css">

 

Summary

Templating engines in Express.js allow you to render dynamic HTML pages by embedding data into templates. You can set up a templating engine like EJS, Pug, or Handlebars and configure Express to render views with dynamic data. This separation of logic and presentation helps maintain cleaner code. You can also use middleware to serve static files like images or stylesheets along with your dynamic templates.

Previous