Definir una mejor estructura con buenas prácticas en Hapi

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

Contenido del curso

Introducción

Creando un sitio básico con Hapi

Aplicacion de conceptos avanzados

Herramientas de desarrollo

Resumen

Con el fin de tener una mejor organización de los archivos de nuestro proyecto, y considerando que estamos trabajando con la arquitectura MVC, haremos una primera refactorización del código.

Creamos el directorio /controllers para colocar los controladores site y user de nuestro proyecto. Pasamos la definición de las rutas a su propio módulo routes.js como un arreglo que exportaremos más adelante. Distribuímos los handlers asociados a cada vista en la definición de las rutas hacia el archivo del controlador para cada contexto, ya sea site o user. Requerimos los controladores desde el módulo de rutas, y fnalmente importamos la definición de rutas desde el index.js y las asociamos al server con server.route(routes).

La raíz de la estructura general quedaría de momento: -/public -/controllers -/views -routers.js -index.js

Comentarios

Alexander Silvera

student•

Una consulta el module.exports no va al final del archivo??

Juan Castro

teacher•

No necesariamente, depende de tus gustos 😄…

En mi caso me gusta tenerlos tan arriba como pueda 😎

Adrian Estrada

teacher•

Gracias al hoisting de JavaScript puedes ponerlo donde quieras

Alejandro González Reyes

student•

Mi aporte en el código Archivo index.js

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

// Requerir archivo de rutas
const routes = require('./router')

// 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 plugins de hapi para servir archivos estaticos
    await server.register(inert)
    // Registrar plugin para gestionar el motor de plantillas
    await server.register(vision)

    // Configurar nuestro motor de plantillas.
    server.views({
      engines: {
        hbs: require('handlebars')
      },
      relativeTo: __dirname,
      path: 'views',
      layout: true,
      layoutPath: 'layouts'
    })

    // Registrar archivo de rutas en la aplicación
    server.route(routes)
    // 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();

Archivo router.js

// Requerir modulos de controlador de ruta
const siteController = require('./controllers/site')
const userController = require('./controllers/user')

// Declarar conjunto de rutas y asociar su respectivo controlador de ruta
const routes = [
  {
    method: 'GET',
    path: '/',
    handler: siteController.index
  },
  {
    method: 'GET',
    path: '/register',
    handler: userController.register
  },
  {
    method: 'POST',
    path: '/create-user',
    handler: userController.createUser
  },
  {
    // Ruta para servir archivos estáticos asociados (img/css/js)
    method: 'GET',
    path: '/{param*}',
    handler: {
      directory: {
        path: '.',
        redirectToSlash: true
      }
    }
  }
];

module.exports = routes

Archivo userController.js

// Definición de controladores de ruta

function register(req, h) {
  return h.view('register')
}

function createUser(req, h) {
  console.log(req.payload)
  return 'Usuario creado satisfactoriamente'
}

module.exports = {
  register,
  createUser
}

Archivo siteController.js

// Definición de controlaadores de ruta

function index(req, h) {
  return h.view('index', {
    title: 'Home'
  })
}

module.exports = {
  index
}

Juan Jose Vega

student•

Puedes compartir el github del proyecto Está muy bien documentado para estudiarlo

Jaime Navarro

student•

porque al darle click al boton de registarse no hace nada? solo me redirecciona a el # que tenia por defecto pero si le puse en la referencia el /register alguien save porque?

Alex Camacho

teacher•

Sería más fácil si nos compartes tu código, así podríamos ayudarte mejor a resolver dónde esta el detalle en el funcionamiento del código.

Nicolás Scandizzo

student•

fijate donde estas haciendo la referencia, acordate que tiene que ser en el archivo .hbs

Luis Gerardo López Hernández

student•

porque las exporta asi home:home y no simplemente home?

Erik Elyager

student•

Ambas son válidas, yo también prefiero la versión corta.

Nicolás Scandizzo

student•

porque podes exportar también cambiándole el nombre, en el caso del create user podría exportarla como create: createUser, de ahí en adelante cada vez que la utilices, seria como create y no createUser

Diego Reyes

student•

github del proyecto: https://github.com/platzi/hapi-overflow

Naldo Duran

student•

✌

Fernando Cordero

student•

'use strict'

// Requerir el modulo de hapi (Framework)
const Hapi = require('@hapi/hapi')
const handlerbars = require('handlebars') // para implementacion de plantillas
const inert = require('inert') // extiende los metodos disponible en el objeto h
const vision = require('@hapi/vision') //para implementar el uso de vistas. Hay que configurarlo por ser un plugin
const path = require('path') // nos permite definir una ubicación relativa para todos los routes de nuestro proyecto
const routes = require('./routes')

