Tutorial node.js + express + jquery (I): Creando la aplicación

3 noviembre 2011 | Juan María Hernández | , , , ,

Actualización (octubre 2015): Este tutorial está actualizado a la versión de express 3.0.0rc3. Si intentas seguirlo con versiones anteriores o posteriores, puede que tengas que ajustar algunas cosas. Para tener información detallada sobre versiones actualizadas de node.js y express, te recomiendo que le eches un vistazo a Express in Action: Node applications with Express and its companion tools, donde se explica de una forma bastante amena cómo crear aplicaciones web usando Node.js y Express.

He decidido hacer un pequeño tutorial sobre cómo montar una aplicación con node.js usando Express como web framework y jQuery en el lado cliente para realizar peticiones AJAX. Al principio iba a escribir un único post, pero estaba quedando demasiado largo, por lo que he decidido partirlo en varios:

Mi objetivo con este tutorial es poner en claro lo que he aprendido últimamente y ayudar un poco a aquellos que, como yo, estén empezando con esto. Tened en cuenta que esto es sólo un ejemplo sencillo de cómo enganchar distintas liberías para hacer una aplicación, pero no pretende ser ningún momento un catálogo de buenas prácticas. Habrá muchas cosas que se queden en el aire y muchos puntos que puedan ser mejorados, pero lo que intentaré es que lo que hagamos sirva como toma de contacto para luego poder preocuparnos por el resto y conseguir sobrevivir al cambiante mundo de javascript.

Camiseta I Survived Javascript
Camiseta original de Koalite’s Kipple

Instalando lo que necesitamos

Lo primero es instalar node.js, pero supongo que si estás leyendo esto problablemente ya lo tengas instalado. Gracias a npm, el gestor de paquetes de node.js, la instalación del resto de cosas resulta bastante sencilla:

Una vez que tengamos creada una carpeta para nuestra aplicación, deberemos entrar en ella y ejecutar los siguientes comandos:

npm install express
npm install jade
npm install underscore
npm install nodemon -g

Con esto, habremos instalado los siguientes paquetes:

  • express: Express es un framework para desarrollar aplicaciones web sobre node.js. Está inspirado en Sinatra y además de ser muy fácil de manejar, es bastante potente. Para los que venimos de .net, sería el equivalente a instalarnos ASP.NET MVC3 (realmente más bien sería como instalar Nancy, pero poca gente conoce ese framework).
  • jade: Jade es un motor de plantillas que permite generar html con una sintaxis compacta. Está basado en haml. En terminología .net, esto será el View Engine de nuestra aplicación; vamos, el equivalente a Razor.
  • underscore: Underscore es una librería con utilidades para javascript que ayuda bastante a la hora de realizar programación funcional. No es vital para el ejemplo, pero permite usar construcciones al estilo LINQ y me resulta cómodo contar con ellas.
  • nodemon: nodemon no es una librería, sino una herramienta. Se encarga de monitorizar el código de la aplicación y, si cambia, reiniciar node.js. Así nos evitamos tener que estar continuamente tecleando Ctrl+C, node app.js cada vez que cambiamos algo. Por comodidad la hemos instalado de forma global, pasando el parámetro -g a npm para que esté accesible en el path.

Creando el esqueleto de la aplicación

Ahora que tenemos instalado todo lo que necesitamos (de momento), podemos crear el esqueleto de nuestra aplicación. Podríamos montarlo «a mano», pero Express incluye una pequeña herramienta que nos ayuda a hacer la configuración inicial. Desde la raíz de la aplicación ejecutaremos:

./node_modules/express/bin/express
destination is not empty, continue? y

   create : .
   create : ./package.json
   create : ./app.js
   create : ./public
   create : ./public/javascripts
   create : ./public/stylesheets
   create : ./public/stylesheets/style.css
   create : ./public/images
   create : ./routes
   create : ./routes/index.js
   create : ./views
   create : ./views/layout.jade
   create : ./views/index.jade

   install dependencies:
       $ cd . && npm install
   run the app:
       $ node app

