Skip to content
DolphJS

Pug Integration

DolphJS supports the Pug templating engine (formerly Jade) for developers who prefer its concise, whitespace-sensitive syntax.

Installation

Section titled “Installation”

Install Pug:

Terminal window
pnpm install pug

Configuring the MVC Adapter

Section titled “Configuring the MVC Adapter”

Configure the MVCAdapter in your server bootstrap file to use Pug.

src/server.ts
import { DolphFactory } from '@dolphjs/dolph';
import { MVCAdapter } from '@dolphjs/dolph/common';
import { PageComponent } from './page/page.component';
import * as path from 'path';


async function bootstrap() {
  const dolph = new DolphFactory([PageComponent]);


  MVCAdapter.setViewsDir(path.join(process.cwd(), 'views'));
  MVCAdapter.setViewEngine('pug');


  dolph.start();
}


bootstrap();

Creating the View

Section titled “Creating the View”

Create a views directory in your project root, and add an index.pug file. Notice the indentation-based syntax.

//- views/index.pug
doctype html
html(lang="en")
  head
    title= title
  body
    h1= heading
    ul
      each user in users
        li= user.name

Rendering the View in a Controller

Section titled “Rendering the View in a Controller”

Just like with EJS, use the @Render() decorator to pass data to the Pug view.

src/page/page.controller.ts
import { DolphControllerHandler } from '@dolphjs/dolph/classes';
import { Dolph } from '@dolphjs/dolph/common';
import { Route, Get, Render } from '@dolphjs/dolph/decorators';


@Route('pages')
export class PageController extends DolphControllerHandler<Dolph> {




  @Get('home')
  @Render('index') // Corresponds to views/index.pug
  async getHomePage() {
    // Data passed directly to Pug
    return {
      title: 'DolphJS Pug App',
      heading: 'Welcome to SSR with Pug',
      users: [
        { name: 'Charlie' },
        { name: 'Diana' }
      ]
    };
  }
}