⚡ Despliega una aplicación de react a github pages con github actions facilmente
Tags: react, github, javascript, webdev
Published: 2020-10-12 20:54:08

En este post te mostraré los pasos para **desplegar tu aplicación realizada en react sobre github pages**. Además te mostraremos como hacer el proceso de despliegue de forma automática cada vez que realices cambios y lo envíes al repositorio tu aplicación web pueda verse reflejada con los nuevos cambios.
Realizar esto te ahorrará tiempo y lo mejor, todos podrán ver los cambios que tiene tu aplicación.

##Que es github pages?
Github pages es un servicio de hosting en el cual podemos publicar páginas estaticas desarrolladas con js, css, html, en el cual podemos utilizar distintas librerías o frameworks como:
- React
- Vue
- Angular
- Svelte 

En esta oportunidad veremos como subir una aplicación utilizando react con la cli **create-react-app**.

##Comencemos
Para poder comenzar debemos tener instalado node, también la cli de react llamada **create-react-app**.
**1. Crear una aplicación**
Utilizamos el comando y le asignamos un nombre en este caso el nombre de mi aplicación tiene por nombre "deploy-react-github-pages-with-ci"

```console
> create-react-app deploy-react-github-pages-with-ci
```
Una vez creado el proyecto podemos ver la estructura inicial la cual nos crea.