Esto creará los ficheros que indica arriba con una aplicación lista para funcionar. Por seguir con mi comparativa para la gente de .net, esto es el equivalente a hacer File -> New Project -> ASPNET MVC en el Visual Studio. Aunque nos avisa de que hagamos un npm install para instalar las dependencias, en nuestro caso no es necesario porque ya las hemos instalado antes.

Ahora mismo podríamos ejecutar ya nuestra aplicación con nodemon app.js y acceder a ella en la dirección http://localhost:3000.

Como ya he dicho en otras ocasiones, creo que es importante entender lo que uno está haciendo, así que vamos a ver qué cosas nos ha generado express. Empecemos analizando el fichero app.js.

var express = require('express')
  , routes = require('./routes')
  , http = require('http')
  , path = require('path');

var app = express();

En esta parte, se están definiendo los módulos que necesitamos, en este caso express, routes, http y path. El caso de routes es un poco especial, porque lo que estamos referenciando es una carpeta. Cuando referenciamos una carpeta, se busca el fichero index.js y se carga. Si no se encuentra, se genera un error. Una vez que tenemos cargados los módulos, creamos un servidor de express invocando la función que exporta el módulo express.

A continuación viene la parte de configuración del servidor:

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(path.join(__dirname, 'public')));
});

app.configure('development', function(){
  app.use(express.errorHandler());
});

Este fragmento de código se encarga de establecer la configuración de nuestra aplicación. A la hora de configurar una aplicación express podemos jugar con dos tipos de cosas:

  • Settings, que son parámetros de configuración y se establecen con el método app.set(settingName, value). En este caso estamos indicando que las vistas se almacenan en la carpeta ./views y que el formato es jade.
  • Middlewares, que son «módulos» que podemos añadir a nuestra aplicación para dotarla de más funcionalidad. Para añadirlos se usa el método app.use(middleware). En este caso están añadidos:
    • bodyParser: facilita el acceso al cuerpo de las peticiones (requests), tanto si son posts de formularios, como si son json. Con este middleware, podemos escribir cosas como request.body.personName.
    • methodOverride: permite utilizar <input type="hidden"> para modificar el método HTTP de la petición. De momento esto no lo vamos a utilizar mucho.
    • router: se encarga de gestionar las rutas. Remotamente parecido al routing de ASP.NET.
    • static: este middleware permite servir contenido estático, por ejemplo, hojas de estilo, imágenes, scripts de cliente, etc. En este caso le estamos diciendo que todo lo que esté en la carpeta ./public se sirva como contenido estático.

Por último, se está definiendo configuración personalizada para dos entornos, developmenty production. Para activar un entorno u otro se puede usar la variable de entorno $NODE_ENV, por ejemplo $ NODE_ENV=production node app.js.

Las últimas líneas del fichero están dedicadas a la creación de rutas y al arranque del servidor:

app.get('/', routes.index);

http.createServer(app).listen(app.get('port'), function(){
  console.log("Express server listening on port " + app.get('port'));
});

Este es un punto importante porque vemos cómo se configura lo que sería el equivalente a los controllers de ASPNET MVC. Lo que hacemos es asignar a cada ruta una función que se encargará de gestionarla. En este caso, con app.get('/', routes.index) estamos configurando que, cuando se acceda a la raíz de la aplicación, se ejecute el método index definido en el objeto routes, que, si recordáis, habíamos importado al principio del archivo.

Próximamente…

Con esto hemos analizado la estructura de la aplicación. En el próximo post de esta serie veremos cómo se crean las vistas utilizando jade y cómo se añade la lógica para generar esas vistas (lo que serían los action methods en una aplicación ASPNET MVC).

Siguiente capítulo: crear vistas con Jade.