// 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 desde donde va acceder a las rutas. relaviteTo (routes.files)
    routes: {
        files: {
            relativeTo: path.join(__dirname, 'public')
        }
    } 
})

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

  // Arrancar el servidor de HapiJS, se considera una tarea asincrona.
    try {
        // registrando inert
        await server.register(inert)
        //registrando vision
        await server.register(vision)
        //configuracion de vision
        server.views({
            engines: {  //hapi puede usar diferentes engines
                hbs: handlerbars //asociamos el plugin al tipo de archivo
            },
            relativeTo: __dirname, //para que las vistas las busque fuera de /public
            path: 'views', //directorio done colocaremos las vistas dento de nuestro proyecto
            layout: true, //indica que usaremos layouts
            layoutPath: 'views' //ubicacion de layouts
        })
        server.route(routes)
        await server.start()
    } 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)
    }

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

// Inicializar el proyecto
init();

Francisco Garcia [C6]

student•

'use strict'

const Hapi = require('hapi')
const handlebars = require('handlebars')
const config = require('./config')
const inert = require('inert')
const path = require('path')
const routes = require('./routes')
const vision = require('vision')

const server = Hapi.server({
  port: config.port,
  host: config.host,
  routes: {
    files: {
      relativeTo: path.join(__dirname, 'public')
    }
  }
})

async function init () {
  try {
    await server.register(inert)
    await server.register(vision)

    server.views({
      engines: {
        hbs: handlebars
      },
      relativeTo: __dirname, 
      path: 'views',
      layout: true,
      layoutPath: 'views'
    })

    server.route(routes)

    await server.start()
  } catch (error) {
    console.error(error)
    process.exit(1)
  }

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

init()

Usuario anónimo

user•

👍👌

Gustavo César Ramírez Bautista

student•

¡Hola a todos!

Continuando un poco con el primer release que comparti con la inclusión de typescript, les comparto esta implementación con Pug como view engine. Cualquier feedbakc es bienvenida y PR abiertas

release-0,2,view-engine

hapi-repo

import Hapi from '@hapi/hapi';
import inert from '@hapi/inert';
import vision from '@hapi/vision';
import path from 'path';
import pug from 'pug';
import router from '../routes';

const port = process.env.PORT || 3000;
const host = process.env.HOST || 'localhost';
const routes: Hapi.RouteOptions = {
  files: {
    relativeTo: path.join(__dirname, '..', 'public'),
  },
};

const init = async () => {
  const server = Hapi.server({ port, host, routes });

  await server.register(inert);
  await server.register(vision);

  server.views({
    engines: { pug },
    relativeTo: path.join(__dirname, '..'),
    path: 'views',
  });

  server.route(router);

  await server.start();
  console.log(`Server online on port: ${server.info.port}`);
};

export { init };

Juan Sebastián Agudelo

student•


'use strict'

const Hapi = require('hapi')//framework
const handlerbars = require('handlebars')// motor de platillas
const inert =  require('inert')//plugin
const path = require('path')//modulo nativo de Node
const routes = require('./routes')
const vision = require('vision')// plugin para getionar el motor de plantillas

const server = Hapi.server({
    port: 3000,
    host: 'localhost',
    routes: {
        files:{
            //ponemos que para todas las rutas que este sera el directorio de staticos
            relativeTo: path.join(__dirname, 'public')
        }
    }
})

async function init () {
    try {
        //Le debemos indicar a hapi que usaremos este plugin, no basta con requerirlo
        await server.register(inert)
        await server.register(vision)
        server.views({
            // define que tipo de motor de platillas vamos a usar, vision soporta diferentes motores de platillas
            engines:{
                hbs: handlerbars
            },
            relativeTo: __dirname,
            path: 'views',
            layout: true,
            layoutPath: 'views'
        })
        server.route(routes)
        //arrancar el servidor de HapiJS se considera tarea asincrona
        await server.start()
    }
    catch (error) {
        console.error(error);
        process.exit(1)
        //Salir de Node con un codigo de errir (1), 0 es un codigo de exito
    }
    console.log(`Servidor lanzado en: ${server.info.uri}`);
}
//Inicializa el proyecto
init()

Jose Daniel Molina

student•

Ahora entiendo más el código del proyecto... Gracias MVC

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

// Requerir archivo de rutas
const routes = require('./router')

// 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 plugins de hapi para servir archivos estaticos
    await server.register(inert)
    // Registrar plugin para gestionar el motor de plantillas
    await server.register(vision)

    // Configurar nuestro motor de plantillas.
    server.views({
      engines: {
        hbs: require('handlebars')
      },
      relativeTo: __dirname,
      path: 'views',
      layout: true,
      layoutPath: 'layouts'
    })

    // Registrar archivo de rutas en la aplicación
    server.route(routes)
    // 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();

// Requerir modulos de controlador de ruta
const siteController = require('./controllers/site')
const userController = require('./controllers/user')

// Declarar conjunto de rutas y asociar su respectivo controlador de ruta
const routes = [
  {
    method: 'GET',
    path: '/',
    handler: siteController.index
  },
  {
    method: 'GET',
    path: '/register',
    handler: userController.register
  },
  {
    method: 'POST',
    path: '/create-user',
    handler: userController.createUser
  },
  {
    // Ruta para servir archivos estáticos asociados (img/css/js)
    method: 'GET',
    path: '/{param*}',
    handler: {
      directory: {
        path: '.',
        redirectToSlash: true
      }
    }
  }
];

module.exports = routes

// Definición de controladores de ruta

function register(req, h) {
  return h.view('register')
}

function createUser(req, h) {
  console.log(req.payload)
  return 'Usuario creado satisfactoriamente'
}

module.exports = {
  register,
  createUser
}

'use strict'

// Requerir el modulo de hapi (Framework)
const Hapi = require('@hapi/hapi')
const handlerbars = require('handlebars') // para implementacion de plantillas
const inert = require('inert') // extiende los metodos disponible en el objeto h
const vision = require('@hapi/vision') //para implementar el uso de vistas. Hay que configurarlo por ser un plugin
const path = require('path') // nos permite definir una ubicación relativa para todos los routes de nuestro proyecto
const routes = require('./routes')

// 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 desde donde va acceder a las rutas. relaviteTo (routes.files)
    routes: {
        files: {
            relativeTo: path.join(__dirname, 'public')
        }
    } 
})

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

  // Arrancar el servidor de HapiJS, se considera una tarea asincrona.
    try {
        // registrando inert
        await server.register(inert)
        //registrando vision
        await server.register(vision)
        //configuracion de vision
        server.views({
            engines: {  //hapi puede usar diferentes engines
                hbs: handlerbars //asociamos el plugin al tipo de archivo
            },
            relativeTo: __dirname, //para que las vistas las busque fuera de /public
            path: 'views', //directorio done colocaremos las vistas dento de nuestro proyecto
            layout: true, //indica que usaremos layouts
            layoutPath: 'views' //ubicacion de layouts
        })
        server.route(routes)
        await server.start()
    } 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)
    }

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

