Skip to main content

Render engine

ExpressoTS enhances the web server capabilities of Express.js by providing a streamlined experience for rendering views. ExpressoTS supports 3 render engines out-of-the-box.

This makes it easy for developers to start rendering views without needing additional configuration, as default settings are provided for each supported engine.

Supported engines​

ExpressoTS supports the following render engines:

  • EJS
  • PUG
  • HBS (Handlebars)

Engine options​

Configuration options​

export type HandlebarsOptions = {
    viewEngine?: string; // The view engine to be used
    viewsDir?: string; // The path to the views folder
    partialsDir?: string; // The path to the partials folder
};

Default configuration values​

{
    viewEngine: "hbs",
    viewsDir: <root>/views,
    partialsDir: <root>/views/partials,
}

Default folder structure​

src
views
|--partials
|   |--partial.hbs
|--index.hbs

.hbs file example​

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>HBS Example</title>
    </head>
    <body>
        <h1>Hello from HBS</h1>
        <p>Render partial: {{> partial}}</p>
    </body>
</html>
note

All engines follow the same structure, with the exception of the partials folder, which is specific to Handlebars.

Setup a render engine​

Here's how you can set up a render engine like HBS (handlebars) in your application:

In the app.provider configuration provider, you can set the render engine:

export class App extends AppExpress {
    private middleware: IMiddleware;
    private provider: ProviderManager;

    constructor() {
        super();
        this.middleware = container.get<IMiddleware>(Middleware);
        this.provider = container.get(ProviderManager);
    }

    protected configureServices(): void {
        // Set the render engine to HBS
        this.setEngine(Engine.HBS);

        this.middleware.setErrorHandler();
    }

    protected async postServerInitialization(): Promise<void> {
        if (this.isDevelopment()) {
            this.provider.get(Env).checkAll();
        }
    }

    protected serverShutdown(): void {}
}

If you want to pass custom options to the render engine, you can do so by passing an object with the desired options to the setEngine method. For example, to set the views directory to a custom path, you can do the following:

Custom render engine configuration
this.setEngine<HBS>(Engine.HBS, { viewsDir: <<custom-option>> });

Render views​

To render a view in ExpressoTS, you can use the render method provided by the Response object. Here's an example of how you can render a view in ExpressoTS:

@Get("/")
root(@response() res: Response) {
    res.render("index", { date: new Date(), name: "Random information" });
}

In the example above, the render method is called on the Response object, passing the name of the view to be rendered and an object with data to be passed to the view. The view engine will render the view with the provided data and return the rendered HTML to the client.

Render decorator​

The @Render decorator can be used on controller methods to render views using the specified view engine. It's a syntactic sugar that simplifies the process of rendering views in ExpressoTS.

Here's an example of how you can use the @Render decorator to render a view in ExpressoTS:

Rendering passing the view and default data in the decorator
@Get("/")
@Render("index", { date: new Date(), name: "Random information" })
root() {}
Rendering passing only the view in the decorator
@Get("/")
@Render("index")
root() {
    return { date: new Date(), name: "Random information" };
}

Support us ❤️​

ExpressoTS is an MIT-licensed open source project. It's an independent project with ongoing development made possible thanks to your support. If you'd like to help, please read our support guide.