Skip to content
DolphJS

EJS Integration

While DolphJS is heavily optimized for building JSON-based REST APIs, it is equally capable of serving full Server-Side Rendered (SSR) applications using the Model-View-Controller (MVC) pattern.

In this guide, we’ll configure DolphJS to render HTML views using the EJS templating engine.

Installation

Section titled “Installation”

Install EJS:

Terminal window
pnpm install ejs

Configuring the MVC Adapter

Section titled “Configuring the MVC Adapter”

DolphJS provides an MVCAdapter specifically to configure view engines without digging into the underlying Express instance manually.

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]);


  // Set the views directory
  MVCAdapter.setViewsDir(path.join(process.cwd(), 'views'));


  // Set the view engine to ejs
  MVCAdapter.setViewEngine('ejs');


  dolph.start();
}


bootstrap();

Creating the View

Section titled “Creating the View”

Create a views directory in your project root, and add an index.ejs file.

views/index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <h1><%= heading %></h1>
    <ul>
        <% for(let i=0; i<users.length; i++) { %>
            <li><%= users[i].name %></li>
        <% } %>
    </ul>
</body>
</html>

Rendering the View in a Controller

Section titled “Rendering the View in a Controller”

To render a view, use the @Render() decorator. Instead of using SuccessResponse to send JSON, you simply return an object from your method. The @Render decorator intercepts the returned object and passes it to the specified 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.ejs
  async getHomePage() {
    // The returned object is injected as variables into the EJS template
    return {
      title: 'DolphJS EJS App',
      heading: 'Welcome to SSR with DolphJS',
      users: [
        { name: 'Alice' },
        { name: 'Bob' }
      ]
    };
  }
}