NodeJS + Pug: How to create reusable layouts (header, footer)

Overview

When building web applications, maintaining a consistent look and feel across your pages is essential. Using NodeJS together with Pug (formerly known as Jade), a high-performance template engine, can significantly simplify the creation of reusable layouts, such as headers and footers. In this tutorial, we’ll explore how to leverage these powerful technologies to build modular, maintainable web applications.

Setting Up Your Environment

Firstly, ensure you have NodeJS installed on your computer. You can download it from nodejs.org. Next, you’ll need to set up a new NodeJS project. Open your terminal or command prompt, navigate to your project directory, and initialize your project:

mkdir myproject
cd myproject
npm init -y
npm install express pug

This command creates a new directory for your project, initializes a new npm project within it, and installs Express and Pug, which are essential for this tutorial.

Creating Your First Pug Layout

Pug templates are based on indentation to define the document structure. Let’s create a basic layout that includes a header and footer that can be reused across different pages.

Create a views directory in your project folder and inside, create a file named layout.pug:

doctype html
html
  head
    title Your Website
  body
    header
      h1 Your Website Header
    block content
    footer
      p Copyright © 2023 Your Website

The block content directive is where the unique content of each page will be inserted. This layout acts as a skeletal structure for your pages.

Creating a Page Using the Layout

Next, let’s create a home page that uses this layout. In the views directory, create a file named home.pug:

extends layout.pug

block content
  section
    p Welcome to our website!

By using extends layout.pug, we’re telling Pug to use layout.pug as the base layout for home.pug. The content within the block content will replace the content of the block content in the layout.

Setting Up an Express Server

To display your Pug templates, you’ll need a web server. Express is a fast, unopinionated, minimalist web framework for Node.js that works well with Pug. Let’s set one up:

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

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

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

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

This code sets Pug as the view engine, tells Express where to find the Pug templates, creates a route for the home page, and starts a server listening on port 3000.

Implementing Reusable Components

Headers and footers often contain navigation menus, branding, and copyright information that should be consistent across pages. To avoid duplicity and maintain a single source of truth, you can use Pug’s include directive to separate these elements into their own files.

Create two files in your views directory: header.pug and footer.pug. In header.pug, you might have:

nav
  ul
    li: a(href='/') Home
    li: a(href='/about') About Us
    li: a(href='/contact') Contact

And in footer.pug, something like:

footer
  p Copyright © 2023 Your Website

Then, in layout.pug, replace the existing header and footer tags with:

include header.pug
block content
include footer.pug

This modular approach allows you to maintain a consistent structure across your web application while enabling flexibility in the content of individual pages.

Adding Static Files

Express can serve static files, such as CSS, JavaScript, and images. Create a public directory in your project folder. Inside, you can add subdirectories for stylesheets, scripts, and images. To serve these files, add the following line to your express app:

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

Conclusion

Using NodeJS and Pug to create reusable layouts like headers and footers streamlines the development process, allowing you to maintain a coherent structure throughout your web application. By breaking down the UI into modular components, you can easily update and reuse them, improving maintainability and scalability. With this knowledge, you’re well on your way to building dynamic, efficient web applications.