Uso de plugins - Contenido estático

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

Resumen

Los plugins son módulos o archivos de Javascript creados generalmente por terceros, que le adicionan funcionalidades al framework base de Hapi.

Para implementar un plugin nuevo a nuestro proyecto, lo primero es importarlo en el index.js con la función requier() de NodeJS. Luego es necesario registrarlo con await server.register(plugin).

Por el momento, incluiremos en nuestro proyecto los plugins de Inert y Path

const inert = require('inert')
const path = require('path')

El plugin Inert extiende los métodos disponibles en el objeto h, y Path nos permite definir una ubicación relativa para todos los routes de nuestro proyecto, entre otras cosas.

Código: usando Inert para servir un directorio de archivos y
un index.html en el path ‘/’

Juan Reyes

student•

Este video tiene un audio algo bajo…

David Toca

student•

gracias por el reporte, lo vamos a revisar

Mateo Santiago Zapata Maldonado

student•

Normal.

Gerardo Cetzal Balam

student•

This package has been deprecated npm i inert

ahora es con npm i @hapi/inert

Armando Rivera

student•

Ya volvio a cambiar, ahora se instala como:

npm install inert

Y se exporta como

const inert = require('inert');

Rafael Livise Larico

student•

Si lo instalas solo con inert vas a tener una vulneravilidad con un paquete que utiliza, ammon-Denial of Service. Por eso mejor usa @hapi/inert

Rodolfo Ugalde Ochoa

student•

La forma de instalar hapi

npm install @hapi/hapi

Como tuve que instalar inert

npm i @hapi/inert

Y mi codigo

'use strict'

const Hapi = require('@hapi/hapi');
// SE IMPORTA EL PLUGING PARA SERVIR LOS ARCHIVOS ESTATICOS
// const inert = require('inert')
// SE IMPORTA path QUE PARTE DE NODE
const path = require('path')

// SE CREA EL SERVIDOR COMO OBJETO 
const server = Hapi.Server({
    // EL PUERTO SE ESTABLECE COMO PARAMETRO CON LA VARIALBLE DE ENTORNO PORT Y SI NO CON EL PUERTO 3000
    port: process.env.PORT || 3000,
    // CORRE EN EL LOCALHOST
    host: 'localhost',
    // SE DECLRAR LA VARIABLE/OBJETO PARA DECLRAR LA RUTA A LA CARPETA DE ARCHIVOS ESTATICOS
    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 PARA SERVIR ARCHIVOS ESTATICOS
        await server.register(require('@hapi/inert'));

        // DEFINICIÓN DE RUTAS SE INDICA EL MÉTODO HTTP, URL Y CONTROLADOR/handler DE RUTA
        // SE DECLARAN DESPUÉS DEL PLUGIN YA QUE LAS RUTAS HACEN USO DEL MISOM PARA DEVOLVER ARCHIVOS ESTATICOS
        server.route({
            method: 'GET',
            path: '/home',
            handler: (req, h) => {
                // POR EL INERT SE TIENEN ACCESO AL METODO h.file()
                return h.file('index.html')
            }
        })
        // RUTA PARA SERVIR ARCHIVOS ESTÁTICOS ASOCIADOS (IMG/CSS/JS)
        server.route({
            method: 'GET',
            path: '/{param*}',
            handler: {
                directory: {
                    path: '.',
                    index: ['index.html']
                }
            }
        })
        // ES EL METODO QUE INICIA EL SERVIDOR
        await server.start()
    } catch (error) {
        console.error(error)
        // SALIR DE NODEJS CON UN CÓDIGO DE ERROR (1), 0 ES UN CODIGO DE EXITO
        process.exit(1)
    }

    console.log(`Servidor lanzado en: ${server.info.uri}`)
}

// SE INICIALIZA EL PROCESO
init()

Fabián Antonio Salgado Sepúlveda

student•

Hapi se actualizó, inert ya es parte de Hapi. Se debe agregar npm i -S @hapi/inert

la constante es => const inert = require('@hapi/inert');

Juan Jose Vega

student•

A cambiado bastante todo, el código que a día de hoy me funciona

&quot;use strict&quot;;

const Hapi = require(&quot;@hapi/hapi&quot;);
const inert = require(&quot;@hapi/inert&quot;);
const path = require(&quot;path&quot;);

