‘Bocadillos’ en tu web

Estoy aprendiendo Hapi.js y Vue.js y qué mejor que ir anotando aquí lo que voy aprendiendo, y si a alguien le sirve, mejor que mejor.

Pretendo crear una aplicación web e ir explicando en diferentes posts, que iré añadiendo aquí, lo que estoy aprendiendo.

He estado viendo distintos boilerplates y el que más me ha gustado ha sido appy. Podría usarlo, pero prefiero aprender poco a poco que pegarme con algo ya hecho e indagar qué hace cada cosa.

Lo que más me gusta de appy es que diferencia entre el backend y el frontend de forma bastante clara, distintos directorios y aplicaciones para cada cosa. Es por ello que voy a seguir esta estructura. Aquí hay un artículo bastante majo que explica más o menos lo mismo.

Pues nada más, iré subiendo posts sobre lo que voy aprendiendo. Eso sí, porfa, si meto la pata en algo, no me lo tengas muy en cuenta, estoy aprendiendo.

1. Hapi.js+Vue.js Crear servidor backend (código v0.1.0)
2. Reorganización de la configuración (código v0.2.0)
3. Empezar añadiendo routes (código v0.3.0)
4. Conectando a mongodb (código v0.4.0)
5. Modelos mejorados y controladores (código v0.5.0)
6. Inicializando el frontend (código v0.6.0)
7. Vue router y login form “tonto” (código v0.7.0)
8. Comunicación entre frontend y el servidor usando JWT (login) (código v0.8.0)
9. i18n (código v0.9.0)
10. Activación de usuario, recordar contraseña, … (código v0.10.0)
11. Roles (código v0.11.0)
12. Vuex y avatares (código v0.12.0)

El primer paso va a ser crear el entorno del servidor, para ello creamos un directorio e inicializamos el proyecto ejecutando:

Copiarnpm init

Rellenamos todos los datos que nos van pidiendo para configurar el proyecto.

Ya tenemos el proyecto creado, ahora iremos instalando las librerías que necesitamos, en este caso hapi y glue.

Copiarnpm i @hapi/hapi

Copiarnpm i @hapi/glue

¿Qué es glue? Glue es un plugin que permite configurar el servidor de forma fácil.

Ahora creamos el fichero index.js e insertamos el siguiente código:

Copiarconst Glue = require( '@hapi/glue' );

const manifest = {
	server: {
		port: 3001,
	},
};

const options = {
	relativeTo: __dirname,
};

const startServer = async function() {
	try {
		const server = await Glue.compose( manifest, options );
		await server.start();
		console.log( 'hapi days!' ); // eslint-disable-line
	} catch ( err ) {
		console.error( err ); // eslint-disable-line
		process.exit( 1 );
	}
};

startServer();

Fácil de entender, ¿no? Creamos el servidor usando Glue con el manifest y las opciones, y arrancamos el servidor.

Listo, accedemos a http://localhost:3001 para comprobar que funciona. Nos devolverá error 404 porque por ahora no hay definidas routes.

¿Cómo se arranca el servidor? podríamos usar directamente node, pero mejor usaremos nodemon. Primero lo instalamos:

Copiarnpm i --save-dev nodemon

Y ejecutaremos lo siguiente para arrancar el servidor:

Copiarnpm run start

Puedes obtener el código en GitHub hapi-vue-demo 0.1.0