Usando Handlebars como template engine

8/42

Lectura

Usando Handlebars como template engine

Para poder hacer uso de Handlebars en nuestro proyecto de Express.js lo único que debemos hacer es instalar como dependencia la librería consolidate y registrarla como engine.

Tenienendo una aplicacion de Express.js basica:

const express = require("express");

const app = express();

app.get("/", function(req, res) {
  res.render("index", { hello: "hola", world: "mundo" });
});

const server = app.listen(3000, function() {
  console.log(`Listening http://localhost:${server.address().port}`);
});

Justo antes de las definiciones de rutas agregamos:

const engines = require('consolidate');

app.engine('hbs', engines.handlebars)

app.set('views', './views')
app.set('view engine', 'hbs')

De esta manera podemos crear un nuevo template llamado index.hbs en la carpeta views.

<h1>{{hello}} {{world}}h1>

Y eso es todo, ya podemos usar nuestros templates hecho con Handlebars.

Importante aclarar aquí que si usas consolidate debes instalar también el módulo nativo de handlebars para que funcione estos pasos, ya que consolidate es un wrapper.

npm i -S handlebars

Si quieren realizar el ejemplo de la clase anteriror usando handlebars, quedaria asi la vista de productos:

<ul>
    {{#each products}}
    <li>
    <strong>{{name}}</strong> 
    <p>{{price}}</p>
    </li>
    {{/each}}
</ul>
<p>Comprar</p>

me salia este error y lo arregle con la instalación **npm i --save handlebars **

Server en http://localhost:3003
Unhandled rejection Error: Cannot find module 'handlebars'
Require stack:
- /Applications/XAMPP/xamppfiles/htdocs/platzi master/express/primer-servidor/template-engine/node_modules/consolidate/lib/consolidate.js
- /Applications/XAMPP/xamppfiles/htdocs/platzi master/express/primer-servidor/template-engine/node_modules/consolidate/index.js
- /Applications/XAMPP/xamppfiles/htdocs/platzi master/express/primer-servidor/template-engine/index.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:794:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Module.require (internal/modules/cjs/loader.js:849:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at /Applications/XAMPP/xamppfiles/htdocs/platzi master/express/primer-servidor/template-engine/node_modules/consolidate/lib/consolidate.js:867:64
    at /Applications/XAMPP/xamppfiles/htdocs/platzi master/express/primer-servidor/template-engine/node_modules/consolidate/lib/consolidate.js:161:5
    at Promise._execute (/Applications/XAMPP/xamppfiles/htdocs/platzi master/express/primer-servidor/template-engine/node_modules/bluebird/js/release/debuggability.js:384:9)
    at Promise._resolveFromExecutor (/Applications/XAMPP/xamppfiles/htdocs/platzi master/express/primer-servidor/template-engine/node_modules/bluebird/js/release/promise.js:518:18)
    at new Promise (/Applications/XAMPP/xamppfiles/htdocs/platzi master/express/primer-servidor/template-engine/node_modules/bluebird/js/release/promise.js:103:10)
    at promisify (/Applications/XAMPP/xamppfiles/htdocs/platzi master/express/primer-servidor/template-engine/node_modules/consolidate/lib/consolidate.js:154:10)
    at Function.exports.handlebars.render (/Applications/XAMPP/xamppfiles/htdocs/platzi master/express/primer-servidor/template-engine/node_modules/consolidate/lib/consolidate.js:866:10)
    at /Applications/XAMPP/xamppfiles/htdocs/platzi master/express/primer-servidor/template-engine/node_modules/consolidate/lib/consolidate.js:181:27
    at /Applications/XAMPP/xamppfiles/htdocs/platzi master/express/primer-servidor/template-engine/node_modules/consolidate/lib/consolidate.js:101:5
    at FSReqCallback.readFileAfterClose [as oncomplete] (internal/fs/read_file_context.js:61:3)

En su momento había escuchado de la librería Consolidate.js y sus beneficios para usar un motor de plantillas diferentes en Express. Nunca me atreví a usarla, pero siguiendo este tutorial, otros en la red y sobre todo la explicación de como generar nuestro propio motor de plantillas para Express. Me ayudó mucho a comprender como trabaja esto dentro de la caja y he logrado hacer un ejemplo funcionando al 100%

const express = require('express')
const consolidate = require('consolidate')
// No es necesario requerirlo como un modulo en la aplicación, pero internamente Consolidate lo requiere para poder generar el envoltorio que dote de compatibilidad con express. Por tanto es necesario instalarlo como una dependencia del proyecto

// const handlebars = require('handlebars')
const path = require('path')

const app = express()

// Registrar el motor de plantillas Handlebars a través del Consolidate
// Consolidate dota de una API a nuestro motor de plantillas compatible con Express
app.engine('hbs', consolidate.handlebars)

// Registrar el directorio de vistas y la extensión de archivos que renderizará nuestro motor de plantillas
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'hbs')

app.get('/', function (req, res) {
  res.render('bienvenidos', {
    titulo: 'Motor de Plantillas Handlebars',
    contenido: 'Handlebars no viene por defecto como un motor de plantillas registrado en Express. En este sentido, es importante hacer uso de la librería consolidate que se encarga de servir como un wrapper ofreciendo la firma que express necesita para registrar un motor de plantillas.',
    notas: 'Es necesario instalar el modulo que contiene el core de handlebars. Para que consolidate internamente lo registre y se lo pase a Express para que pueda renderizar las vistas indicadas'
  })
})

const server = app.listen(8000, function () {
  console.log(`App en http://localhost:${server.address().port}`)
})

module.exports = server

la verdad no me gusta usar los generadores de plantillas porque usan muchos recursos del servidor, pero si que facilita el trabajo. yo me cierro solo envio y recepcion de JSON

y el express handlebars ?

  • dependencias para el proyecto. No queda muy pesado? A los recursos como les va?

Excelente, creo me gusta más handlebars que pug, pero ambos tienen su estilo y claro, hacen el código más legible. Por eso amo Node 😄

Pasos muy sencillos, muchas gracias 😃

esto es una ALTERNATIVA a pug no algo para agregarle no?

perfecto!

listo 😃

Listo, listo

¬¬ no quiso correr y tuve que instalar handlebars y jaló con el mismo script.

Handlebars, una forma de expresar el código que se fundamenta en el EXL (Expression Language).

que pena que en esta sección se hubiera elegido pug en vez de handlebars