Usando Handlebars como template engine

Clase 9 de 43 • Curso de Express.js 2018

Contenido del curso

Bienvenida e introducción

Template Engines y archivos estáticos

Creando un API Restful

Conectando Express.js con servicios externos

Middlewares: En el medio del request

Autenticación en Express.js

Testing

Deployment

Tomar examen

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.

Obtén respuestas inmediatasProfundiza lo que acabas de ver

Comentarios

Hector Jose Flores Colmenarez

student•

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

Sebastián Pineda Duque

student•

¿A qué se refiere con wrapper?

Guillermo Rodas

teacher•

PinedaS, un wrapper, es como una envoltura. Imagina que tienes un codigo en jQuery y necesitas ejecutarlo en React, puedes hacer como una función intermedia que se encargue de comunicar jQuery con React.

Fernando Azuaje

student•

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>

Carlos Enrique Ramírez Flores

student•

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)

Daniel Julián Gómez Silva

student•

Sí, faltó especificar que había que instalar handlebars como dependencia tal cual se hizo en el ejercicio pasado con pug.

Alejandro González Reyes

student•

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

Jhonnattan Rivera

student•

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

Carlos Enrique Ramírez Flores

student•

Creo que todo tiene sus ventajas y desventajas. La principal ventaja de una dependencia, es facilitar y ahorrarte tiempo de desarrollo. Y bueno la desventaja seria que te consume mas recursos.

Ya es cuestion de hacer un analisis de tu proyecto y que tomes decisiones.

Kamerr Ezz

student•

y el express handlebars ?

Héctor Tello

student•

Basta con:

npm i -D consolidate

Wilson Castro Gil

student•

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

Carlos Enrique Ramírez Flores

student•

Creo que todo tiene sus ventajas y desventajas. La principal ventaja de una dependencia, es facilitar y ahorrarte tiempo de desarrollo. Y bueno la desventaja seria que te consume mas recursos.

Ya es cuestion de hacer un analisis de tu proyecto y que tomes decisiones.

Kevin Zavala

student•

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 :D

Freddy Córdova Arana

student•

Pasos muy sencillos, muchas gracias 😃

Tomas Goldenberg

student•

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

Diego Andres Cabrera Rojas

student•

esta es otra manera de crear templates que permitan tener logica de codigo y una plantilla , pug es uno y handlebars es otro, tu escoges cual quieres usar, hay otros apartes de esos dos.

juan david jaramillo zuñiga

student•

perfecto!

Usuario anónimo

user•

listo :)

Francisco Garcia [C6]

student•

Listo, listo

Znok Dieline

student•

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

Emmanuel Rodríguez

student•

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

jorge llanque

student•

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

Nicolás Scandizzo

student•

En el curso de hapi.js se usa 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)

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

Usando Handlebars como template engine

Bienvenida e introducción

¿Dónde aprender Express.js actualizado?

Lo que aprenderás sobre Express.js

¿Qué es express y para qué sirve?

Creando tu primer servidor

Express application generator

Template Engines y archivos estáticos

Qué es template engine y cómo crearlo

Implementando un template engine

Usando Pug como template engine