ExpressoTS Render Engine

By coursity / July 23, 2024

Render Engine

ExpressoTS enhances the web server capabilities of Express.js by providing a streamlined experience for rendering views. ExpressoTS supports various render engines out-of-the-box, including EJS, PUG, and Handlebars (HBS). This makes it easy for developers to start rendering views without needing additional configuration, as default settings are provided for each supported engine.

Supported Render Engines

ExpressoTS supports the following render engines:

EJS
PUG
HBS (Handlebars)

Handlebars 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
};

Enter fullscreen mode
Exit fullscreen mode

Default Handlebars configuration options

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

Enter fullscreen mode
Exit fullscreen mode

Default Folder structure

Default folder structure for Handlebars:

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

Enter fullscreen mode
Exit fullscreen mode

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

Handlebars 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>

Enter fullscreen mode
Exit fullscreen mode

Other Engine Configuration Options

Pug Configuration Options

export type PugOptions = { viewEngine?: string; viewsDir?: string;
};

Enter fullscreen mode
Exit fullscreen mode

Default Pug configuration options

{ viewEngine: "pug", viewsDir: <root>/views,
}

Enter fullscreen mode
Exit fullscreen mode

EJS Configuration Options

export type EjsOptions = { viewsDir?: string; viewEngine?: string; serverOptions?: EjsOptionsServer;
};

Enter fullscreen mode
Exit fullscreen mode

Default EJS configuration options

{ viewEngine: "ejs", viewsDir: <root>/views,
 serverOptions: { cache: true, compileDebug: false, debug: false, delimiter: "%", strict: false, },
}

Enter fullscreen mode
Exit fullscreen mode

How to use

Here’s how you can set up ExpressoTS to use 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 {}
}

Enter fullscreen mode
Exit fullscreen mode

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:

this.setEngine<HBS>(Engine.HBS, { viewsDir: <<custom-path>> });

Enter fullscreen mode
Exit fullscreen mode

How To Render Views in ExpressoTS

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" });
}

Enter fullscreen mode
Exit fullscreen mode

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. 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() {}

Enter fullscreen mode
Exit fullscreen mode

Rendering passing only the view in the decorator

@Get("/")
@Render("index")
root() { return { date: new Date(), name: "Random information" };
}

Enter fullscreen mode
Exit fullscreen mode

Happy Coding! 🐎

Related

Discover more from Coursity

Subscribe to get the latest posts sent to your email.

Leave a Comment Cancel Reply