Volver
Configurando GitHub Actions para Flutter-web con Firebase Hosting
Firebase

Configurando GitHub Actions para Flutter-web con Firebase Hosting

En este artículo te voy a contar de una forma muy sencilla como se puede conectar GitHub actions con Firebase para desplegar aplicaciones en Flutter-web.

Arturo Grau
March 25, 2021

Como ya sabrás, con Flutter no solo se pueden crear aplicaciones móvil sino también aplicaciones web y desktop. Es esta última funcionalidad la que nos permite compilar una aplicación de Flutter en Dart embeberla en un navegador y desplegarla en un servidor web.


Repositorio con GitHub

Una de las cosas que más me gustan de GitHub es la funcionalidad GitHub Actions. Aunque esta funcionalidad tiene infinidad de posibilidades, en este artículo nos vamos a centrar en cómo lanzar una acción al hacer un merge a una rama o al crear un pull request para realizar despliegues en Firebase Hosting.


Firebase Hosting

Si no lo conocías, Firebase es una plataforma que facilita enormemente el desarrollo de aplicaciones web y mobile. Entre uno de sus muchos servicios se encuentra Firebase Hosting, que permite alojar tu aplicación web de una forma cómoda y rápida.

Crear un proyecto en Firebase es muy sencillo:

1. Accede a firebase.google.com

2. Haz click en el botón comenzar y accede con tu cuenta de Google.

3. Haz click en Add Project

4. Escribe el nombre de tu proyecto.

5. Selecciona si quieres utilizar Google Analytics y haz click en "Continue".

6. Haz click en "Continue" una vez más y ya tendrás tu proyecto creado en Firebase.

Ahora ya podrás integrar Firebase Hosting con  GitHub para automatizar tus despliegues.


Instalación de Firebase Tools

Para explicar los siguientes pasos voy a dar por hecho que ya tienes tu código en un repositorio de GitHub, y que has completado el paso anterior creando tu proyecto en Firebase.

Lo primero que vamos a hacer es instalar Firebase Tools, para lo que necesitarás tener instalado npm en tu sistema:

Para instalar npm en Ubuntu ejecuta el siguiente comando en tu terminal:

sudo apt install npm


Si por el contrario utilizas Mac puedes seguir esta guía para instalar npm y Node.js.

Comprobamos que npm se ha instalado correctamente con el siguiente comando:

npm -v


Si nos devuelve el número de versión significa que se ha instalado correctamente.

Ahora vamos con la instalación de Firebase Tools:

sudo npm install -g firebase-tools


(Con el flag -g le estamos indicando al instalador que instale firebase-tools de forma global en nuestro sistema.)


Inicialización de Firebase Tools

Ahora que ya tenemos instalado Firebase Tools, vamos a iniciar sesión con el siguiente comando:

firebase login

Si ya habías iniciado sesión con otra cuenta de Firebase puedes ejecutar firebase logout y volver a iniciar sesión con la nueva cuenta.

Sigue las instrucciones que recibirás en tu terminal para completar el inicio de sesión.

Una vez hayas iniciado sesión correctamente, navega a la raíz de tu proyecto e inicializa Firebase con el siguiente comando:

firebase init

Lo siguiente que nos pedirá es que seleccionemos los servicios de Firebase que vamos a utilizar, en nuestro caso seleccionaremos la opción: "Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys".


Configuración de Firebase Tools

Ahora que ya tenemos configurados los servicios de Firebase que vamos a utilizar, pasamos a la configuración del proyecto. A la siguiente pregunta que nos hace la terminal seleccionamos la opción de "Use an existing project":

En el siguiente paso seleccionamos nuestro proyecto de Firebase:

Usaremos el directorio build/web como directorio public, respondemos sí a "Configure as a single-page app", y sí a "Set up automatic builds and deploys with GitHub".

Al seleccionar esta última opción nos pedirá iniciar sesión en nuestra cuenta de GitHub mediante Firebase CLI.

