viernes, 6 de septiembre de 2013

Generator de Yeoman para AngularJS con Jade y ExpressJs



Yeoman (http://yeoman.io/) es un conjunto de herramientas para que hacer desarrollo web sea agradable y productivo. Utiliza "yo" para hacer scaffolding de proyectos, "grunt" para las tareas de arrancar servidores, compilar SASS o CoffeeScript, optimizar imágenes y todo lo que se te pueda ocurrir. Con "bower" puedes gestionar las dependencias de las librerías de cliente, como hace "npm" para proyectos de NodeJS o los pom.xml en proyectos Java con Maven.

AngularJS (http://angularjs.org/) es uno de los frameworks MVWhatever de moda. En mi opinión, es de lo mejor que se puede encontrar. Está muy bien pensado, con unas ideas fundamentales de arquitectura muy bien pensadas, es muy productivo, tiene unos tutoriales fantásticos con los que puedes empezar a trabajar después de dedicarle un par de horas y tiene una flexibilidad tremenda.

Jade (http://jade-lang.com/) es un lenguaje y motor de templating para que generar HTML sea productivo. Tanto es así, que en Adesis todos los que hacemos front lo usamos y cuando tenemos que escribir HTML a la antigua usanza para algún otro motor de templating es peor que un dolor de muelas. Ya hay ports para todos los demás lenguajes. Está hecho por desarrolladores front para desarrolladores front, de ahí que los problemas habituales que tenemos estén correctamente abordados.

ExpressJs (http://expressjs.com/) es un servidor para NodeJs donde puedes hacer maravillas con muy pocas lineas de código. En concreto implementar APIs REST, ya sea porque hagas implementaciones finales o porque tengas que simular alguna con la que te vayas a integrar es algo trivial.

Los más probable es que ya conocieses todas estas piezas si haces desarrollo front, ¿no?

En cualquier caso, Yeoman tiene unos "generadores" que son los que hacen el scaffolding de proyectos, y puedas arrancar un nuevo proyecto con todas sus piezas en su sitio en 30 segundos. Hay generadores para proyectos muchos frameworks MVWhatever, como BackboneJs, EmberJs, Polymer y por supuesto AngularJS.

Yo uso mucho el de AngularJS, pero como quiero generar el código HTML con Jade, una vez creado el proyecto, tengo que modificar las tareas de Grunt, y lo mismo para meter un servidor de ExpressJS que haga de backend. En este caso, hay que agregar un proxy al servidor de Yeoman que enganche contra una instancia de ExpressJS.

Tras la cuarta repetición, me auto dí una colleja por cansino, y decidí hacer un fork del generador de AngularJS para agregarle Jade y Express.

A diferencia de algunos generadores que vi por ahí (pero seguro que alguno hay como este que no encontré), cuando modificas un fichero de ExpressJs este servidor también se reinicia de forma automática.

Lo he publicado npm para que quien tenga mis mismas necesidades lo pueda usar. Como todo con nodejs, es sencillísimo de instalar y utilizar.

El servidor ExpressJS está en la carpeta "server" y si te apañas con ExpressJS, verás que hay un fichero routes.js. Vamos terreno conocido.

Las plantillas Jade están en "app/jade". Tampoco hay sorpresas por aquí :)

Instalación
El nombre del paquete es "angularexpress", así que sería:

npm install -g generator-angularexpress

Uso

Para crear un nuevo proyecto, vete a la carpeta donde vayas a trabajar y teclear:

yo angularexpress

(Yeoman detecta los generadores instalados porque son los paquetes de npm que empiezan por el prefijo "generator-" y para usarlos no hay que poner el prefijo)
A partir de aquí serán las preguntas típicas del generador de AngularJS más la de si quieres usar Jade (por defecto se usará).

Datos del proyecto
npm: angularexpress
https://npmjs.org/package/generator-angularexpress

Código fuente:
https://github.com/gonzaloruizdevilla/generator-angularexpress

¡Que lo disfrutéis!



9 comentarios:

  1. Gonzalo, Te cuento que no me funciono correctamente, anteriormente pude instalar yo angular y correrlo en mi windows 8, tambien probe con otros generators, pero angularexpress cuando corro grunt server o grunt test, me tira error con el archivo .jshintrc

    Por lo que probe instalar yo angular y luego instalar express, cosa que tampoco tuve exito..

    Algo que un no me queda claro en todo esto es que..

    Una vez que hago grunt del proyecto, lo tengo que correr bajo apache para que funcione?, o desde que archivo en particular puedo lanzarlo desde node???

    No me ha quedado del todo claro esto..

    Abrazo y buenisimo lo tuyo.

    ResponderEliminar
  2. mañana busco un equipo con windows8 le echo un vistazo y te cuento a ver que puede ser

    ResponderEliminar
  3. por cierto, no se necesita apache para nada, solo con node

    ResponderEliminar
  4. Ahi logre resolverlo, corri grunt build y no grunt solo...

    Ahora, cuando corro grunt server, me levanta chrome, y todo perfecto, pero como levanto el build o sea lo que me queda como resultado del grunt build con node.js??? ya que no me crea nada de express dentro de la carpeta "dist"...

    Alguna idea?

    ResponderEliminar
  5. Bueno, al final cree un archivo server.js con lo siguiente y lo puse en root de la carpeta dist

    var express = require('express');
    var app = express();
    app.use(express.bodyParser());
    app.use("/styles", express.static(__dirname + '/styles'));
    app.use("/scripts", express.static(__dirname + '/scripts'));
    app.use("/images", express.static(__dirname + '/images'));
    app.use("/bower_components", express.static(__dirname + '/bower_components'));
    app.use("/views", express.static(__dirname + '/views'));
    app.get('/', function(req, res) {
    res.sendfile(__dirname + '/index.html');
    });
    app.listen(80);

    ResponderEliminar
  6. Hola quisiera que me ayuden a borrar los directorios generados.. hice varias pruebas y ahora no pudo borrar las carpetas en w8

    ResponderEliminar
  7. Hola, utilice yeoman para mi aplicacion con el generador, ahora ya tengo mi 'dist' con el 'grunt build', pero no se como encaminar para que mi servidor node escuche a mi 'dist', estoy un tanto confundido. modifique el gruntfile.js, pero no he tenido buenos resultados, si me pueden ayudar por favor, estaré muy agradecido. Adjunto el gruntfile original, y el que deseo crear para que funcione, espero me puedan orientar o ayudar de alguna manera. MUCHISIMAS GRACIAS. https://mega.nz/#F!hsNFBZQZ!mRltVnOlNTleQvxTLAYznQ

    ResponderEliminar