Node.js / Express

Bienvenidos sean a este post, hoy veremos el framework mas popular.

En el post anterior hablamos brevemente sobre el concepto de framework y los beneficios que nos provee para nuestras aplicaciones web, en ese post mencionamos los dos mas populares y hoy nos centraremos en uno de ellos, si bien Express tiene una estructura para nuestras aplicacicones esta no sera completamente estricta y podremos ajustarla a nuestra conveniencia.

Desde el libro donde extraje la informacion trabajaremos con la version 4.14 y no con la version 5, pero esto tambien porque esta version todavia esta en beta y no es una version estable al momento de crear este post, con esto comentado vamos a comenzar primero con la instalacion del express-generator, para ello les recomiendo crear un directorio con el nombre de fibonacci y desde este ejecuten el siguiente comando:

$ npm install express-generator@4.x

Este nos instalara el Express y lo hara de forma local pero si queremos podemos instalarlo de forma global solamente agregando la opcion –g, si bien en este post mencionamos que una instalacion global no era una buena practica pero con este programa pueden hacer una excepcion ya que lo usaremos en varios codigos, aunque en este caso particular lo haremos de forma local porque al final lo desinstalaremos, como vimos al momento de instalar paquetes estos se haran en el directorio node_modules/.bin y para ejecutarlo deberiamos hacerlo de la siguiente manera:

./node_modules/.bin/express

Pero en este post tambien explicamos como agregarlo en el path del sistema operativo para poder facilitarnos su llamado, sin necesidad de tener que citar todo el directorio, para verificar su instalacion podemos ejecutar el siguiente comando:

$ express --help

  Usage: express [options] [dir]

  Options:

    -h, --help           output usage information
        --version        output the version number
    -e, --ejs            add ejs engine support
        --pug            add pug engine support
        --hbs            add handlebars engine support
    -H, --hogan          add hogan.js engine support
    -v, --view <engine>  add view <engine> support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
    -c, --css <engine>   add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
        --git            add .gitignore
    -f, --force          force on non-empty directory

$

Como pueden ver ya lo tenemos disponible ahora vamos a crear nuestro proyecto, para ello usaremos el siguiente comando:

$ express --view=hbs --git .

Esto nos devolvera la siguient salida:

$ express --view=hbs --git .

   create : .
   create : ./package.json
   create : ./app.js
   create : ./.gitignore
   create : ./public
   create : ./public/javascripts
   create : ./public/images
   create : ./public/stylesheets
   create : ./public/stylesheets/style.css
   create : ./routes
   create : ./routes/index.js
   create : ./routes/users.js
   create : ./views
   create : ./views/index.hbs
   create : ./views/layout.hbs
   create : ./views/error.hbs
   create : ./bin
   create : ./bin/www

   install dependencies:
     $ cd . && npm install

   run the app:
     $ DEBUG=fibonacci:* npm start

$

Observen todo los que nos creo y las indicaciones al final, esto es asi cuando el directorio esta vacio pero si hubiera contenido en el mismo pregutara si deseamos continuar pero si optamos por si hara exactamente lo mismo, veamos los archivos y directorios generados por Express:

$ tree .
.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.hbs
    ├── index.hbs
    └── layout.hbs

7 directories, 9 files
$

Nota:
Les recomiendo que se instalen tree en caso de no tenerlo.

Nuestro siguiente paso sera desinstalar a Express y para ello debemos ejecutar el siguiente comando:

$ npm uninstall express-generator

Si bien esto no desinstalara el modulo express-generator porque seguira en el directorio pero no sera util aunque todavia pueden asignarlo a devDependencies para poder seguir accediendo pero en general no es necesario, ahora si queremos correrlo podemos hacerlo mediante npm start y esto gracias al siguiente tag que disponemos en package.json:

  "scripts": {
    "start": "node ./bin/www"
  },

Al invocarlo llamara a ese comando, www es creado por Express, si bien este coincide con un sub-comando de npm con este script se anulara y usara este, si seguimos el consejo del comienzo debemos correr primero este comando desde el directorio que creamos:

$ npm install

Este instalara todas las dependencias que esten registradas en package.json y lo siguiente sera ejecutar el siguiente comando:

$ DEBUG=fibonacci:* npm start

Esto es para iniciar nuestra aplicacion en una variable de entorno, si lo ejecutan quedara de la siguiente manera:

$ DEBUG=fibonacci:* npm start

> fibonacci@0.0.0 start
> node ./bin/www

  fibonacci:server Listening on port 3000 +0ms

Esto ejecutara un servidor web en el localhost, si lo abren desde un navegador se vera de la siguiente manera

Como pueden ver ya tenemos la base de nuestro codigo creada y esta funcional para en los proximos posts comenzaremos a crear nuestro codigo, pero antes de finalizar les dejo una modificacion mas en nuestro codigo actual es en la seccion scripts de package.json:

  "scripts": {
    "start": "DEBUG=fibonacci:* node ./bin/www"
  },

En este caso al ejecutar el servidor se lo pasamos directamente a la variable, es decir que ahora solamente debemos llamar a npm start y se encargara de hacer ambas tareas, con esto tenemos nuestra primera aplicacion creada con Express.

En resumen, hoy hemos visto a Express, que es, como se instala, como nos genera la estructura base de nuestra aplicacion, asi como tambien hemos visto como funciona en su forma mas basica, 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.