36 comentarios en “Tutorial node.js + express + jquery (I): Creando la aplicación”

  1. abraham dijo:

    Me intereso mucho tutorial, ya que apenas estoy intentado hacer aplicaciones más complejas con nodejs, integrando el patron mvc, gracias y espero en su momento aportar algo al blog.

  3. Pingback: Tutorial node.js + express + jquery (II): Generando vistas con Jade « Koalite's blog

  4. Pingback: Tutorial node.js + express + jquery (III): Usando jQuery « Koalite's blog

  5. Pingback: Más sobre el tutorial node.js + express + jquery « Koalite's blog

  6. Pingback: Express – El framework web para #nodejs | Node.js Hispano

  7. Pingback: Tutorial node.js + express + jquery (I): Creando la aplicación « Koalite's blog | javascript.js | Scoop.it

  8. Pingback: Links interesantes semana: (1) Codigo-Source

  9. Toni M.L. dijo:

    Una pregunta que no me queda nada clara, si yo genero el esqueleto de la app con Express en un directorio cualquiera y me pone eso de var express = require(‘express’) en el app.js : Donde va a buscar exactamente el modulo «Express»? por que a mi me da error de que no encuentra dicho modulo…

  10. Toni M.L. dijo:

    Me contesto a mi mismo: la carpeta de modulos tiene que estar en el directorio de la aplicacion, por eso Express dice que hagas eso de npm install, para bajarse las dependencias, esto hay que hacerlo para cada proyecto que creemos y no unas sola vez como yo pensaba.
    En el ejemplo no queda claro por que el autor esta metiendo node, modulos y aplicacion todo en el mismo directorio y por eso a el le funciona.

    Gracias de todos modos y muy buen tutorial para despertar el gusanillo con esto de NodeJs, muchas gracias por el esfuerzo y enhorabuena por el blog, se ha convertido en una referencia para mi, siendo desarrollador de .net como soy.

    Un saludo

  11. Juanma dijo:

    Hola Toni,

    No me has dado ni tiempo a contestarte :-)

    Tu explicación es correcta, cuando instalas paquetes con npm puedes elegir si es una instalación local o global. Si es local, sólo afecta a la carpeta donde se ha instalado. En el tutorial todo se instala de forma global, excepto nodemon.

    Para instalarlo globalmente, puedes usar el parámetro -g, como en npm install nodemon -g y el módulo quedará disponible para todas las aplicaciones.

    Lo que no sé es cómo afectará a las instalaciones globales el tema de versiones. Es decir, no sé si puedes tener instaladas las versiones A, B, y C de express, cada una con sus dependencias, o si la última sobreescribe a las anteriores.

    Un saludo,

    Juanma.

  12. Ricky dijo:

    Hola, hago lo que dices al principio y no me funciona. Para ser mas exacto cuando quiero «crear el esqueleto de la aplicacion» ejecuto la linea: ./node_modules/express/bin/express -t jade pero mi consola me dice (ubuntu) «bash: ./node_modules/express/bin/express: No existe el archivo o el directorio» porque puede darse ese caso????

  13. Juanma dijo:

    Hola Ricky,

    Tienes que instalar express ejecutando npm install express en la carpeta en la que vas a crear la aplicación. ¿Lo has hecho así? Si es así debería aparecer cuando ejecutas ls ./node_modules.

    Un saludo,

    Juanma.

  14. Ricky dijo:

    Hola Juanma, gracias por tu respuesta.
    Hice lo que está en el tutorial, te escribo los pasos que realizé (quizás me equivoqué en algo ya que soy nuevo en ubuntu);
    1. creé la carpeta de mi aplicacion con mkdir carpeta
    2. ejecuté los siguientes comandos precedidos de «sudo»
    – npm install express
    – npm install jade
    – npm install underscore
    – npm install nodemon -g
    3. Hice ls en la carpeta de mi aplicacion y aparece vacía,,,,

    Qué me falta o que estoy haciendo mal?

  15. Ricky dijo:

    Otra cosa, antes de encontrar este post tuyo, yo ya habia instalado express de modo global… mira, cuando voy a mi carpeta raiz /home/ricky y ejecuto la orden que me acabas de dar: ls ./node_modules ahi si me muestra la siguiente estructura:
    express
    jade
    mysql
    socket.io
    stylus
    underscore

    Si puedes echarme un cable te lo agradecería mucho. Saludos a todos.

  16. Juanma dijo:

    Ricky, si tienes los módulos instalados globalmente, no tienes que indicar la ruta al ejecutarlos porque deberían estar en el path. Por ejemplo, en lugar de poner:

    ./node_modules/express/bin/express -t jade

    Deberías poner:

    express -t jade

    De todas formas, me da la impresión de que estás ejecutando los comandos fuera de la carpeta de la aplicación. La secuencia de comandos debería ser algo así como:

    mkdir myapp
    cd myapp
    npm install express
    npm install lo-que-sea
    ./node_modules/express/bin/express -t jade

    Fíjate que tanto los npm install como el ./node_modules/express/bin/express se ejecutan en la carpeta que va a contener la aplicación.

    Un saludo,

    Juanma.

  17. Ricky dijo:

    Hola Juanma, gracias por tu respuesta, en realidad si, estoy dentro de la carpeta de aplicacion…. la verdad no se que pasa con mi express ya que cuando quiero ejecutar la orden que me mencionas, me dice que no se reconoce la opción -t … me he metido a la documentacion de Express y no he podido encontrar nada, busque en google y nada… la verdad no tengo idea que puede estar sucediendo

  18. Juanma dijo:

    Ops, la opción «-t» ya no existe en las versiones nuevas de express. He actualizado el artículo para evitar la confusión.

    Antes, esa opción indicaba el ViewEngine a utilizar, que por defecto es jade, por lo que realmente no es necesaria.

  20. ru dijo:

    Creo que hay una pequeña errata: has puesto npn en lugar de npm.

    Deberías cambiar:
    npn install express
    npn install jade
    npm install underscore
    npn install nodemon -g

    por

    npm install express
    npm install jade
    npm install underscore
    npm install nodemon -g

  22. Pingback: Tutorial node.js + express + jquery (I) | Nodejs-code | Scoop.it

  23. Angeles dijo:

    Hola, tengo un problema con nodemon, estoy trabajando con webmatrix 2 y por este medio he creado un sitio express, luego instalé nodemon por consola como haces tu:

    npm install nodemon -g

    y al hacer cambios en mi aplicación no se reinicia el servidor y no se ven los cambios que realizo en mi página. Es el webmatrix que de alguna manera impide su ejecución o que es?

  24. Juanma dijo:

    No he usado webmatrix, pero no creo que impida la ejecución de nodemon. ¿Lo estás ejecutando en la ruta adecuada, es decir, en la raíz de tu sitio web?

  26. Luis Arias dijo:

    Wow que claro esta el tuto, ni la documentacion de express es tan clara, también tengo el libro de Express Web Application Development de PACKT llevo 30 páginas leídas y no esta claro como hacer un simple hola mundo.

  28. Alberth dijo:

    se puede crear el esqueleto para la aplicacion con algun comando de express para trabajar en windows???

  30. josemiguel dijo:

    Para windows al menos a mi ese comando (.\node_modules\express\bin\express) no me funciona y tengo los paquetes instalados en la carpeta como indicas en el tutorial, hay que realizar alguna accion antes me dice que el comando . no es reconocido como comando interno o externo.

    Muchas gracias por el blog lo veo muy util.

  31. Juan María Hernández dijo:

    josemiguel, en windows puedes tener problemas dependiendo de la versión de node/npm que estés utilizando (el tutorial usa una versión muuuuy antigua).

    Puedes probar a ejecutarlo con:

    .\node_modules\.bin\express.

    Eso debería funcionar.

  32. Claudio dijo:

    gracias por el tuto, oye no se me instalan las dependencias
    «dont forget to install dependencies:
    $ cd . && npm install»
    porq sera?

  34. Ruben dijo:

    Antes de Creando el esqueleto de la aplicación hay que intalar:
    (Creando el esqueleto de la aplicación)

    El último paso dentro de el directorio donde quereis que se ejecute ejecutar:
    hay que instalar:
    $ npm install -g express-generator

    y ahora en la carpeta donde quereis vuestro esqueleto
    $ express
    y despues, para instalar las dependencias
    $npm install

  35. Ruben dijo:

    mi ultimo comentario no me explique bien, al copiar y pegar, así que lo pongo de nuevo:

    Antes de Creando el esqueleto de la aplicación hay que instalar:
    $ npm install -g express-generator

    y ahora en la carpeta donde quereis vuestro esqueleto
    $ express
    y despues, para instalar las dependencias
    $npm install

Comentarios cerrados.