In the realm of frontend development, there are two main types of rendering: client-side rendering and server-side rendering. Each has its specific use cases and is commonly used today. In this discussion, we will focus on server-side rendering with a view engine called Pug in Express.

We’ve already been working on a backend project using Express, so we’ll continue building on that. To follow along with the entire series, begin with the following:

If you want to quickly dive into the tutorial by cloning the project, you can get the code from the following repository and follow the steps below to setup the project.

Clone the project

Open a terminal, navigate to the location where you want to set up the project, and run the following command:​

git clone https://github.com/devnur-org/foodie-be

Navigate to the project directory

cd foodie-be

Installing dependencies

Next, install the project’s dependencies by running the following command:

npm install

Great! The project is now set up and ready for you to continue with this tutorial.

Using Pug as View Engine

A view engine is a tool that allows web pages to be rendered, enabling the display of dynamic content. There are various view engines available, but today we’ll be using Pug.

Installing Pug

Since we install all dependencies with npm, Pug is also available as a Node.js dependency. To install Pug, use the following command in a terminal:

npm install pug

To integrate Pug as a view engine with Express, we need to use the Express set function and supply the required parameters as demonstrated below.

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

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

app.get('/', (req, res) => {
    res.send('<h1>Hello World!</h1>');
})

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

By default, Express searches for template files in the views directory at the root of the project. Since we don’t have a views directory at the moment, let’s create one by running the following command in the terminal:

mkdir views

Now, let’s create a Pug template named index.pug for use on the homepage. Use the following command in the terminal to generate the file:

touch views/index.pug

Let’s use Pug syntax to create a sample template that will be rendered on the homepage route. Add the following code to index.pug:

html
    head
        title= "View Engines in Express"
    body
        h1= "Welcome to Foodie!"

The final step is to render index.pug at the root route. Update the server.js file to incorporate these changes and render index.pug.

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

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

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

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

Now, start the server by running the following command:

npm start

Open a browser and go to the following URL: http://localhost:3000/. You should see the following result with the tab title we set in the index.pug file:

Great! The view engine is successfully integrated with Express and is rendering index.pug on the homepage. But what if we want to make the content dynamic? Instead of hardcoding the title and heading in the Pug template, let’s send them from the server.

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

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

app.get('/', (req, res) => {
    res.render('index', {
        title: 'Using View Engine in Express', message: "This is received from the Server"
    });
})

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

We have introduced two variables called title and message. We introduced the message variable for understanding that we can use any variable name. The title and message variable will be passed to index.pug and can be accessed in the following way:

html
    head
        title= title
    body
        h1= message

Stop the server, restart it, and then revisit the same URL http://localhost:3000/ to see the changes.

Congratulations 🥳 on completing the tutorial! There are many other view engines to explore, such as EJS, Mustache, Jade, and more. I hope you’ve learned the basics of connecting view engines. If this method doesn’t fully suit your needs, don’t worry—most libraries available online come with their installation guides and documentation. Thank you for taking the time to read this article and learn about using view engines with Express.

Share with your audience and help them grow too!

• X
• LinkedIn
• Facebook
• WhatsApp
• Telegram
• ShareCopied to clipboard