Linea de tiempo

Integración continua: Angular + Github + Firebase + Travis CI

Es mejor 1 click que 5

Después de terminar de programar tu aplicación, lo siguiente que la mayoría de todos nosotros hacemos es subirlo a una plataforma de alojamiento de repositorios (como GITHUB) y dejarlo versionado. Nuestro objetivo (y buena práctica) es controlar las características de nuestra aplicación en distintas ramas.
Normalmente, haríamos un push a DEVELOP y luego un MERGE a master, con un resultado similar a este:

Git Merge

El objetivo final es poder realizar un paso a producción, sin las complicaciones de copiar manualmente todo el contenido de nuestra rama MASTER a este ambiente.
Afortunadamente, existen herramientas de integración y despliegues continuos que pueden hacer esta tarea en forma automatizada.

Paso 1: Crear un proyecto en Firebase.

Primero que nada, nos vamos a firebase.google.com y creamos nuestro proyecto.

Crear proyecto firebase

Después escribimos el nombre de nuestro proyecto. Yo le puse “mi proyecto angular” y pinchamos Continuar.

Después FIREBASE nos proporcionara la opción de agregar Google Analytics a tu proyecto . Si quieres puedes habilitarlo. En este caso lo haremos.

Google Analytics

En el siguiente paso, FIREBASE nos pedirá seleccionar la cuenta de Google Analytics que tenemos configurada y lo asociara a tu nuevo proyecto. Tienes que seleccionarla y presionar “Crear proyecto”.

Apenas termine presionamos “Continuar”.

#PAFF! Proyecto creado correctamente.

Apenas termine todo, FIREBASE nos mostrara un dashboard con todos los productos asociados a nuestro nuevo proyecto.

Dashboard de firebase

Recuerda que si quieres expandir la capacidad de tu cuenta para tus proyectos, puedes acceder a la sección de Pricing y ver cual te acomoda mas.

Paso 2: Crear nuestro proyecto Angular.

Ahora creamos nuestro proyecto angular ejecutando el siguiente comando:

ng new app-firebase

Seleccionamos nuestra hoja de estilo a gusto del consumidor.

Cuando tengamos nuestro proyecto angular ya creado, lo compilamos, ejecutamos el siguiente comando.

ng build --prod

La idea de este comando es poder desplegar todos los resultados de la compilación para que sean reconocidos al momento de subirlos a nuestro servidor de producción.

dist

Como recomendación, para que nuestra carpeta DIST quede lo mas limpia posible, nos dirigiremos al archivo “angular.json” y eliminaremos cualquier subcarpeta que se encuentre en la RUTA de salida outputPath.

Outputpath

El objetivo es que la carpeta DIST quede de la siguiente manera.

Limpiar carpeta dist

Paso 3: Instalar dependencias de Firebase.

Luego en nuestro terminal ejecutaremos el siguiente comando para poder instalar todas las dependencias de FIREBASE.

npm install -g firebase-tools

Paso 4: Inicio de sesión de Firebase.

Terminando el proceso nos loguearemos a nuestra cuenta FIREBASE colocando el siguiente comando en nuestro terminal.

firebase login

Si estas logueado en FIREBASE la consola debería mostrarte el siguiente mensaje, de lo contrario automáticamente se abrirá la cuenta de google para poder ingresar tus credenciales.

Mensaje firebase logueado

Paso 5: Inicializando el proyecto.

Ahora inicializamos nuestro proyecto colocando el siguiente comando en nuestro terminal.

firebase init

La consola nos mostrara el siguiente mensaje si queremos proceder a inicializar nuestro proyecto, damos Y y presionamos ENTER.

Proyecto inicializando

Luego firebase nos preguntara que producto queremos asociar a nuestro proyecto. Seleccionaremos Hosting el cual se encargara de alojar nuestro proyecto angular. La forma de de seleccionar es con las flechas hacia abajo y seleccionar con la barra espaciadora y presionamos ENTER.

Hosting

FIREBASE te pedirá que selecciones si es un proyecto ya existente o crear uno nuevo, en este caso tienes que darle a “Use a existing project”

Proyecto existente

Luego te pedirá que selecciones el proyecto de FIREBASE, selecciona el proyecto que creamos en el paso 1 (mi-proyecto-angular).

Seleccionar el proyecto creado en el paso 1

Luego FIREBASE te preguntara en donde quieres instalar tu carpeta publica, lo cual sera tu carpeta relativa dentro del proyecto, esta contendrá los activos de Hosting que se cargarán con la implementación de Firebase, tienes que poner dist (carpeta creada al momento de hacer ng build — prod) y presionar ENTER.

dist

Luego FIREBASE te preguntara si quieres sobrescribir todas las URLS para que apunten al archivo index.html para efectos del Single Page App, pones Y y les das ENTER.

index.html

Luego FIREBASE te preguntara si quieres reemplazar el archivo index.html, le das n para que no lo haga y presionas ENTER.

Reemplazar archivo index.html

Ya con todo configurado FIREBASE te mostrara un mensaje de inicialización completa, lo cual te indica que esta todo correctamente creado.

