Workflow NodeJS: Usando el MEAN Stack en Linux y MacOS


NodeJS es la plataforma de desarrollo del futuro. Se trata de un enfoque para "llevar a javascript al servidor" y básicamente ha permitido la creación de todo tipo de software a través de 1 solo lenguaje de programación (javascript) desde aplicaciones web, pasando por software de escritorio y plataformas móviles o incluso drivers para hardware. ¿Parece increíble no? Pues lo es. Por desgracia, la documentación y tutoriales de diferentes frameworks y herramientas disponibles en el ecosistema node está "algo revuelta" y puede ser confusa para quien comienza adentrarse. Por otro lado, al ser una plataforma estilo KISS (keep it simple stupid) Si tan sólo nos vamos al ejemplo del desarrollo web (sin citar el resto de implementaciones) armar un proyecto requiere la conjunción de varias piezas parte por parte, cosa que toma tiempo si requieres hacer varias cosas de una vez y de forma rápida, pero tiene sus ventajas:

Al usar el MEAN Stack (MongoDB, ExpressJS, AngularJS y NodeJS) cuando armamos un proyecto de desarrollo web (el ejemplo en este caso) notaremos que el 80% del código que escribiremos a lo largo de toda nuestra implementación será Javascript/Coffeescript (dejando un 10% extra para Less/CSS y otro 10% más para HTML/Jade). Esto permite crear cosas "íntegras" de manera veloz y con código de fácil manutención, es por eso que yo por ejemplo he apostado por NodeJS como mi plataforma de desarrollo a largo plazo. Este post es "mi granito de arena" para hacerles las cosas más sencillas a aquellos que están comenzando en el mundo de NodeJS y espero que les sea de utilidad a más de uno de ustedes allá afuera.

Workflow NodeJS... A lo que vamos

NOTA: Antes que nada aclarar que esto es un tutorial de workflow. Mi intención aquí no es enseñarles fundamentos de NodeJS o bien, el uso de ExpressJS (ya deberían saber manejarlos y entenderlos aunque sea un poco) así como tampoco explicar los conceptos detrás de la creación de una aplicación web MVC sino simplemente ayudarles a montar un "one time setup" que les servirá para crear aplicaciones web basadas en las tecnologías del tutorial en un pestañeo una vez realizado. No hablaremos mucho de código o teoría, así que asumo que el lector tiene conocimientos al menos básicos de HTML, CSS, Javascript y/o sus respectivos preprocesadores (Jade, Less, Coffeescript). Además aclaro que el sistema operativo de referencia aquí será Fedora Linux y usaremos un poco la terminal y los comandos de Bash.

Para seguir este tutorial necesitarás tener:

  • Fedora Linux (o cualquier sistema Unix-Like como otra distro linux o MacOS)
  • wget, curl y git instalados
  • MongoDB Instalado
  • NodeJS y NPM instalados
  • ExpressJS instalado

NOTA: Exceptuando ExpressJS (que se instala desde npm) todos los demás paquetes deberían venir en los repos oficiales de tu distribución linux o en el repositorio homebrew si te encuentras en MacOS.

Una vez aclarado esto, comencemos paso a paso:

Instalando utilidades

wget, curl y git:

sudo yum -y install wget curl git git-core
NodeJS y NPM:

sudo yum -y install nodejs npm

ExpressJS:

NOTA: Este comando puede o no requerir "sudo" según la instalación de npm en tu sistema (debido a su función global); Intenta sin sudo y si no instala nada utiliza sudo; Cabe destacar que en el caso de Fedora Linux sí se requiere usar "sudo" como verás a continuación.

sudo npm install -g express

Configurar Git

Para configurar Git, tenemos que correr en consola:

1. git config --global user.name "Tu Nombre"
2. git config --global user.email tu-email@servicio.com
3. git config --global push.default simple

Estructura y Esqueleto

Necesitaremos una carpeta dónde guardar nuestros proyectos y otra dónde guardar los scripts de shell que usaremos para automatizar las cosas; Por lo tanto crearemos dos nuevas carpetas llamadas "codeprojects" y "runscripts" respectivamente dentro de nuestra carpeta personal con los siguientes comandos:

1. cd ~
2. mkdir ~/codeprojects
3. mkdir ~/runscripts

En la cuestión del esqueleto, es donde se viene lo interesante. Para esta parte necesito que tengas noción del uso de las plantillas en tu sistema operativo; Si sí sabes usarlas, entonces podemos proseguir. Por cuestiones de velocidad lo que haremos aquí será usar un esqueleto "pre-fabricado" hecho por mi para mis proyectos durante este tutorial, pero puedes reemplazar este esqueleto por el tuyo según tus necesidades en este paso si así lo deseas o bien, adaptar el código que vamos a utilizar según lo que consideres más adecuado para tu trabajo. Para crear nuestro esqueleto en la carpeta de plantillas de nuestro sistema operativo (Ojo: La tuya puede llamarse "Templates" o de otra manera, pero en Fedora Linux por ejemplo se llama "Plantillas" si tienes el sistema operativo en Español) haremos lo siguiente en consola:

