DEV Community

Cover image for Despliegue de tu aplicación en Angular usando Github Actions
Vanessa Aristizabal
Vanessa Aristizabal

Posted on

Despliegue de tu aplicación en Angular usando Github Actions

Cuando estamos creando nuestras aplicaciones sean de nivel personal o corporativo, llega un punto de nuestro desarrollo en el que se debe pensar donde alojar nuestra aplicación. En esta decisión entran varios factores a evaluar, sean monetarios o de otra índole que influyen, de acuerdo a las necesidades de nuestro proyecto, en cuanto a servidor, dominio, u otras operaciones que requieran el despliegue en algún ambiente en particular.

En proyectos personales algunas veces no contamos con algunos recursos para adquirir un dominio, un hosting (o alojamiento), un servidor, entre otros, y ahora tenemos a nuestra disposición una serie de herramientas gratuitas que nos pueden ayudar a tener un espacio de alojamiento gratuito, o un servicio que nos permite hacer el despliegue de nuestro proyecto.

Github, nos permite alojar, tener un dominio y desplegar nuestra aplicación, haciendo uso de Github pages y Github Actions.

Cuando deseemos publicar en producción, en un servidor, o subir a un hosting nuestro proyecto, debemos generar unos archivos que serán minificados, transpilados y comprimidos. Estos archivos en Angular los generamos ejecutando el siguiente comando:

Alt Text

En algunas ocasiones podemos obtener algún error generando nuestra carpeta dist, que es la que contendrá todo nuestro proyecto, usando el siguiente comando podemos solucionarlo o solo instalando de nuevo los paquetes(npm, nvm o yarn).

Alt Text

Al generar nuestra carpeta dist, el contenido que se genera es el que podemos publicar en nuestro GitHub pages.

Para hacerlo de una forma automatizada, que podamos compilar y desplegar nuestra aplicación al trabajar en nuestro repositorio y publicar los cambios, podemos hacer uso de Github Actions.

GitHub Actions o Acciones de GitHub

Nos permite automatizar, personalizar y ejecutar el flujo de trabajo de nuestro proyecto para subirlo en un repositorio con GitHub Actions.

Alt Text

¿Cómo despliego mi aplicación?

Teniendo nuestra aplicación creada, y en nuestro repositorio de Github, vamos a crear una rama con el nombre: gh-pages.
Esta rama es la que configuramos para subir nuestros archivos de HTML, CSS y Javascript, que es la aplicación que quedará publicada.

Alt Text

Podemos crear nuestra rama directamente desde la página de GitHub o podemos desde nuestra terminal crear nuestra rama. La idea de esta rama es que este vacía, entonces es necesario limpiarla, para eso podemos hacer lo siguiente, por líneas de comandos:

Alt Text

Lo anterior nos ayuda a borrar todos los archivos, una vez realicemos esto podemos guardar estos cambios:

Alt Text

¡Tenemos nuestra rama lista!

Incluiremos un script en nuestro archivo: package.json en nuestra rama “main

Nos moveremos a nuestra rama main, con el siguiente comando:

Alt Text

En la sección de scripts de nuestro archivo package.json, vamos a incluir lo siguiente:

Alt Text

La dirección base tendrá el nombre de nuestro repositorio--base-href=//" .

Guardaremos nuestro cambios, hacemos un commit y un push a nuestro repositorio main.

Alt Text

Estamos a pocos pasos de nuestro despliegue.

Si vamos a la pestaña de GitHub Actions en nuestro repositorio de GitHub, podemos ver varias plantillas para hacer el despliegue. Es bueno usar las opciones, pero vamos a crear nuestra plantilla manual.

  • Primero vamos a crear en nuestro proyecto, en la raíz una carpeta llamada: “.github”.

  • Dentro de la carpeta “.github”, vamos a crear otra carpeta llamada: “workflows”.

  • Dentro de la carpeta crearemos un archivo llamado build-deploy.yml.

  • En el archivo es donde hacemos la configuración, le decimos a GitHub que pasos debe seguir para hacer el despliegue de nuestra aplicación.

Alt Text

  • En el archivo build-deploy.yml, en branches debemos colocar el nombre de nuestra rama por defecto: main.

  • En los jobs, en la parte del name para el branch debe ir gh-pages y en el folder se coloca el nombre de la carpeta que se genera dentro de la carpeta dist, en este caso será: workshop.

Guardamos nuestro archivo, hacemos un commit y un push:

Alt Text

Si revisamos en la pestaña “Actions”, empezará el despliegue.

Alt Text

Cuando todo el despliegue funcione bien, vamos a ver que todos los checks de los jobs funcionen perfectamente.

Alt Text

Una vez terminen los jobs podemos revisar nuestra página.

La URL sigue la siguiente estructura: https://.github.io/.

Este es un ejemplo de un repositorio al que le realicé el despliegue con Github Actions:

https://vanessamarely.github.io/angular-kanban-workshop/

El repositorio es: https://github.com/vanessamarely/angular-kanban-workshop

Alt Text

Conclusión

En la actualidad podemos hacer uso de diferentes herramientas para hacer el despliegue de nuestras aplicaciones, y Github Actions nos permite hacerlo de una forma sencilla, desde el repositorio de nuestra aplicación en Github. 

Espero este artículo sea de ayuda a los lectores, para que con él puedan hacer uso de esta gran herramienta de Github y puedan hacer muchos despliegues de sus proyectos.

Te invito a seguirme en twitter con el handle: @vanessamarely

Discussion (0)