const server = new Hapi.server({
  port: 3000,
  host: &quot;localhost&quot;,
  routes: {
    files: {
      relativeTo: path.join(__dirname, &quot;public&quot;),
    },
  },
});

const provision = async () =&gt; {
  try {
    await server.register(inert);

    server.route({
      method: &quot;GET&quot;,
      path: &quot;/home&quot;,
      handler: (request, h) =&gt; {
        return h.file(&quot;index.html&quot;);
      },
    });

    server.route({
      method: &quot;GET&quot;,
      path: &quot;/{param*}&quot;,
      handler: {
        directory: {
          path: &quot;.&quot;,
          redirectToSlash: true,
          index: true,
        },
      },
    });

    await server.register(inert);
    await server.start();
  } catch (error) {
    process.on(&quot;unhandledRejection&quot;, (err) =&gt; {
      console.log(err);
      process.exit(1);
    });
  }
  console.log(&quot;Server running on %s&quot;, server.info.uri);
};

provision();

Alejandro González Reyes

student•

Mi aporte en el 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('inert')
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)

    // 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: '/home',
      handler: (req, h) => {
        // El plugin de inert inyecta el metodo file en el objeto h para servir un archivo estático
        return h.file('index.html').code(200)
      }
    })

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

Alejandro González Reyes

student•

Es importante mencionar que path es un módulo nativo de NodeJS, no es un plugin.

Juan Manuel Oyarzún Gajardo

student•

Me percate que el código del curso con respecto a Hapi ha cambiado bastante. Les comparto el código funcional.

'use strict'
const hapi = require('hapi')
const inert = require('inert')
const path = require('path')

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: '/home',
        handler: (req, h) =&gt; {
            return h.file('index.html')
        }
    })

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

const main = async () =&gt;{
    try {
        await server.register(inert)
        await server.start()
        await initRoutes()
        
    } catch {
        console.error(error)
        console.exit(1)
    }finally{
        console.log(`Servidor lanzado en ${server.info.uri}`)
    }
}

main()

Stephany Catherin Sandoval Castro

student•

No se ningun paquete de hapi/hapi, ni hapi/inert funciona, no seguire más este curso, realmente frustrante.

Armando Rivera

student•

En la documentación viene como instalarlo y como importarlo. Actualmente la importación e instalación es como se muestra en la clase pero hace unos meses era distinto

Alejandro González Reyes

student•

Mi aporte en el 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('inert')
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)

    // 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: '/home',
      handler: (req, h) => {
        // El plugin de inert inyecta el metodo file en el objeto h para servir un archivo estático
        return h.file('index.html').code(200)
      }
    })

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

Alejandro González Reyes

student•

Porque se organizó la ubicación de las rutas después del registro del plugin?

Francisco Javier Rios Cruz

student•

After registration, this plugin adds a new method to the toolkit object and exposes the 'file' and 'directory' route handlers.

https://www.npmjs.com/package/inert#static-file-server

Después del registro, este complemento agrega un nuevo método al objeto del kit de herramientas y expone los controladores de ruta de 'archivo' y 'directorio'.

saludos

Naldo Duran

student•

✌

Luis Fernando Farji

student•

En archivos y enlaces falta registrar inert

Byron José

student•

Cúal es la extensión de VSC para visualizar el tamaño de los archivos importados?

Carlos Sampol

Team Platzi•

Puedes usar ImportCost para esto :)

Francisco Garcia [C6]

student•

¯\＿(ツ)＿/¯

Luis Ruiz Ramos

student•

cool

Jaime Navarro

student•

El audio esta muy bajo

Ramdhei López Arcila

student•

Osea que inert es a hapi lo que multer es a express?

Gustavo César Ramírez Bautista

student•

¡Hola a todos!

Como han notado la implementación de este curso ha quedado resagada en el versionamiento de paquetes, les comparto que estoy dejando mi boilerplate hasta este punto utilizando typescript y eslint (sintaxis de es6 y sirviendo archivos estáticos desde carpeta public), cualquier feedback es bienvenida.

pre-release-1.zip

y PR abiertos en el repo: hapi repo

Jorge Méndez Ortega

student•

mmm, creo que express si está comiendo le mercado a hapi

Uso de plugins - Contenido estático

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