![Captura](https://dev-to-uploads.s3.amazonaws.com/i/uv68o5j6ciiy1281gvim.PNG)
 
También necesitamos instalar el paquete npm **gh-pages** como dependencia de desarrollo.

```console
> npm i -D gh-pages
```

**2. Crear los archivos necesarios**

En la raíz de nuestro proyecto creamos una carpeta llamada **.github**, posteriormente dentro de ella otra carpeta que tenga por nombre **workflows**.
Finalmente agregamos un nuevo archivo con extensión **.yml**, se puede poner el nombre que se quiera, en este caso se denominará **deploy.yml**.

![efj4ew5p550g0192jwpjwp20924fj02j](https://dev-to-uploads.s3.amazonaws.com/i/gqb9y8wt7kaxgdl4x1ux.PNG)
  
**3.Configurando nuestro repositorio**

Para poder acceder y publicar nuestro proyecto necesitamos primeramente obtener un token el cuál nos servirá para seguir avanzando.

Los pasos para configurar son los siguientes:
* 1. Vamos a las configuraciones de nuestra cuenta, no la del repositorio ya que si vamos allí no encontraríamos lo que buscamos.
* 2. Seleccionamos la opción **Developer settings** y accedemos ah aquella.

  ![github932930303j2](https://dev-to-uploads.s3.amazonaws.com/i/a4goirchnt36xskitgvi.PNG)

* 3.Uno ves dentro nos aparecerán otras opciones entre las cuales elegimos la siguiente: **Personal access tokens**. Nos saldrá la opción de crear un nuevo token, lo generamos y una vez echo esto lo mantenemos copiado para usarlo en las configuraciones de nuestro repositorio.

![github92350295320](https://dev-to-uploads.s3.amazonaws.com/i/bbc0xk1yrob1h0946rzw.PNG)

 * 4. Finalmente nos vamos a la configuración de nuestro repositorio, asignamos un nombre a nuestra clave secreta y en el **value** copiamos nuestro token generado anteriormente

![github92302902](https://dev-to-uploads.s3.amazonaws.com/i/f0k9ovmuryntd8mn7ev9.PNG)

##Configuración de nuestra aplicación de react
 * 1. Para realizar esto lo primero es ir al **package.json** y agregar una nueva propiedad llamada **homepage** en la cuál recibe como valor el nombre de donde se va desplegar nuestra aplicación.
¿Como generamos este nombre del hosting?, normalmente nuestro repositorio tiene la estructura siguiente 

**"github.com/jhony-24/deploy-react-github-pages-with-ci"**

Si queremos usarlo para subir nuestro aplicación debemos cambiarlo por lo siguiente:

**"jhony-24.github.io/deploy-react-github-pages-with-ci/"** 

![ápkfáfjé](https://dev-to-uploads.s3.amazonaws.com/i/szrswj4x8ribvo3sztzy.png)

* 3. En nuestro script del package.json agregamos las siguientes líneas: predeploy y deploy las cuales nos servirán para publicar nuestra aplicación.
La variable de entorno *$GH_TOKEN* es el token que generamos en nuestra configuración la cual nos permitirá tener acceso a nuestro repositorio.
![afpojapojfpqjow](https://dev-to-uploads.s3.amazonaws.com/i/by2adsdi6paiylyxziwf.png)
 
## Configurando las acciones  
En nuestro archivo creado **deploy.yml** procedemos a realizar la siguientes configuración 
![aagñepwj4302d](https://dev-to-uploads.s3.amazonaws.com/i/bc848bujgm56sjs01sln.png)

Veamos más a fondo como funciona.

```yaml
name: Deploy react app
```
Es el principal nombre el cual se asigna a nuestro flujo de trabajo.

```yaml
on:
 push: 
   branches:
     - main
```
Nos permite crear eventos en este caso las acciones se realizarán cuando se suba las confirmaciones a la rama **main** o la principal en la cual estamos trabajando, si queremos podemos cambiar a otra rama para hacer el despliegue por ejemplo, crearíamos una rama **deploy** y cada vez que realicemos un confirmación a esta rama se ejecutará los flujos de trabajos.

```yaml
jobs:
 deploy:
  name: deploy app
  runs-on: ubuntu-latest
  strategy:
   matrix:
    node-version: [ "12.x" ]
```
Como su nombre lo indica, son los trabajos que se realizarán.
En nuestro configuración solo tenemos un trabajo llamado **deploy** , aunque se puede tener muchos más.
Dentro de cada trabajador asignamos en que maquina va a correr nuestros comandos. 
Y asignamos una matriz de versiones de node en las cuales correrá en este caso solo usamos para la versión 12.
 
```yaml
steps:
  - uses: actions/checkout@v2
  - uses: actions/setup-node@v1 
    with:
      node-version: ${{matrix.node-version}}
```

Usamos las acciones de node para poder ejecutar los comandos, véalo en este caso como si se instala programas que nos ayudan a ejecutar nuestros comandos y sean reconocibles en el sistema.

```yaml
- name: install packages
  run: npm install
```
Instalamos nuestras dependencias.

```yaml
- name: registry github user
  run: |
    git config --global user.email <email>
    git config --global user.name <name>
```
Al ejecutar en una maquina el despliegue donde no estemos registrados con nuestra cuenta no funcionaría por ello antes de hacer el despliegue nos registramos (los pasos tienen un nombre para poder identificarlos).

```yaml
- name: deploy the app
  run: npm run deploy
  env:
   GH_TOKEN: ${{ secrets.GH_TOKEN }}
```

Finalmente ejecutamos el comando para publicar nuestra aplicación. 
Usamos una variable de entorno llamada **GH_TOKEN** la cual tiene como valor el token que anteriormente se creó y nos permitirá conectarnos a nuestra cuenta para realizar la acción.

## Enviando los cambios al repositorio
Una vez completado todo lo anterior vamos a la consola y agregamos los cambios al repositorio.
```console
> git add .
```
```console
> git commit -m "add first deploy"
```

```console
> git push origin main
```

Una vez subido los cambios al repositorio, vamos a nuestro repositorio en la opción **actions** si todo marcha bien podemos ver el siguiente resultado.
![spo4pojgrpj](https://dev-to-uploads.s3.amazonaws.com/i/bfqqg9x6neyabptkuome.PNG)

Ahora como vemos nuestro aplicación? Vamos a la opción **settings** y buscamos **Github Pages**

Accedemos al link y podemos ver el siguiente resultado.![asfaffe](https://dev-to-uploads.s3.amazonaws.com/i/2jrxoywjmr55w9enfio4.PNG)
 

![deployTest1](https://dev-to-uploads.s3.amazonaws.com/i/sak8xwf1iqnadcpf2hwf.PNG)
  
***Referencias***
* [Github actions](https://docs.github.com/en/free-pro-team@latest/actions)
* [Github actions syntax](https://docs.github.com/en/free-pro-team@latest/actions/reference/workflow-syntax-for-github-actions)
* [Learn YAML](https://www.codeproject.com/Articles/1214409/Learn-YAML-in-five-minutes)