Introducci贸n

1

Qu茅 necesitas para este curso y qu茅 aprender谩s sobre Node.js con Hapi

2

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

3

Breve historia y estado actual

Creando un sitio b谩sico con Hapi

4

El objeto h, response y sus herramientas

5

Uso de plugins - Contenido est谩tico

6

Plantillas con Handlebars

7

Renderizado de vistas - Layout y template del home

8

Recibiendo par谩metros en una ruta POST - Creaci贸n del registro

9

Definir una mejor estructura con buenas pr谩cticas en Hapi

10

Validando la informaci贸n - Implementando Joi

11

Introducci贸n a Firebase

12

Creando un modelo y guardando en firebase

13

Implementando el login y validaci贸n del usuario

14

Autenticaci贸n de usuarios - Cookies y estado

15

Manejando errores

16

Visualizaci贸n de errores

17

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

18

Repaso - Creaci贸n del modelo y controlador para preguntas

19

Repaso - Creaci贸n de las rutas para crear preguntas

20

Listar las 煤ltimas preguntas en el home

Aplicacion de conceptos avanzados

21

Enrutamiento avanzado - visualizando una pregunta

22

Enrutamiento avanzado - respondiendo una pregunta

23

Generando la l贸gica de la plantilla seg煤n si es creador o contribuidor

24

M茅todos de servidor - respuesta correcta

25

Usando m茅todos de servidor

26

Manejo del cach茅 - Agregando el home al cach茅

27

Procesamiento de archivos - Aceptando im谩genes

28

Logging con Good - Monitoreando el servidor

29

Creaci贸n de plugins - Teor铆a

30

Creaci贸n de plugins - Implementando un API REST

31

Estrateg铆as de autenticaci贸n - Asegurando el API REST

32

Seguridad b谩sica - Asegurando el servidor contra CSRF

33

Seguridad b谩sica - Asegurando el servidor contra XSS

Herramientas de desarrollo

34

Depuraci贸n del proyecto

35

Ecosistema de Hapi

Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Disfruta de nuestro contenido y eventos por un a帽o a un precio especial

Antes: $179

Currency
$149/a帽o
隆Suscr铆bete!

馃敟 Te quedan 馃敟

1D
8H
50M
5S

Renderizado de vistas - Layout y template del home

7/35
Recursos

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.

Aportes 12

Preguntas 0

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

En la configuraci贸n de Handlebars, la propiedad layoutPath estaba escrita como 鈥榲iew鈥 鈥 ya luego fue corregida como 鈥榲iews鈥, puesto que se refieren al mismo directorio indicado en path.

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();

En layout.hbs, como es que es {{{content}}} 鈥渃onecta鈥 por asi decirlo con index.hbs?

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')

Esta un poco jodido esto jaja

La variable 鈥榗ontent鈥 en donde la define para que se renderize

lo veo un poco enredado ,
炉\锛(銉)锛/炉

Ahora es:

npm i @hapi/vision
'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 () =>{
    server.route({
        method: 'GET',
        path: '/',
        handler: (req, h) => {
            return h.view('index', {
                title: 'home'
            })
        }
    })

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

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

const main = async () =>{
    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()

La manera actual de instalar vision

npm i @hapi/hapi

y si usas yarn

yarn add @hapi/hapi