diff --git a/src/content/docs/en/4x/guide/using-template-engines.mdx b/src/content/docs/en/4x/guide/using-template-engines.mdx index 18284a627d..d097a96420 100644 --- a/src/content/docs/en/4x/guide/using-template-engines.mdx +++ b/src/content/docs/en/4x/guide/using-template-engines.mdx @@ -1,6 +1,6 @@ --- title: Using template engines with Express -description: Discover how to integrate and use template engines like Pug, Handlebars, and EJS with Express.js to render dynamic HTML pages efficiently. +description: Discover how to integrate and use template engines like Pug, Handlebars-compatible engines, and EJS with Express.js to render dynamic HTML pages efficiently. --- import Alert from '@components/primitives/Alert/Alert.astro'; @@ -10,15 +10,15 @@ A _template engine_ enables you to use static template files in your application variables in a template file with actual values, and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page. -The [Express application generator](/starter/generator) uses [Pug](https://pugjs.org/api/getting-started.html) as its default, but it also supports [Handlebars](https://www.npmjs.com/package/handlebars), and [EJS](https://www.npmjs.com/package/ejs), among others. +The [Express application generator](/starter/generator) uses [Pug](https://pugjs.org/api/getting-started.html) as its default, but it can generate apps configured for Handlebars-compatible engines such as [hbs](https://www.npmjs.com/package/hbs), [EJS](https://www.npmjs.com/package/ejs), among others. -To render template files, set the following [application setting properties](/api/application/#appset), in the default `app.js` created by the generator: +For apps created by the generator, these settings are added to the generated `app.js`. For apps you create without the generator, set the following [application setting properties](/api/application/#appset) yourself: - `views`, the directory where the template files are located. Eg: `app.set('views', './views')`. This defaults to the `views` directory in the application root directory. - `view engine`, the template engine to use. For example, to use the Pug template engine: `app.set('view engine', 'pug')`. -Then install the corresponding template engine npm package; for example to install Pug: +Then install the corresponding Express-compatible template engine npm package; for example to install Pug: @@ -28,6 +28,7 @@ which `res.render()` calls to render the template code. Some template engines do not follow this convention. The [@ladjs/consolidate](https://www.npmjs.com/package/@ladjs/consolidate) library follows this convention by mapping all of the popular Node.js template engines, and therefore works seamlessly within Express. +For example, install [hbs](https://www.npmjs.com/package/hbs) or any other Express-compatible Handlebars view engine instead of the raw `handlebars` package by itself. diff --git a/src/content/docs/en/5x/guide/using-template-engines.mdx b/src/content/docs/en/5x/guide/using-template-engines.mdx index 18284a627d..d097a96420 100644 --- a/src/content/docs/en/5x/guide/using-template-engines.mdx +++ b/src/content/docs/en/5x/guide/using-template-engines.mdx @@ -1,6 +1,6 @@ --- title: Using template engines with Express -description: Discover how to integrate and use template engines like Pug, Handlebars, and EJS with Express.js to render dynamic HTML pages efficiently. +description: Discover how to integrate and use template engines like Pug, Handlebars-compatible engines, and EJS with Express.js to render dynamic HTML pages efficiently. --- import Alert from '@components/primitives/Alert/Alert.astro'; @@ -10,15 +10,15 @@ A _template engine_ enables you to use static template files in your application variables in a template file with actual values, and transforms the template into an HTML file sent to the client. This approach makes it easier to design an HTML page. -The [Express application generator](/starter/generator) uses [Pug](https://pugjs.org/api/getting-started.html) as its default, but it also supports [Handlebars](https://www.npmjs.com/package/handlebars), and [EJS](https://www.npmjs.com/package/ejs), among others. +The [Express application generator](/starter/generator) uses [Pug](https://pugjs.org/api/getting-started.html) as its default, but it can generate apps configured for Handlebars-compatible engines such as [hbs](https://www.npmjs.com/package/hbs), [EJS](https://www.npmjs.com/package/ejs), among others. -To render template files, set the following [application setting properties](/api/application/#appset), in the default `app.js` created by the generator: +For apps created by the generator, these settings are added to the generated `app.js`. For apps you create without the generator, set the following [application setting properties](/api/application/#appset) yourself: - `views`, the directory where the template files are located. Eg: `app.set('views', './views')`. This defaults to the `views` directory in the application root directory. - `view engine`, the template engine to use. For example, to use the Pug template engine: `app.set('view engine', 'pug')`. -Then install the corresponding template engine npm package; for example to install Pug: +Then install the corresponding Express-compatible template engine npm package; for example to install Pug: @@ -28,6 +28,7 @@ which `res.render()` calls to render the template code. Some template engines do not follow this convention. The [@ladjs/consolidate](https://www.npmjs.com/package/@ladjs/consolidate) library follows this convention by mapping all of the popular Node.js template engines, and therefore works seamlessly within Express. +For example, install [hbs](https://www.npmjs.com/package/hbs) or any other Express-compatible Handlebars view engine instead of the raw `handlebars` package by itself.