How to use Template Engines in Express JS ?

Last Updated : 15 Mar, 2024

Express.js is a popular web framework for Node.js that simplifies the process of building web applications. One of the key features of Express is its ability to integrate with template engines, allowing developers to dynamically generate HTML pages with data from their server. In this article, we’ll explore how to use template engines with Express, providing a step-by-step guide that’s easy for beginners to follow.

Prerequisites:

Steps to implement Template Engines using Express:

Step 1: Install Express and a Template Engine

npm install express ejs

Step 2: Set Up Express App:

Create a new file named `app.js` and set up a basic Express application. Require the Express module and create an instance of the Express application.

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

Step 3: Configure Express to Use EJS:

Configure Express to use EJS as the template engine. This involves setting the `view engine` to `’ejs’` and specifying the directory where your views (EJS templates) will be located.

app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');

Step 4: Create a Simple EJS Template:

Create a directory named `views` in your project root directory. Inside the `views` directory, create a new file named `index.ejs` and write a simple EJS template.

Step 5: Set Up a Route to Render the EJS Template:

Define a route in Express to render the EJS template we created earlier. This route will respond to HTTP GET requests to the root URL (`/`) and render the `index.ejs` template.

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

Step 6: Start the Express Server:

Finally, start the Express server and listen on a port of your choice (e.g., port 3000).

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

Example: Below is the code example for the template engine:

HTML

<!-- /views/index.ejs  -->

<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <title>Welcome to Express with EJS</title>
  </head>
  <body>
    <h1>Welcome to Express with EJS</h1>
    <p>Today's date is <%= new Date().toDateString() %>.</p>
  </body>
</html>

Javascript

// app.js
const express = require('express');
const app = express();
const PORT = 3000;

app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');

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

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

Step 7: Run Your Express Application

node app.js

Visit `http://localhost:3000` in your web browser, and you should see the message “Welcome to Express with EJS” along with today’s date rendered by the EJS template.

Output: