Cuando creamos nuestras aplicaciones, usando una librera o framework, llega el momento donde deseamos verla desplegada en algn entorno o algn hosting gratuito o de pago.

Para ello lo que normalmente hacemos es generar el build de la aplicacin ejecutando el siguiente comando:

Luego subimos los archivos al hosting o entorno usando FTP, hablando de lo comnmente conocido para desarrolladores que hace tiempo publican sus cambios o la aplicacin a produccin. Aunque ahora existen nuevas formas automatizadas para facilitarnos la vida.

Hablando del proceso anterior (por FTP), este es muy manual, porque cada vez que deseamos subir nuestros nuevos cambios, debemos generar el build y actualizar los archivos.

Existen herramientas como Github Actions que nos ahorran ese trabajo, permitindonos desplegar nuestra aplicacin a un hosting gratuito como Github Pages, de forma automatizada, cada vez que ejecutamos algn evento desde nuestra terminal de comandos como el push de nuestro repositorio.

Puedes ampliar la informacin sobre el despliegue con Github Actions en mi otro artculo, donde te explico ademas un poco sobre CI/CD.

Cmo despliego mi aplicacin?

Una vez tenemos nuestra aplicacin creada y queremos realizar el proceso de despliegue a algn entorno, debemos hacer una configuracin manual para luego, con Github Actions, todo se realice de forma automatizada.

Para facilitarnos la configuracin usaremos el paquete de gh-package, y para esto ejecutaremos:

Configuramos nuestro package.json

Nota: Debemos asegurarnos que colocamos en el homepage el nombre del repositorio correctamente. En este caso estoy usando este: deploy-react-example.

Hacemos deploy de nuestra aplicacin:

Subimos los cambios a nuestro repositorio:

En la pestaa settings del repositorio en Github puedes en pages revisar cul ser la url que Github cre de tu repositorio:

Y ejecutando el comando para despliegue, ver tus cambios en Github pages, aunque este an es un proceso manual.

En la pestaa de GitHub Actions en nuestro repositorio de GitHub, podemos ver varias plantillas para hacer el despliegue. Es bueno usar alguna de las opciones sugeridas, dependiendo de que herramienta vayas a emplear para hacer el despliegue.

Para este caso vamos a crear nuestra plantilla manual o nuestro flujo de trabajo.

• Primero vamos a crear en nuestro proyecto, en la raz una carpeta llamada: .github.
• Dentro de la carpeta .github crearemos otra carpeta llamada: workflows
• Dentro de la carpeta crearemos un archivo llamada deploy.yml

En el archivo deploy.yml, es donde realizaremos la configuracin.

• En este archivo en el on: en branches debemos colocar el nombre de nuestra rama por defecto: main

Guardamos nuestro archivo, hacemos un commit y un push

Si revisamos en la pestaa Actions, empezar nuestro despliegue.

Cuando el despliegue ha sido exitoso, vamos a ver que todos los checks de los jobs funcionan correctamente.

Una vez terminen los jobs podemos revisar nuestra pgina, haciendo uso del link que Github Pages gnero para nosotros, por ejemplo: https://vanessamarely.github.io/deploy-react-example/.

Cada vez que realicemos un cambio en nuestro repositorio y hagamos push de ellos, Github Actions entrar en accin, ejecutando los jobs, mostrando los checks de los pasos exitosos.

En el caso de que alguno falle, podremos ir a revisar en el log y solucionar el problema en nuestro repositorio y volver a subir los cambios (push), para que puedan ejecutarse los jobs nuevamente.

Podemos verificar que los cambios ya fueron realizados en el entorno de Github Pages, revisando su estado, para ello en la pagina de nuestro repositorio, damos clic en Environments.

Se nos abre la pgina de deployments y podemos verificar el estado del logo de cada despliegue.

Haciendo clic en alguno de los enlaces de View Deployment, podemos verificar en ese punto cal fue el resultado del despliegue.

El repositorio usado para este ejemplo solo contiene la instalacin del create-react-app y un cambio de mensaje en el componente App.

https://github.com/vanessamarely/deploy-react-example

Conclusin

Github Actions nos facilit el despliegue en nuestras aplicaciones de una forma amena y sencilla. Con Github pages no solo podemos tener un hosting gratuito de nuestro proyectos, que sumado a la integracin de Github Action podemos realizar el proceso de CI/CD automatizado.

Espero este artculo sea de ayuda, para que con l puedan hacer el despliegue de tu aplicacin de React fcilmente.

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