Inicialización correcta

Paso 6: Desplegar nuestro proyecto.

Ahora desplegamos nuestro proyecto que tenemos alojado en nuestro hosting en FIREBASE, el comando que debemos escribir es el siguiente.

firebase deploy

Si sale todo bien, FIREBASE nos mostrara el siguiente mensaje en consola.

Proyecto desplegado

Y .. estamos tu proyecto angular ya esta visible y activo, como prueba de que esta todo correcto, nos dirigiremos a nuestro browser y consultamos la URL que FIREBASE nos indica en nuestro terminal, en mi caso es: https://mi-proyecto-angular-{ids-generados}.firebaseapp.com.

Proyecto desplegado en FIREBASE

Finalmente validaremos en nuestro dashboard de FIREBASE en la sección Hosting que nuestro proyecto esta correctamente desplegado.

Proyecto desplegado

Wow

Paso 7: Subir nuestro proyecto al repositorio de GITHUB.

Dado que Travis CI se sincroniza con Github, creemos nuestro repositorio propio y alojaremos nuestro proyecto.

Subimos el proyecto creado a nuestro repositorio nuevo.

git init
git add .
git commit -m "Primer COMMIT :-)"
git remote add origin https://github.com/YOUR_USERNAME/NOMBRE_REPOSITORIO.git
git push -u origin master

O simplemente lo puedes hacer con SOURCETREE o alguna herramienta similar.

Una vez que tengamos nuestro proyecto ya alojado en GITBUB, nos queda usar nuestro terminal y ejecutar el siguiente comando para obtener el token que nos permitira conectarnos a FIREBASE desde TRAVIS CI (te pedirá que te autentiques). Lo necesitaremos después.

firebase login:ci

Generación del token

Paso 8: Configurar TRAVIS CI con nuestro repositorio de GITHUB.

Travis CI es una plataforma de integración continua que puede utilizar y enlazar nuestros proyectos de Github. Una vez sincronizado con tu repositorio, construirá el proyecto y ejecutará las pruebas cada vez que hagas push a tu branch(o merge a un pull request).

Inicia sesión en Travis CI con tu cuenta de Github y deberías ver la lista de todos tus repositorios, algo como esto:

Lista de repositorios

Selecciona el proyecto que desees sincronizar, da clic en el icono de engranaje para ingresar a las configuraciones.

Configuraciones Travis

Puedes ver que en mi configuración tengo Build Pushes branches y Build Pull Requests activado. Esto significa que cada vez que hago push directamente a este repositorio o hago merge a un pull request, TRAVIS CI disparará una compilación.

También debes agregar una variable de entorno para tu token. Agrega FIREBASE_TOKEN y copia el token que generamos hace un rato, Debería queda algo como esto:

Variable de entorno

Ahora como ultimo paso es crear un archivo .travis.yml en la raíz de nuestro proyecto.

Arbol de carpetas con TRAVIS CI

Y agregar la siguiente configuración:

#.travis.yml
language: node_js
node_js:
  - "10.15.3"
branches:
only:
  - master
before_script:
  - npm install -g firebase-tools
  - npm install -g @angular/cli
script:
  - ng build --prod
after_success:
  - firebase deploy --token $FIREBASE_TOKEN
notifications:
  email:
  on_failure: change
  on_success: change

Este punto es SÚPER IMPORTANTE ya que si en tu equipo estas usando una versión de NODE.JS diferente a la que estas declarando en el archivo de configuración de TRAVIS CI, la integración no te funcionara.

Por lo tanto te recomiendo que primero verifiques que versión tienes instalada, esto se hace simplemente abriendo tu terminal y escribiendo.

node --version

En mi caso tengo la v10.15.3 y es la misma que coloco en el archivo de configuración de .travis.yml.

Versión de NODE

Archivo de configuración .travis.yml

Ahora si tienes configurados varios proyectos/alias de Firebase, puedes especificar que proyecto quieres apuntar, usando YOUR_PROJECT_ALIAS antes del comando deploy para especificar qué proyecto deseas implementar.

A continuación te adjunto la documentación de TRAVIS CI para que mires el ciclo de vida de la compilación.

Ahora todo lo que nos queda es rezar y que todo salga bien, jajaja no mentira, debemos hacer commit y push de nuestros cambios, recuerda que puedes hacerlo mediante comando o por SOURCETREE o la herramienta que estimes conveniente.

git add .
git commit -m "configuración .travis.yml"
git push origin master

¡Y eso es todo! Siempre puedes echar un vistazo al estado de build de tu repositorio en TRAVIS CI. Después de unos minutos, deberías ver la aplicación ya implementada en la URL que FIREBASE nos proveyó. Puedes ver la mía aquí, en mi caso agregue un simple CARD de Bootstrap.

Resultado.

Thanks

Muchas gracias por llegar hasta acá y muy agradecido que le pongas “CLAPS” a mis publicaciones, y claro se agradecen todos los feedback posibles, así podre ayudar a los demás de la mejor manera posible.