Renderizado de vistas - Layout y template del home

Clase 7 de 35 • Curso de Node.js con Hapi

Resumen

En Hapi podemos usar la arquitectura MVC (Modelo-Vista-Controlador) para organizar la lógica de nuestras aplicaciones. Para implementar el uso de vistas es necesario instalar el plugin Vision y configurarlo de la siguiente manera:

server.views({
  engines: { // --- hapi puede usar diferentes engines
    hbs: handlebars // --- asociamos el plugin al tipo de archivos  
  },
  relativeTo: __dirname, // --- para que las vistas las busque fuera de /public
  path: 'views', // --- directorio donde colocaremos las vistas dentro de nuestro proyecto
  layout: true, // --- indica que usaremos layouts 
  layoutPath: 'views' // --- ubicación de los layouts
})

Al crear el archivo layout.hbs evitaremos repetir las mismas secciones de html en cada una de las vistas, remplazando sólo lo relativo al contenido que cambiará según las rutas definidas en nuestra aplicación.

En la definición de las rutas, tendremos que cambiar la respuesta devuelta en handler para que invoque a h.view() en lugar de h.file(), con los parámetros esperados por el layout.

Para poder incorporar el html de las vistas dentro del layout.hbs, es necesario usar triples llaves en lugar de dobles, ya que por defecto Handlebars escapa el código html convirtiéndolo en su equivalente texto plano.

Fernando Cordero

student•

https://www.npmjs.com/package/@hapi/vision nuevo enlace en npm

Julio J Yépez

student•

En la configuración de Handlebars, la propiedad layoutPath estaba escrita como ‘view’ … ya luego fue corregida como ‘views’, puesto que se refieren al mismo directorio indicado en path.

Alejandro González Reyes

student•

Mi aporte en código

'use strict'

// Requerir el modulo de hapi (Framework)
const Hapi = require('@hapi/hapi')
// Requerir el plugin de hapi para servir archivos estaticos
const inert = require('@hapi/inert')
// Requerir el plugin de hapi para gestionar el motor de plantillas
const vision = require('@hapi/vision')
const path = require('path')

// Configurar el servidor de nuestra aplicación. En un contenedor (Docker) si marca error colocar 0.0.0.0 (todos)
const server = Hapi.server({
  port: process.env.PORT || 3000,
  host: 'localhost',
  // Definir propiedades generales para todas las rutas. (En este caso indico que las rutas que requieran archivos estáticos, se servirán desde la carpeta public)
  routes: {
    files: {
      relativeTo: path.join(__dirname, 'public')
    }
  }

})

// Definicion de función para inicializar el proyecto. Intenamnete hay tareas asincronas
async function init() {

  try {
    // Registrar los plugins que hapi va a necesitar (en este caso servir archivos estaticos)
    await server.register(inert)
    // Registrar plugin para gestionar el motor de plantillas
    await server.register(vision)

    // Configurar nuestro motor de plantillas. Usará handlebars y cuando invoquemos una vista automáticamente buscará una con extensión hbs (no hace falta especificarlo). Debe buscar a partir del directorio actual, las vistas se encuentran en views y se activa compatibilidad con layouts, los cuales se encuentran en layouts
    server.views({
      engines: {
        hbs: require('handlebars')
      },
      relativeTo: __dirname,
      path: 'views',
      layout: true,
      layoutPath: 'layouts'
    })

    // Definición de rutas (indicar el método HTTP, URL y controlador de ruta)
    // Se declaran después del plugin ya que las rutas hacen uso del misom para devolver archivos estáticos
    server.route({
      method: 'GET',
      path: '/',
      handler: (req, h) => {
        // El plugin de vision inyecta el metodo view al objeto h para renderizar una vista con el motor de plantillas configurado en la aplicación
        return h.view('index', {
          title: 'Home'
        })
      }
    })

    // Ruta para servir archivos estáticos asociados (img/css/js)
    server.route({
      method: 'GET',
      path: '/{param*}',
      handler: {
        directory: {
          path: '.',
          redirectToSlash: true
        }
      }
    })

    // Arrancar el servidor de Hapi
    await server.start()
    console.log(`Servidor lanzado en: ${server.info.uri}`)
  } catch (error) {
    console.error(error)
    // Salir de nodeJS con un código de error (1), 0 es un código de exito
    process.exit(1)
  }
}

// Inicializar el proyecto
init();

Armando Alamilla Cuellar

student•

No entendí muy bien la función que tiene layoutPath.
El profesor menciona que esta propiedad nos va a permitir poner los layouts junto con las vistas.
Pero no entiendo muy bien a qué se refiere. ¿alguien podría ayudarme?

Adrian Estrada

teacher•

Básicamente es una propiedad que permite definir donde vision va a buscar los archivos de layouts, para no tener una estructura más compleja lo definimos al mismo directorio donde están las visitas, pero digamos que es posible tener los layouts separados de las vistas en otro directorio y definir el path a ese directorio usando la propiedad layoutPath… si tienes más dudas me cuentas

