Uso de motores de plantillas con Express

Un motor de plantillas te permite usar archivos de plantilla estáticos en tu aplicación. En tiempo de ejecución, el motor de plantillas reemplaza las variables en un archivo de plantilla con valores reales, y transforma la plantilla en un archivo HTML enviado al cliente. Este enfoque facilita el diseño de una página HTML.

El generador de aplicaciones Express usa Pug por defecto, pero también soporta Handlebars, y EJS, entre otros.

Para renderizar archivos de plantilla, establece las siguientes propiedades de configuración de la aplicación, en el archivo app.js por defecto creado por el generador:

views, el directorio donde se encuentran los archivos de plantilla. Ej: app.set('views', './views'). Por defecto es el directorio views en el directorio raíz de la aplicación.
view engine, el motor de plantillas a usar. Por ejemplo, para usar el motor de plantillas Pug: app.set('view engine', 'pug').

Luego instala el paquete npm del motor de plantillas correspondiente; por ejemplo para instalar Pug:

npm install pug --save

Precaución

Los motores de plantillas compatibles con Express como Pug exportan una función llamada __express(filePath, options, callback), que res.render() llama para renderizar el código de la plantilla.

Algunos motores de plantillas no siguen esta convención. La librería @ladjs/consolidate sigue esta convención mapeando todos los motores de plantillas populares de Node.js, y por lo tanto funciona sin problemas dentro de Express.

Una vez establecido el motor de plantillas, no tienes que especificar el motor ni cargar el módulo del motor de plantillas en tu aplicación; Express carga el módulo internamente, por ejemplo:

app.set('view engine', 'pug');

Luego, crea un archivo de plantilla Pug llamado index.pug en el directorio views, con el siguiente contenido:

html
  head
    title= title
  body
    h1= message

Crea una ruta para renderizar el archivo index.pug. Si la propiedad view engine no está establecida, debes especificar la extensión del archivo view. De lo contrario, puedes omitirla.

app.get('/', (req, res) => {
  res.render('index', { title: 'Hey', message: 'Hello there!' });
});

Cuando haces una solicitud a la página de inicio, el archivo index.pug se renderizará como HTML.

La caché del motor de plantillas no almacena en caché el contenido de la salida de la plantilla, solo la plantilla subyacente en sí. La vista se vuelve a renderizar con cada solicitud incluso cuando la caché está activada.