Hapi.js+Vue.js Crear servidor backend

ByLuis

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

npm 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.

npm i @hapi/hapi
npm 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:

const 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:

npm i --save-dev nodemon

Y ejecutaremos lo siguiente para arrancar el servidor:

npm run start

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

Similar Posts

CodePress: resalta código mediante Javascript

ByLuis

CodePress permite resaltar el código de diversos lenguajes de programación en nuestras páginas web mediante Javascript. El código se puede modificar en tiempo real y permite entre otras el autocompletado de comillas, paréntesis y parecidos, la inclusión de trozos de código (por ejemplo los paréntesis y llaves en una sentencia if) y shortcuts (por ejemplo mostrar entidades html).
codepress.png
Los lenguajes que interpreta son PHP, Javascript, Java, Perl, SQL, HTML y CSS. Y existen fallos detectados son que los números no cambian de tamaño ya que son imágenes y que el copy/paste falla en algunas ocasiones en Internet Explorer.
CodePress
Vía / OpenSourceCommunity.org

Librería Javascript para crear un escritorio

ByLuis

Una buena librería Javascript para crear un entorno de escritorio en nuestra página web.
Permite crear ventanas, con sus opciones más comunes (maximizar, minimizar, mover, redimensionar, bloquear el tamaño, …). A parte una barra de tareas con las ventanas abiertas y un menú. Y por último la posibilidad de añadir iconos en el escritorio.
jsdesktop.png
Widget Environment
Vía / dzone

Usa jQuery para mostrar mensajes según origen de la visita

ByLuis

Curioso ejemplo para jQuery que permite personalizar mensajes en nuestra página según la página de origen (referrer). Es una buena opción si tienes tráfico originado por alguna página en particular y quieres agradecerles el que visiten tu página con un mensaje personalizado.

// URLs usando expresiones regulares que quieres que detecte
var msgs = [
// null url : tráfico directo
{'url':null, 'msg':'I am glad you remember my site URL, enjoy your stay'}
// Mi url!
,{'url':/^http:\/\/(\w+\.)?midominio\.com/,    'msg':null}
// Otras
,{'url':/^http:\/\/(\w+\.)?google\.com/,      'msg':'Welcome googler, Hope you will find what you looking for'}
,{'url':/^http:\/\/(\w+\.)?dzone\.com/,         'msg':'Welcome fellow dzone reader, if you like it please vote it up'}
,{'url':/^http:\/\/(\w+\.)?digg\.com/,         'msg':'Welcome digger, if you like it please digg it'}
,{'url':/^http:\/\/(\w+\.)?propeller\.com/,      'msg':'Welcome propeller user, hope you will like it here'}
//generic pattern: to show generic message for referrers that you did not specify one for
// URL genéricas
,{'url':/^http:\/\//,               'msg':'Hello their.. Hope you will find what you looking for'}
];
function DetectReferrer(){
var div = $('#WelcomePlaceHolder');
// Si no existe la capa no se muestra el mensaje
if (!div.length) return;
var ref = document.referrer.toLowerCase();
var msg = findMatch(ref);
// Si existe mensaje
if(msg) {
// Añade un botón para cerrar
div.html( '<a href="javascript:void(0)" class="CloseButton">X</a>' + msg).show('slow',function(){
$('.CloseButton',div).click(function(){ div.hide() })
});
}
}
function findMatch(ref) {
for(var i=0; i<msgs.length; i++)
if( ( ref=='' && msgs[i].url==null) || (ref>'' && ref.match(msgs[i].url) ) )
return msgs[i].msg;
return null;
}
// Llama al detector de referrers cuando se carga en DOM
$(DetectReferrer);

Se podría hacer algo parecido para el navegador del usuario, por si usa IE recomendarle que cambie a Firefox, Opera, Safari o Chrome.

jQuery Fun: Greeting Your Site Referrals

Vía / dzone

TJPzoom: zoom mediante Javascript

ByLuis

Un buen Javascript que permite añadir zoom a nuestras imágenes. El script añade una ventana con marco sombreado a la imagen en la que se ve el zoom, pudiendo moverla por toda la imagen.
jszoom.png
Si hacemos drag hacia arriba el zoom aumenta, hacia abajo disminuye, hacia la derecha la ventana aumenta y hacia la izquierda disminuye. Además permite utilizar otra imágen con mayor resolución para evitar el pixelado.
TJPzoom
Vía / WebAppers

DocumentFragments en Javascript

ByLuis

Nunca se para de aprender, y de John Resig menos. DocumentFragments son contenedores ligeros que pueden almacenar objetos DOM de Javascript. Yo ni había oído hablar de ellos y la verdad es que su uso es sencillo y mucho más potente que trabajar con el DOM normalmente (de 2 a 3 veces más rápido).

El ejemplo que muestra John lo dice todo y muy fácil. Primero creamos unos elementos para luego insertarlos (de forma normal y con DocumentFragments):

var elems = [
document.createElement("hr"),
text( document.createElement("b"), "Links:" ),
document.createTextNode(" "),
text( document.createElement("a"), "Link A" ),
document.createTextNode(" | "),
text( document.createElement("a"), "Link B" ),
document.createTextNode(" | "),
text( document.createElement("a"), "Link C" )
];
function text(node, txt){
node.appendChild( document.createTextNode(txt) );
return node;
}

Y luego la inserción normal:

var div = document.getElementsByTagName("div");

for ( var i = 0; i < div.length; i++ ) {
for ( var e = 0; e < elems.length; e++ ) {
div[i].appendChild( elems[e].cloneNode(true) );
}
}

Y por último el nuevo método:


var div = document.getElementsByTagName("div");

var fragment = document.createDocumentFragment();

for ( var e = 0; e < elems.length; e++ ) {
fragment.appendChild( elems[e] );
}
for ( var i = 0; i < div.length; i++ ) {
div[i].appendChild( fragment.cloneNode(true) );
}

Resumiendo, mucho más eficiente y sencillo de usar. Seguro que para la próxima versión de jQuery nos ofrece esta implementación.

2 Comments

  1. “Y ejecutaremos lo siguiente para arrancar el servidor:
    npm i –save-dev nodemon”
    ops… ese copy-paste te traicionó

Comments are closed.