React

Para implementar Integración continua en un repositorio de Net debemos:

1. Crear el Actions

Desde Github

1. Debemos dirigirnos a la pestaña actions
2. Seleccionar cualquier workflow
3. Reemplazar el contenido del archivo por el adecuado.

Si ya tienes workflows

1. Debes crear un nuevo archivo en la carpeta .github/workflows
2. Reemplazar el contenido del archivo por el adecuado.

2. Actions React

name: React CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
env:
  SKIP_TEST: 'false'
jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [18.x] ## Siempre se recomienda la versión lts
    steps:
    - uses: actions/checkout@v3
    - uses: architecture-it/actions@react-base
      with:
        matrix_version: ${{ matrix.node-version }}
        skip_test: ${{ env.SKIP_TEST }}
        packages_token: ${{ secrets.ARQUITECTURA_DEPLOY }}
        # Fontawesome Es una dependencia obligatoria del stylesystem
        # El secret esta habilitado a nivel organización
        fontawesome_token: ${{ secrets.NPM_FONTAWESOME_KEY }}
        # Recomendamos que ci esté activado, 
        # Ya que comprueba que eslint no rompa para prd
        # ci: true 
  sonarqube:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: SonarQube Analyzer
        uses: architecture-it/actions@sonarqube
        with:
          sonar_url: ${{ secrets.SONAR_HOST_URL }}
          sonar_token: ${{ secrets.SONAR_TOKEN }}
          skip_test: ${{ env.SKIP_TEST }}
          sonar_code: 'Js'

3. A tener en cuenta

1. El actions se va a ejecutar en los momentos que describa el campo on

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

En este caso se ejecutará cuando ocurra un push o un pull request en la rama main. Esto es modificable dependiendo de lo que necesite el equipo.

1. El Actions realiza:

   1. Registra npm de github packages
   2. Registra FontAwasome
   3. Compila el código.
   4. Corre los test.
   5. Realiza el análisis de SonarQube.

   4. Proyectos Legacy

En el caso de proyectos legacy necesitamos en algunas ocasiones agregar --legacy-peer-deps o --force, debemos agregarlo al proyecto y subirlo al repositorio. ( descomentar/quitar el ; según corresponda)

.npmrc

; En el caso de ser necesario
;legacy-peer-deps=true
; En el caso de ser necesario
;force=true