Desarrollar Webapps Realtime: Creación
Código en GitHub: building-realtime-webapp. Release: init
.
Hace unos meses descubrí Sails.js, un framework MVC para Node basado en Express que te facilita la creación de aplicaciones web realtime mediante Websockets. Así que no me extraña que el slogan sea:
THE WEB FRAMEWORK OF YOUR DREAMS.
Designed for developers by Giant Squid.
Crear proyecto con Sails.js
Requisitos
Obviamente necesitamos tener Node.js. En mi caso, tengo la última versión estable, la 0.10.24, puesto que voy a desplegar en Heroku y acepta cualquier versión superior a la 0.8.5. Os recomiendo revisar qué versión hay instalada en el servidor donde vayáis a hacer despliegue de producción. Para comprobar la versión que tienes en local, ejecuta en la consola: node -v
. Para gestionar la versión de node os recomiendo el paquete n
de npm. Lo instalais globalmente para tenerlo disponible desde cualquier parte y luego podrás instalar la versión última versión estable con el comando sudo n stable
Instalación
Podemos instalar Sails.js local o globalmente (flag -g)el paquete sails:
$ sudo npm -g install sails
Crear un nuevo proyecto
Tenemos que llamar al commando new
que nos creará un proyecto sails en la carpeta <appName>
en el directorio desde donde lo ejecutemos.
$ sails new <appName> [--linker]
$ cd <appName>
También existe la opción de usar un enlazador de recursos automático añadiendo la flag --linker
. Esto instalará una tarea de Grunt llamada grunt-sails-linker que automatiza la adición de etiquetas html basadas en ficheros. Incluyendo la flag sails creará el Gruntfile.js
implementando esta tarea de Grunt.
Con el proyecto creado y estando en su directorio podremos lanzarlo:
$ sails lift
Una vez lanzado, vemos que el barco ha zarpado y podemos ver nuestra webapp en http://localhost:1337
Crear un repositorio git
Es muy recomendable tener un control de versiones aunque sea simplemente en local para poder deshacer cambios y tener un flujo de trabajo controlado.
$ git init
Además, quién sabe si mañana no eres tú solo el que toca el código. Así que, inicializamos un git y enviamos lo que llevamos. Os recomiendo echarle un ojo al modelo de ramificación Git acertado.
De momento vamos a crear únicamente las ramas master
y develop
para nuestro proyecto y según vayamos necesitando las demás las vamos creando a partir de la rama que corresponda.
$ git checkout -b master && git checkout -b develop
De esta manera nos quedamos en la rama develop
para empezar ahí nuestro proyecto y cuando tengamos algo estable lo combinaremos con la rama master
.
Repositorio git remoto en GitHub
En mi caso, voy a usar GitHub para compartir mi código con todos vosotros. Creamos nuestro nuevo repositorio en GitHub e incluimos la url del repositorio a nuestro proyecto:
$ git remote add origin <git_url>
Primer commit
Ahora que tenemos nuestro repositorio git es hora de hacer el primer commit:
$ git add .
$ git commit -m "First commit"
$ git push -u origin develop
Despliegue en Heroku
Una vez tenemos nuestro proyecto en local vamos a ver si nos funciona correctamente en el servidor de producción. Voy a describir los pasos claves, pero si tienes algún problema puedes echarle un ojo Empezar con Node.js en Heroku y Desplegando con git para obtener información adicional.
Requisitos
Antes de empezar necesitaremos un par de cosas:
- Crear una cuenta en Heroku
- Instalar las Heroku Toolbelt
Configuración local
Después de instalar las Toolbelt tendrás disponible el comando heroku
en tu consola. Así que vamos a registrarnos en Heroku y configurar nuestro entorno:
$ heroku login
Nos pedirá nuestro nombre de usuario, contraseña y si queremos crear una llave pública SSH (SSH public key) para poder publicar nuestro código posteriormente.
Es recomendable indicar en el “`package.json“ la versión de node que queremos utilizar para evitar problemas y asegurarnos que estamos usando una versión que soportamos.
~~~ json “engines”: { “node”: “0.10.x” } ~~
Heroku usa el fichero Procfile para indicar los comandos que va a ejecutar la aplicación, así que le tenemos que indicar que queremos un comando de tipo web y que ejecute nuestro script de Node.js:
web: node app.js
Ahora podemos arrancar la aplicación usando Foreman, que también lo tendrás instalado como parte de las ToolBelt:
$ foreman start
Seguramente te de un error porque no encuentra el módulo sails
, así que instala las dependencias para tener una copia de sails en node_modules, puesto que al tenerlo instalado globalmente foreman no lo encuentra.
$ npm install
Si todo funciona correctamente, subimos nuestro nuevo fichero al repositorio:
$ git add .
$ git commit -m "Added Procfile"
$ git push origin develop
Crear una aplicación en Heroku
Heroku utiliza git para la gestión del código, así que tendremos que crear la aplicación en Heroku y poner una referencia en nuestra lista de repositorios remotos.
$ heroku apps:create <appName> --remote <remote> --region eu
Esto creará una aplicación <appName>
en Heroku, creará un repositorio remoto llamado <remote>
(por defecto, heroku) e indicamos que nuestra región es Europa.
Si tenemos la aplicación creada en Heroku, podemos añadirla como repositorio remoto:
$ heroku git:remote -a <appName>
Debido a que tenemos la rama maestra y la de desarrollo, y Heroku sólo tiene en cuenta la rama master para los despliegues en sus servidores, recomiendo crear otra app en Heroku para desarrollo. Yo lo he hecho añadiendo -dev
tanto al nombre de la app con al nombre del repositorio remoto.
$ heroku apps:create <appName>-dev --remote <remote>-dev --region eu
Desplegar el código
Hasta ahora solo hemos subido el código a la rama develop
por lo que tendremos que desplegar en la rama master de heroku-dev
.
$ git push heroku-dev develop:master
Veremos cómo detecta que es una aplicación Node.js, instala las dependencias, cachea node_modules para futuros despliegues, construye el entorno, parsea el Procfile comprime y lanza. Ahora podemos ver nuestra webapp en el entorno de pre-producción http://building-realtime-webapp-dev.herokuapp.com