# Templating
View is a decorator which can be used on a controller method (endpoint). This decorator will use the data returned by the method, and the configured view to create the response.

# Configuration
Ts.ED is using consolidate (opens new window) under the hood. The default template engine installed with Ts.ED is EJS (opens new window). If you want to use another engine, please refer to the engine documentation and consolidate (opens new window) to install the engine correctly.
import {Configuration} from "@tsed/common";
const rootDir = __dirname;
@Configuration({
rootDir,
viewsDir: `${rootDir}/views`,
views: {
root: `${rootDir}/views`,
viewEngine: "ejs",
extensions: { // optional
"ejs": "ejs",
"hbs": "handlebars"
},
options: {
ejs: {} // global options for ejs engine. See official engine documentation for more details.
}
}
})
class Server {
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# Options
export interface PlatformViewsSettings {
/**
* Views directory.
*/
root?: string;
/**
* Enable cache. Ts.ED enables cache in PRODUCTION profile by default.
*/
cache?: boolean;
/**
* Provide extensions mapping to match the expected engines.
*/
extensions?: Partial<PlatformViewsExtensionsTypes>;
/**
* Default view engine extension.
* Allow omitting extension when using View decorator or render method.
*/
viewEngine?: string;
/**
* Options mapping for each engine.
*/
options?: Partial<PlatformViewsEngineOptions>;
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# Usage
# Template Engine Instances
Template engines are exposed via the PlatformViews.consolidate.requires
object, but they are not instantiated until you've called the PlatformViews.consolidate[engine].render()
method. You can instantiate them manually beforehand if you want to add filters, globals, mixins, or other engine features.
Reference
import { Configuration } from "@tsed/common";
import nunjucks from "nunjucks";
const rootDir = Path.resolve(__dirname);
const nunjucksInstances = nunjucks.configure(`${rootDir}/views`);
nunjucksInstances.addFilter('foo', function () {
return 'bar';
});
@Configuration({
views: {
root: `${rootDir}/views`,
viewEngine: "nunjucks",
extensions: {
"njk": "nunjucks"
},
options: {
nunjucks: {
requires: nunjucksInstances
}
}
},
})
export default class ShopApp {}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# With decorator
Here is an example of a controller using the View decorator:
TIP
Like Express.js or Koa.js,
View
decorator uses express.response.locals
or koa.context.state
to populate data before
rendering the template. See Locals decorator usage for more information.
# With render method
It's also possible to render a view by injecting and using PlatformResponse instance.
# With PlatformViews
Ts.ED provides the
PlatformViews
service to render views. In fact,
View
decorator uses PlatformResponse.render()
method which itself uses the PlatformViews.render()
method.
It is useful if you want to render a template from a service.
import {Inject, Injectable, PlatformViews} from "@tsed/common";
@Injectable()
export class MyService {
@Inject()
platformViews: PlatformViews;
public async renderTemplate(data: any) {
const result = await this.platformViews.render("view.ejs", {
// some other options
// ...
...data
});
console.log(result);
return result;
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Caching
To enable caching, simply pass { cache: true }
to the
View
decorator.
All engines that consolidate.js implements I/O for, will cache the file contents, ideal for production environments.
import {Controller, Get, View} from "@tsed/common";
@Controller("/events")
export class EventCtrl {
@Get("/:id")
@View("event.ejs", {cache: true})
public get(): any {
return {startDate: new Date(), name: "MyEvent"};
}
}
2
3
4
5
6
7
8
9
10
TIP
Ts.ED enables cache by default in PRODUCTION
profile.
Last Updated: 3/4/2021, 6:16:12 PM
Other topics
- Session & cookies
- Passport.js
- TypeORM
- Mongoose
- GraphQL
- Socket.io
- Swagger
- AJV
- Multer
- Serve static files
- Templating
- Throw HTTP Exceptions
- Customize 404
- AWS
- Seq
- OIDC
- Stripe
- Controllers
- Providers
- Model
- JsonMapper
- Middlewares
- Pipes
- Interceptors
- Authentication
- Hooks
- Exceptions
- Hooks
- Response Filter
- Injection scopes
- Custom providers
- Custom endpoint decorator
- Testing