Yoshua Diaz

student•

Hay un archivo que creo llamado layout.hbs(qué contiene todo el contenido común entodas las vistas) y otro llamado index.hbs(qué contiene información solo para el home), si vez el archivo index.hbs no hay nada que le diga que template usar como layout, entonces con las propiedades layout:true le dice que vamos a soportar layouts y con layoutPath le decimos donde esta el archivo que usaremos como layout, ya que sin eso verías el contenido del index.hbs sin la cabecera y las llamadas a los estilos y scripts, espero haberte podido ayudar 😃

Kevin Josué Calderón Peraza

student•

En layout.hbs, como es que es {{{content}}} “conecta” por asi decirlo con index.hbs?

Jecsham Castillo

student•

Eso es porque se definió como layout en la configuración. Cada vez que se renderice una view, tomará el layout como plantilla, y reemplazará {{{content}}} con la vista que toque.

Juan Manuel Oyarzún Gajardo

student•

Ojo con Hapi, ah movido todos sus plugins a otra ruta de instalación. Recomiendo revisar la documentación.

const hapi = require('@hapi/hapi')
const inert = require('@hapi/inert')
const vision = require('@hapi/vision')

Naldo Duran

student•

✌

Juan Sebastián Agudelo

student•

Esta un poco jodido esto jaja

Diego Tinitana

student•

La variable ‘content’ en donde la define para que se renderize

Francisco Garcia [C6]

student•

lo veo un poco enredado , ¯\＿(ツ)＿/¯

Juan Jose Vega

student•

Ahora es:

npm i @hapi/vision

Armando Rivera

student•

Ya volvió a cambiar, ahora es:

npm i vision

Juan Manuel Oyarzún Gajardo

student•

'use strict'
const hapi = require('@hapi/hapi')
const inert = require('@hapi/inert')
const vision = require('@hapi/vision')
const path = require('path')
const handlebars = require('handlebars')

const server = hapi.Server({
    port: process.env.PORT || 3000,
    host: 'localhost',
    routes: {
        files: {
            relativeTo: path.join(__dirname, 'public')
        }
    }
})

const initRoutes = async () =&gt;{
    server.route({
        method: 'GET',
        path: '/',
        handler: (req, h) =&gt; {
            return h.view('index', {
                title: 'home'
            })
        }
    })

    server.route({
        method: 'GET',
        path: '/{param*}',
        handler: {
            directory: {
                path: '.',
                index: ['index.html']
            }
        }
    })
}

const initViews = async ()=&gt;{
    server.views({
        engines: {
          hbs: handlebars
        },
        relativeTo: __dirname,
        path: 'views',
        layout: true,
        layoutPath: 'views'
    })
}

const main = async () =&gt;{
    try {
        await server.register(inert)
        await server.register(vision)
        await server.start()
        await initRoutes()
        await initViews()

    } catch {
        console.error(error)
        console.exit(1)
    }finally{
        console.log(`Servidor lanzado en ${server.info.uri}`)
    }
}

main()

Jorge Reyes

student•

La manera actual de instalar vision

npm i @hapi/hapi

y si usas yarn

yarn add @hapi/hapi

Renderizado de vistas - Layout y template del home

Introducción

Qué necesitas para este curso y qué aprenderás sobre Node.js con Hapi

Conceptos principales de hapi y creación de nuestro primer servidor

Breve historia y estado actual

Creando un sitio básico con Hapi

El objeto h, response y sus herramientas

Uso de plugins - Contenido estático

Plantillas con Handlebars

Renderizado de vistas - Layout y template del home

Recibiendo parámetros en una ruta POST - Creación del registro

Definir una mejor estructura con buenas prácticas en Hapi

Validando la información - Implementando Joi

Introducción a Firebase

Creando un modelo y guardando en firebase

Implementando el login y validación del usuario

Autenticación de usuarios - Cookies y estado

Manejando errores

Visualización de errores

Controlar el error 404 en inert y el error de validación

Repaso - Creación del modelo y controlador para preguntas

Repaso - Creación de las rutas para crear preguntas

Listar las últimas preguntas en el home

Aplicacion de conceptos avanzados

Enrutamiento avanzado - visualizando una pregunta

Enrutamiento avanzado - respondiendo una pregunta

Generando la lógica de la plantilla según si es creador o contribuidor

Métodos de servidor - respuesta correcta

Usando métodos de servidor

Manejo del caché - Agregando el home al caché

Procesamiento de archivos - Aceptando imágenes

Logging con Good - Monitoreando el servidor

Creación de plugins - Teoría

Creación de plugins - Implementando un API REST

Estrategías de autenticación - Asegurando el API REST

Seguridad básica - Asegurando el servidor contra CSRF

Seguridad básica - Asegurando el servidor contra XSS

Herramientas de desarrollo

Depuración del proyecto

Ecosistema de Hapi