Después de autenticarnos nos pedirá en la terminal que indiquemos el nombre del repositorio de GitHub para el que queremos configurar los despliegues. En este caso debemos indicar el nombre del proyecto con el siguiente formato TU_NOMBRE_DE_USUARIO/NOMBRE_DE_PROYECTO.

A la pregunta "Set up the workflow to run a build script before every deploy?" respondemos sí, lo que nos permitirá definir el script que queremos ejecutar en la siguiente pregunta.

A la pregunta "What script should be run before every deploy?" respondemos con lo siguiente:

sudo snap install flutter --classic && flutter config --enable-web && flutter build web -t lib/main_prod.dart --release


No te preocupes por el significado de cada comando porque lo voy a explicar más en detalle en el siguiente apartado.

Después nos preguntará si queremos que se haga un despliegue automáticamente cada vez que se realize el merge de un PR, a lo que respondemos sí.

Por último nos preguntará cuál es la rama que utilizamos para desplegar en producción, en mi caso es la rama "main".


Configurando los despliegues con GitHub Actions

Y ahora llega la parte más interesante: configurar los despliegues automáticos en base a las acciones que hagamos en GitHub, ya sea crear un pull request o hacer un merge contra la rama "main".

En este ejemplo voy a configurar un despliegue hacia un entorno de test cada vez que se cree un pull request en nuestro repositorio de GitHub, y un despliegue a producción cada vez que se haga un merge contra la rama "main".

Dentro de nuestro repositorio local navegamos a la carpeta “.github/workflows”. Dentro de esta carpeta nos encontraremos dos archivos:

  • firebase-hosting-merge.yml
  • firebase-hosting-pull-request.yml

El primero se encarga de ejecutar una acción cada vez que se realiza un merge, y el segundo cada vez que se genera un pull request.

Lo siguiente que haremos es abrir el archivo "firebase-hosting-merge.yml".

La primera parte del archivo en la que nos vamos a fijar es la siguiente:

Estas líneas están indicando a GitHub que debe realizar dicha acción cuando se añada nuevo código a la rama main.

Lo siguiente que haremos es buscar la línea donde está el comando que hemos indicado en el proceso de configuración anterior: "sudo snap install flutter --classic && flutter config --enable-web && flutter build web -t lib/main_prod.dart --release".

Delante de esta línea veremos que se encuentra el comando “- run:” lo que indica a GitHub Actions que debe ejecutar la instrucción indicada después de los dos puntos. Lo que vamos a hacer es separar nuestra instrucción en diferentes líneas para mejorar la legibilidad del archivo y poder explicar un poco mejor que hace cada una.

sudo snap install flutter –classic: Instala Flutter para poder ejecutar el comando de build y poder así desplegar el resultado de dicho build en Firebase.

flutter config –enable-web: Habilita el entorno web de Flutter para poder hacer el build de la aplicación web.

flutter build web -t lib/main_prod.dart –release: Con este comando hacemos el build de nuestra aplicación web con el entorno de producción. El flag -t indica donde está ubicado el archivo main de nuestra aplicación. En mi caso es “lib/main_prod.dart” porque es ahí donde tengo configurado el entorno de producción. Si no es tu caso puedes indicar otro archivo o no introducir este flag si utilizas el archivo main por defecto (main.dart).

Tras separar nuestras instrucciones el archivo debería quedar de la siguiente manera:

Otra parte muy importante del archivo es la línea “channelId: live” que indica a Firebase que despliegue en el entorno de producción.

El siguiente paso será hacer lo mismo con el archivo “firebase-hosting-pull-request.yml” que quedaría de la siguiente manera:

Verás que en este archivo lo que desencadena la acción es un pull request en cualquier rama:

También he cambiado el entorno de build a “main_staging.dart” ya que esta acción despliega contra el entorno de prueba de Firebase Hosting al no estar la línea “channelId: live”.


Con todo esto ya deberías poder desplegar a Firebase Hosting simplemente haciendo pull requests o merge contra la rama master siempre que el despliegue sea hacia producción.

Sobre el autor
Arturo Grau

Enjoyed this read?

Stay up to date with the latest video business news, strategies, and insights sent straight to your inbox!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.