Revista Informática

Node.js y Express: Estructura modular de proyectos

Publicado el 16 diciembre 2013 por Codehero @codeheroblog

Dile adiós a las clases de cocina, y aprende a desarrollar proyectos modulares en Node.js y Express con la siguiente estructura de proyecto inspirada en la propuesta por TJ Holowaychuk, el creador de express, en el siguiente video:

Modular web applications with Node.js and Express from tjholowaychuk on Vimeo.

Con este capítulo pretendo llevar un paso más adelante el tema tocado en el capítulo anterior (como crear tus propios módulos), modularizando las partes de la aplicación para hacerla más fácil de mantener y escalar.


Creando el proyecto

Primero que nada creamos un proyecto de Express desde la consola:

$ express mudular-test

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

   install dependencies:
     $ cd mudular-test & npm install

   run the app:
     $ node app

Para esta estructura no vamos a necesitar la carpeta “routes”, tampoco vamos a necesitar el archivo “index.jade” de la carpeta “views”, los eliminamos a ambos.


Creando los controladores

Cada carpeta interna de un proyecto de Node puede ser un módulo distinto como hablamos en el capítulo anterior.

Vamos a crear una carpeta llamada controllers y dentro creamos otra carpeta llamada home.

/controller/home

Y dentro de ‘home’ creamos un archivo llamado index.js. Esto es lo que llamamos un “Controlador”, aquí vamos a atender todas las rutas que consideremos que pertenecen al grupo home.

Ahora dentro del archivo controllers/home/index.js vamos a escribir el siguiente código:

var express = require('express');           // 1
var app = module.exports = express();   // 2

app.get('/', function(request, response) {

// 3

});
  1. importamos Express
  2. obtenemos una instancia del framework
  3. atendemos como sea necesario esta ruta y respondemos.

Creando vistas

TJ Holowaychuk propone crear las vistas en el mismo directorio del controlador, por ejemplo:

/controllers
    /home
        index.js
        home.jade

Yo soy fanático del orden, y creo que esto podría volverse un poco complicado si tenemos varias vistas para este módulo, por eso yo propongo colocarlas en una carpeta aparte:

/controllers
    /home
        index.js
        /views
            home.jade

Entonces en el controlador home agregamos el siguiente código en el método de la ruta:

app.get('/', function(request, response) {

  response.render('home', {
    title: 'Hola, desde el controlador de home'
  });

});

Ahora vamos a necesitar un asignar la siguiente propiedad para que el framework pueda encontrar las vistas:

app.set('views', __dirname + '/views');

Entonces nuestro controlador debe lucir de la siguiente manera:

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

app.set('views', __dirname + '/views');

app.get('/', function(request, response) {

  response.render('home', {
    title: 'Hola, desde el controlador de home'
  });

});

Ahora necesitamos crear la vista home.jade:

extends ../../../views/layout

block content
  h1= title
  p Welcome to #{title}

Guardamos en /controllers/home/views/.


Conectándolo todo

Nos vamos a app.js y borramos los app.get que coloca Express por defecto cuando generamos el proyecto e importamos los módulos que hayamos creado, en este caso es solo el módulo “home”.

Agregamos esto junto a la declaración de todos los módulos ya existentes:

var home = require('./controllers/home');

Y más abajo, luego de toda la configuración declaramos asignamos los módulos para su uso:

app.use(home);

Entonces ahora nuestro archivo app.js debe lucir similar al siguiente:

//app.js

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

var app = express();

// modulos
var home = require('./controllers/home');

// all environments
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')));

// development only
if ('development' == app.get('env')) {
  app.use(express.errorHandler());
}

// rutas
app.use(home);

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


Conclusión

En este capítulo Node.js y Express te enseñé como utilizar tus propios módulos para crear una estructura mucho más fácil de entender, mantener y extender.

Este es el último capitulo de esta serie, pero no el último sobre Node.js en este sitio, un hay más por venir en el futuro, este ha sido solo el comienzo.

Espero que esta serie de totorales sobre Node.js y Express haya sido de tu agrado y haya servido de ayuda para comprender esta excelente herramienta para el desarrollo web.

Si consideras que esta entrada es útil, por favor, ayuda a correr la voz y expandir el alcance de Codehero hasta aquellos que necesitan de nuestra ayuda compartiendo en las redes sociales.

Como siempre, las dudas o comentarios puedes dejarla en la sección correspondiente de más abajo.

Adiós.


Volver a la Portada de Logo Paperblog