// Inicializar el proyecto
init();

'use strict'

const Hapi = require('hapi')
const handlebars = require('handlebars')
const config = require('./config')
const inert = require('inert')
const path = require('path')
const routes = require('./routes')
const vision = require('vision')

const server = Hapi.server({
  port: config.port,
  host: config.host,
  routes: {
    files: {
      relativeTo: path.join(__dirname, 'public')
    }
  }
})

async function init () {
  try {
    await server.register(inert)
    await server.register(vision)

    server.views({
      engines: {
        hbs: handlebars
      },
      relativeTo: __dirname, 
      path: 'views',
      layout: true,
      layoutPath: 'views'
    })

    server.route(routes)

    await server.start()
  } catch (error) {
    console.error(error)
    process.exit(1)
  }

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

init()

import Hapi from '@hapi/hapi';
import inert from '@hapi/inert';
import vision from '@hapi/vision';
import path from 'path';
import pug from 'pug';
import router from '../routes';

const port = process.env.PORT || 3000;
const host = process.env.HOST || 'localhost';
const routes: Hapi.RouteOptions = {
  files: {
    relativeTo: path.join(__dirname, '..', 'public'),
  },
};

const init = async () => {
  const server = Hapi.server({ port, host, routes });

  await server.register(inert);
  await server.register(vision);

  server.views({
    engines: { pug },
    relativeTo: path.join(__dirname, '..'),
    path: 'views',
  });

  server.route(router);

  await server.start();
  console.log(`Server online on port: ${server.info.port}`);
};

export { init };

'use strict'

const Hapi = require('hapi')//framework
const handlerbars = require('handlebars')// motor de platillas
const inert =  require('inert')//plugin
const path = require('path')//modulo nativo de Node
const routes = require('./routes')
const vision = require('vision')// plugin para getionar el motor de plantillas

const server = Hapi.server({
    port: 3000,
    host: 'localhost',
    routes: {
        files:{
            //ponemos que para todas las rutas que este sera el directorio de staticos
            relativeTo: path.join(__dirname, 'public')
        }
    }
})

async function init () {
    try {
        //Le debemos indicar a hapi que usaremos este plugin, no basta con requerirlo
        await server.register(inert)
        await server.register(vision)
        server.views({
            // define que tipo de motor de platillas vamos a usar, vision soporta diferentes motores de platillas
            engines:{
                hbs: handlerbars
            },
            relativeTo: __dirname,
            path: 'views',
            layout: true,
            layoutPath: 'views'
        })
        server.route(routes)
        //arrancar el servidor de HapiJS se considera tarea asincrona
        await server.start()
    }
    catch (error) {
        console.error(error);
        process.exit(1)
        //Salir de Node con un codigo de errir (1), 0 es un codigo de exito
    }
    console.log(`Servidor lanzado en: ${server.info.uri}`);
}
//Inicializa el proyecto
init()

Definir una mejor estructura con buenas prácticas en Hapi

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