Model-View-Controller
DolphJs is built on Express so the same technique that is used for MVC pattern in Express is applied here too.
Let's take you through from the beginning:
$ dolph new <project name>
EJS implementation
Read more about Embedded-Javascript-engine (EJS) here
$ yarn add ejs
server.ts
import helmet from 'helmet';
import { DolphFactory, MVCAdapter } from '../../core';
import { UserComponent } from './user.component';
import path from 'node:path';
MVCAdapter.setViewEngine('ejs');
MVCAdapter.setStaticAssets(path.join(__dirname, 'public'));
MVCAdapter.setViewsDir(path.join(__dirname, 'views'));
const dolph = new DolphFactory([UserComponent]);
dolph.start();
components/user.component.ts
import { DolphControllerHandler } from '../../classes';
import {
DRequest,
DResponse,
Dolph,
} from '../../common';
import {
Get,
Render,
} from '../../decorators';
@Route('user')
export class NewController extends DolphControllerHandler<Dolph> {
constructor() {
super();
}
@Get('home')
@Render('home')
getHomePage(req: DRequest, res: DResponse) {
return { title: 'Home' };
}
}
views/partials/header.ejs
<header>
<h1>My MVC App With EJS</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
</header>
views/home.ejs
<%- include('partials/header') %>
<h1> <%=title %> Page</h1>
<p>Welcome to the home page!</p>
Project Structure
src
components
shared
server.ts
views
partials
header.ejs
home.ejs
public
Pug implementation
Read more about pug here
$ yarn add pug
server.ts
import helmet from 'helmet';
import { DolphFactory, MVCAdapter } from '../../core';
import { UserComponent } from './user.component';
import path from 'node:path';
MVCAdapter.setViewEngine('pug');
MVCAdapter.setStaticAssets(path.join(__dirname, 'public'));
MVCAdapter.setViewsDir(path.join(__dirname, 'views'));
const dolph = new DolphFactory([UserComponent]);
dolph.start();
components/user.component.ts
import { DolphControllerHandler } from '../../classes';
import {
DRequest,
DResponse,
Dolph,
} from '../../common';
import {
Get,
Render,
} from '../../decorators';
@Route('user')
export class NewController extends DolphControllerHandler<Dolph> {
constructor() {
super();
}
@Get('home')
@Render('home')
getHomePage(req: DRequest, res: DResponse) {
return { title: 'Home' };
}
}
views/partials/header.pug
header
h1 My MVC App With Pug
nav
a(href="/") Home
a(href="/about") About
views/home.pug
doctype html
html(lang="en")
head
title Home
body
include partials/header
h1 #{title} Page
p Welcome to the home page!
Project Structure
src
components
shared
server.ts
views
partials
header.pug
home.pug
public
Handlebars implementation
Read more about handlebars here
$ yarn add express-handlebars
server.ts
import helmet from 'helmet';
import { DolphFactory, MVCAdapter } from '../../core';
import { UserComponent } from './user.component';
import path from 'node:path';
MVCAdapter.setViewEngine('handlebars');
MVCAdapter.setStaticAssets(path.join(__dirname, 'public'));
MVCAdapter.setViewsDir(path.join(__dirname, 'views', 'layouts', 'main'));
const dolph = new DolphFactory([UserComponent]);
dolph.start();
components/user.component.ts
import { DolphControllerHandler } from '../../classes';
import {
DRequest,
DResponse,
Dolph,
} from '../../common';
import {
Get,
Render,
} from '../../decorators';
@Route('user')
export class NewController extends DolphControllerHandler<Dolph> {
constructor() {
super();
}
@Get('home')
@Render('home')
getHomePage(req: DRequest, res: DResponse) {
return { title: 'Home' };
}
}
views/layouts/main.handlebars
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{\{title}}</title>
</head>
<body>
{\{body}}
</body>
</html>
views/home.handlebars
<h1>Home Page</h1>
<p>Welcome to the {'{ title}} page!</p>
Project Structure
src
components
shared
server.ts
views
layouts
main.handlebars
home.handlebars
public