#01 Uso básico de Express framework

Esta serie de post, tienen relación con el post anterior real time apps con node.js el cual explica como realizar la instalación de los componentes necesarios para desarrollar una aplicación con node.js + mongoDB + socket.IO.
Pero en el camino me pareció mejor comenzar con algunas cosas básicas, y a partir de ellas ir sumando complejidad hasta lograr una aplicación (que todavía no tengo definida cual sera, se escuchan ideas) que haga uso de socket.IO para las interacciones en tiempo real.

Bueno, vamos a comenzar con una introducción muy básica a frameworks Express.
Este framework es muy utilizado y se combina a la perfección con socket.IO, es muy simple de utilizar y trae muchas cosas "out of the box" lista para utlizar.

Lo primero que vamos a hacer es crear el entorno donde desarrollaremos este demo, para ello creamos el directorio de la aplicación y dentro de el creamos la siguiente estructura de subdirectorios:

pepo@frank3:~$ mkdir 01-basic_express && cd 01-basic_express
pepo@frank3:~$ mkdir views
pepo@frank3:~$ mkdir node_modules
pepo@frank3:~$ mkdir -p public/img
pepo@frank3:~$ mkdir -p public/css
pepo@frank3:~$ mkdir -p public/js

Paso a explicar para que utilizares cada directorio:

views : Es el directorio donde alojaremos nuestros templates
node_modules : Donde se instalaran los módules que utilizaremos
public : Directorio de contenido, aquí alojaremos nuestros css, js, imagenes, etc.

Una vez creados los directorios, abrimos nuestro editor preferido para comenzar a desarrollar nuestra app.
El contenido de este simple ejemplo es:

/**
* Module dependencies.
*/

var express = require('express');
var app = module.exports = express.createServer();

// Configuration

app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.set('view options', {
layout: false                 
});   
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});

app.configure('development', function(){
app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});

// Routes

app.get('/',function(req,res){
res.render("index",{
title: "01 - basic express ",                         
banner: "Hello from template!"                        
});                                 
});

app.listen(3000);
console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);

Ahora vamos a ir analizando estas líneas:

var express = require('express');
var app = module.exports = express.createServer();

En estas dos líneas cargamos el módulo que necesitamos y llamamos a la función createServer que nos retorna un objeto con el servidor web que utilizaremos para escuchar las peticiones y responderlas.

Luego pasamos a la configuración del mismo, que son las siguientes líneas

// Configuration

app.configure(function(){
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.set('view options', {
layout: false                 
});   
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});

En ellas primero establecemos el directorio /views como repositorio de templates, para ello usamos una variable definida globalmente en tiempo de ejecució de node.js que es __dirname cuyo valor es un string con el path absoluto del directorio de nuestra app.
Luego establecemos a "ejs" como nuestro motor para renderizar los templates, para ello recordemos intalar el módulo vía npm (npm install ejs).
El último set es para establecer que no utilizaremos un archivo de layout para este ejemplo, si quiesieramos podríamos tener un archivo de base para todos nuestros templates o también para utilizar sólo para algunas páginas.

Luego declaramos los Middlewares que vamos a utilizar, el primero express.bodyParser() es utilizado para el parseo de los post (sean json o no) y nos devuelve el resultado del parsea accesible vía la variable req.body , el siguiente es express.methodOverride() que es importante que esté declarado después de express.bodyParser() ya que realiza una verificación sobre la variable req.body , este middleware es muy útil para sobreescribir los métodos de nuestros formularios, simplemente con un campo input con el atributo hidden, algo así:

<form action="/" method="post">
<input name="_method" type="hidden" value="put" />
<input name="user[name]" type="text" />
<input type="submit" value="Submit" />
&nbsp;&nbsp;&nbsp; </form>

Que nos permitirá acceder al post de la siguiente forma:

app.put('/', function(){
console.log(req.body.user);    
});

Luego declaramos el uso de app.router que es simplemente el middleware que contiene todas las rutas definidas, y realiza consulta de rutas basándose en la URL de la solicitud actual y el método HTTP.
Y por último declaramos el directorio desde donde proveemos nuestro contenido estático express.static(__dirname + '/public'), esto nos permite acceder a nustros recursos (dentro del directorio public) directamente referenciandolo como <link href="/css/style.css" rel="stylesheet" type="text/css"></link> , noten que no hace falta referenciar el directorio public sino que directamente hacemos referencia a los directorios dentro del mismo.

Bueno y con esto tenemos nuestra primera app utilizando node & Express, el código de este primer post se encuentra en Github Posts

Hasta la próxima!