Node.js / Aplicacion predeterminada de Express

Bienvenidos sean a este post, hoy continuaremos con lo iniciado en el post anterior.

Como citamos en el post anterior generamos nuestra primera aplicacion en blanco mediante Express, eso lo hicimos basicamente para familiriazarnos con todo lo que crea antes de comenzar con nuestra aplicacion en si, antes de comenzar con el analisis debemos mencionar que esta aplicacion al crearla usamos la opcion –view=hbs para que instale al template engine Handlebars.js.

Por lo general el template engine nos permite insertar datos dentro de paginas web generadas, a continuacion les dejo una URL con una lista de template engine para Express:

https://expressjs.com/en/resources/template-engines.html

Lo primero que notamos que los archivos de Javascript generados son modulos de CommonJS, si vamos al directorio views tendremos los siguientes archivos:

• error.hbs, este se encargara de mostrar los errores en la pagina
• layout.hbs, este sera el layout predeterminado
• index.hbs, esta sera la pagina que se mostra mediante este

Si se preguntan por la extension esta es por el template engine que lo maneja, tambien disponemos del directorio routes donde estara la configuracion de ruteo inicial a nuestras paginas, con estos archivos trabajaremos en otro post, otro directorio generado por Express es public el cual usaremos para enviar todo lo simple al navegador, en el tendremos tres directorios:

• images, para las imagenes
• javascripts, para los codigos de javascript
• stylesheets, en este iran los archivos css

Los dos primeros estan de manera predeterminado vacios, el ultimo contiene un archivo llamado style.css con una simple configuracion, antes de hablar del ultimo directorio mencionaremos que tenemos el archivo package.json para la configuracion de instalacion, como hablamos en otros posts, por ultimo tenemos el directorio bin.

Este directorio contiene el script www que hemos visto en el post anterior, y sera el encargado de iniciar al objeto HTTPServer y comienza a escuchar en el puerto TCP y llama al ultimo al arcihvo app.js del cual hablaremos a continuacion.

Veamos como es el codigo base creado por Express de app.js:

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var index = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

Si prestan atencion veran que no es mas que un modulo CommonJS que exporta los objetos de aplicacion generados por el modulo Express, y nuestra tarea en este archivo es configurar ese objeto de aplicacion pero entre ellos no se incluye iniciar al objeto HTTPServer, ahora pasemos a ver el script www pero antes veamos como es el codigo fuente:

#!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('fibonacci:server');
var http = require('http');

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

Este script comienza con esta linea:

#!/usr/bin/env node

Esta es una tecnica de Unix que nos permite asociar este archivo a un programa para ejecutarlo, y a su vez Express le concede permisos de ejecucion para ejecutarlo, es decir que este script se ejecutara mediante node.js, veamos del codigo anterior cuales son las encargadas de interactuar con app.js:

...
var app = require('../app');
var debug = require('debug')('fibonacci:server');
var http = require('http');
...
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
...
var server = http.createServer(app);
...
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
...

Primero llamara al script modulo anterior (app.js), establece un valor de puerto (port) para nuestro objeto HTTPServer y si lo observan este puede ser informada externamente o bien usar el predeterminado, 3000, si deseamos establecer otro puerto debemos hacerlo de la siguiente manera:

$ PORT=4242 DEBUG=fibonacci:* npm start

Este hara que nuestro servidor habilite este para que podamos conectarnos, con nuestro valor establecido, lo siguiente sera crear el servidor mediante el objeto de app que pasaremos como argumento a createserver, este metodo utiliza a requestListener y este utiliza a los objetos request y response como vimos en posts anteriores, con esto podemos decir que el objeto app trabaja de forma similar, y a este servidor lo iniciamos a traves de listen y despues tenemos dos escuchadores, el primero para cualquier error y el segundo estara escuchando y cada uno llamara a su respectiva funcion, de esto hablaremos mas adelante, con esto comentado volvamos a app.js.

Vamos a analizar estas lineas del archivo:

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

Esta es la configuracion de template engine y le dice cual usar desde el directorio views, en este caso a Handlebars, y todo esto lo hacemos mediante app.set para establecer sus propiedades, si quieren saber un poco mas les recomiendo investigar mas en la documentacion de la API para la version 4.x en la siguiente URL:

https://expressjs.com/en/4x/api.html

Lo siguiente es el uso de app.use mediante las siguientes lineas:

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/users', users);

En este caso el metodo use se encarga de montar los metodos middleware, siendo estos parte fundamental del Express y estos son ejecutados en el proceso del request, haciendo que todas las caracteristicas mencionadas se encuentren habilitadas en app.js pero sobre todo esto hablaremos en el proximo post, describamos algunas caracteristicas del bloque anterior:

• El registro (logging) se activo mediante el registrador morgan
• body-parser, maneja el analisis de los cuerpos de solicitudes HTTP
• cookie-parser, se usa para analizar las cookies de la pagina
• Se establece un archivo estatico para usarse en el directorio public
• Tenemos dos modulos de ruteo para direccionar de la forma correcta

Tomando el ultimo caso si nosotros quisieramos acceder al archivo style..css en el directorio public/stylesheet desde el navegador seria con la siguiente direccion:

http://host_name/stylesheet/style.css

Si bien en el post anterior mencionamos que este es una base para nuestra aplicacion pero siempre la podremos modificar a nuestra conveniencia, inclusive podemos cambiarlo de CommonJS a ES6 pero eso sera un tema que veremos mas adelante.

En resumen, hoy hemos visto como es nuestra aplicacion predeterminada creada por Express, el codigo que nos genera, hemos visto algunas nociones basicas asi como otro detalles, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.