1. cd Plantillas
2. git clone https://github.com/Jmlevick/mean-boilerplate.git
3. cd mean-boilerplate
4. mv mean.sh ~/runscripts
5. rm -rf .git
6. rm -rf .gitignore
7. echo "source ~/runscripts/mean.sh" >> ~/.bashrc (Si usas terminal Bash)
8. echo "source ~/runscripts/mean.sh" >> ~/.zshrc (Si usas terminal ZSH)
9. source ~/runscripts/mean.sh

Y listo, esos comandos nos crearán una carpeta de nombre "mean-boilerplate" en Plantillas y un script de nombre "mean.sh" en runscripts, además de cargar el script de mean.sh en nuestra shell. El esqueleto que descargamos incluye:

  • Uso del MEAN Stack completo (MongoDB, ExpressJS, AngularJS & NodeJS)
  • Estructura MVC
  • Configuración YAML
  • Script nodemon para iniciar
  • Coffeescript
  • LESS
  • IE Fix
  • Twitter Bootstrap
  • jQuery
  • Middleware para Error Handling
  • Optimizaciones SEO
  • Shell script para inicialización
  • Digest auth + Salt para contenido protegido

NOTA: Recuerda cambiar los contenidos de READMIE.md y LICENSE.md para que sean más acordes a tu proyecto cada que hagas uno.

Uso y Workflow

Ahora cada que queramos crear un nuevo proyecto basado en el MEAN Stack, bastará con ejecutar el comando:

mean myapp

(Reemplazando myapp por el nombre de tu proyecto) en consola. Aquí tenemos que entender 2 cosas:

  1. Que podemos editar el script mean.sh guardado en /home/tu-usuario/runscripts
  2. Que podemos editar el esqueleto mean-boilerplate guardado en /home/tu-usuario/Plantillas

El script de shell específicamente nos sirve para crear el nuevo proyecto, copiar el esqueleto desde nuestras plantillas y bajar las últimas versiones de las librerías y utilidades a integrar, (actualizadas hasta el día del último commit en el repo de mi esqueleto). Conforme pase el tiempo puedes cambiar las versiones de dichas utilidades en el script (y sus enlaces de descarga) para ir actualizando las librerías de tus proyectos poco a poco sin necesidad de volver a clonar mi repo de github (si usaste mi esqueleto). También puedes agregar algo de interactividad, por ejemplo:

NOTA: Los siguientes ejemplos de scripting son específicos de Linux.

El código hasta ahora:


Instalar libnotify:

sudo yum -y install libnotify

Añadimos las siguientes líneas al final de la función mean (debajo de la línea 31):

notify-send "Proyecto MEAN ha sido creado con éxito"
nautilus . &
exit

Y eso nos notificará una vez que el proyecto haya sido creado, además de abrir la carpeta resultante en nuestro gestor de archivos (Obviamente puedes cambiar "nautilus" por "dolphin" "pcmanfm" o "thunar" según el gestor que utilices, así como también "subl" o "gedit" si quieres abrir dicha carpeta en un editor de texto tras creado el proyecto por ejemplo).

En el caso específico del esqueleto, lo pusimos en Plantillas porque nos hace más fácil añadir archivos similares (que tienen que repetirse por entidad según crece el proyecto, como los modelos y controladores) en un par de clicks, veamos un ejemplo:


¿Se entiende la utilidad de éste enfoque? Lo mejor es que puedes hacer lo mismo con cualquier otro framework NodeJS: Te creas un esqueleto en "Plantillas" y un script automatizador  con una función de nombre único (como "mean" en este caso) basado en el ya descargado mean.sh dentro de "runscripts", añades ese script automatizador a tu .bashrc o .zshrc con:

1. echo "source ~/runscripts/myscript.sh" >> ~/.bashrc (Si usas terminal Bash)
2. echo "source ~/runscripts/myscript.sh" >> ~/.zshrc (Si usas terminal ZSH)

(Reemplazando myscript.sh por el nombre de tu script) y listo, tienes un Workflow NodeJS mucho más ágil y práctico en tu sistema Linux o MacOS, ¿Interesante no? Hemos terminado aquí... En un tutorial futuro veremos cómo convertir este boilerplate que usamos aquí en un proyecto web hecho y derecho.

Extra: Boilerplate en acción


Si quieres ver el proyecto de boilerplate "en acción", simplemente haz en consola:

1. cd ruta/a/carpeta/proyecto-creado
2. npm start

Y luego de eso, abre http://lvh.me:3000 en tu navegador web. Te recibirá la pantalla de bienvenida del proyecto donde podrás ver los poderosos bindings de AngularJS funcionando al escribir tu nombre en el campo disponible, y si navegas a http://lvh.me:3000/dummies/admin se te pedirá un nombre de usuario y contraseña para acceder a la zona restringida, mismos que son:

Usuario: admin
Contraseña: Mypass000

Puedes usar este esqueleto para construir tus propias apps basadas en el MEAN Stack sin problemas, de ahí la idea de que el concepto inicial del boilerplate sea tan simple; El código utilizado está bajo la licencia beerware.