Configurando Gitlab CI/CD Pipeline con un linter y pruebas en un proyecto de React

Introducción

La configuración de un pipeline de CI/CD en un repositorio es una buena práctica para estar seguros que nuestro código esté en el mejor estado posible antes de hacer un deploy a un servidor de producción. En este tutorial vas a aprender a configurar tu primer pipeline de pruebas en Gitlab.

Las partes de este tutorial:

1. Crear proyecto de React desde cero.
2. Configurar un linter para el código.
3. Configurar pruebas unitarias en React.
4. Crear repositorio de Gitlab.
5. Configurar CI/CD Pipeline.
6. Probar el funcionamiento del pipeline.
7. Cierre.

1. Crear proyecto de React desde cero

Para este tutorial estarás utilizando React, una biblioteca de Javascript para construir interfaces de usuario, una de las mas populares en la industria en los últimos años.

ReactJS

Instalando NodeJS

Primero, debes tener instalado NodeJS en tu computadora. Si no lo tienes instalado, descarga la última versión aquí. Para comprobar que ya está configurado correctamente en nuestras computadoras, corre el siguiente comando:

node --version

Y deberías tener de resultado la versión que instalaste.

Creando el proyecto

Una vez configurado Node, puedes crear tu proyecto de React en tu directorio de preferencia. Para iniciar el proyecto, te apoyarás de NPM, el administrador de paquetes de Node, que viene instalado por defecto junto a Node.

Para crear el proyecto de React, debes correr el siguiente comando:

npx create-react-app pipeline-tutorial

Lo anterior crea un nuevo proyecto de React, llamado “pipeline-tutorial” con todos los archivos y directorios necesarios para poder correr en el navegador. Una vez se termine la creación del proyecto, puedes correr el siguiente comando dentro de la nueva carpeta de tu proyecto para abrir el proyecto en el navegador:

npm start

Se abrirá una nueva ventana en tu navegador web de preferencia, diciendo que el proyecto está listo para desarrollo. Una vez terminado este paso, puedes continuar con la configuración del linter para el código.

2. Configurar un linter para el código

Antes de seguir, ¿qué es un linter?

De acuerdo a freeCodeCamp, un linter (linterna en español) es un programa que analiza tu código para encontrar errores programáticos o de estilo. Esto puede ahorrarte tiempo y ayudarte a escribir un código más claro y limpio para que cualquier desarrollador pueda leerlo de una manera mucho mas sencilla. Las linternas van a través de tu código y remarcan: discrepancias de formato, irregularidades en el estándar, posibles problemas de lógica, etc.

ESLint + React + airbnbJS

Configurando el linter

El linter que usarás en este proyecto va a ser ESLint, uno de los linters más usados por los desarrolladores de Javascript. Para instalarlo en tu proyecto, corre el siguiente comando, el cuál instalará eslint junto a todas sus dependencias de manera global en tu computadora:

npm install -g eslint

Una vez instalado, debes configurar el linter para que reconozca las reglas que vayamos a definir. Para esto, corre el siguiente comando, que generará un archivo llamado .eslintrc.json con configuraciones que vienen por defecto:

eslint --init

El comando anterior va a realizar una serie de preguntas para poder configurar de manera correcta el linter en tu proyecto.

Primero va a desplegar 3 opciones, con la pregunta: “How would you like to use ESLint?”. Selecciona la tercera opción para que eslint revise la sintaxis, encuentre problemas y refuerce el estilo de código.

En seguida, nos va a hacer otra pregunta: “What type of modules does your project use?”. Como es un proyecto de React, debes seleccionar la primera opción, “JavaScript modules (import/export)”. Siéntete libre de seleccionar otra opción si tienes curiosidad de qué es lo que haría.

Después de seleccionar la opción, te preguntará sobre qué framework utilizarás, selecciona React.

Preguntará si tu proyecto usa TypeScript, como no usarás este lenguaje, puedes dar enter, indicando una respuesta negativa.

La siguiente pregunta: “Where does your code run?” Selecciona Browser, ya que correrá en el navegador.

No te preocupes, ya casi acabas de configurar, solo unas preguntas más. “How would you like to define a style for your project?” la responderás con “Use a popular style guide”, para hacer la configuración más rápida.

En seguida te desplegará una lista de posibles guías de Javascript populares en el mundo. Para este tutorial, selecciona la de Airbnb.

Una de las últimas preguntas será “What format do you want your config file to be in?”, y seleccionaremos JSON para este tutorial.

Las últimas dos preguntas serán para instalar dependencias faltantes en el proyecto para poder usar el linter de Airbnb, a las cuales indicaremos respuestas afirmativas.

Una vez instaladas las dependencias habrás terminado de configurar ESLint con las reglas de Airbnb, ¡Felicidades! Tu archivo .eslintrc.json estará lleno con las configuraciones que estuviste ingresando en los pasos anteriores. Debería lucir algo como esto:

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "plugin:react/recommended",
        "airbnb"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 11,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
}

Una última configuración que se debe realizar manualmente es añadir una regla para que eslint acepte jsx en archivos .js ya que el proyecto fue iniciado con create-react-app . Esto lo harás agregando "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }] a la sección "rules" de tu archivo .eslintrc.json .

Corriendo el linter en tu proyecto

Una vez terminadas todas las configuraciones necesarias para el linter, puedes correr el siguiente comando, para detectar todos los errores de estilo de código en nuestro proyecto:

eslint src/**/*.js

Una vez terminado el proceso, en la terminal te saldrán todos los problemas de estilo en nuestro proyecto.

3. Configurar pruebas unitarias en React.

Ya que iniciaste tu proyecto para este tutorial con create-react-app , tu proyecto ya tiene configurada una suit de pruebas lista para usarse. La biblioteca que viene por defecto es Jest.

Biblioteca Jest para pruebas, creada por Facebook.

Añadiendo Pruebas

Jest detecta que un archivo contiene pruebas si su extensión es .test.js . Como puedes ver, en el directorio src/ hay un archivo llamado App.test.js , el cual contiene una prueba por defecto. Puedes aprender más de pruebas con Jest en esta página.

Vas a agregar una prueba solamente demostrativa para este tutorial. En el directorio de tu proyecto, en src, agrega un archivo llamado demostrativo.test.js .

En este archivo agrega el siguiente código:

import React from 'react'
  
describe('2 + 2', () => {
        it('Should be 4', () => {
                expect(2+2).toBe(4);
        });
        it('Should not be 3', () => {
                expect(2+2).not.ToBe(4);
        });
});

En esta prueba podemos ver 2 funciones: describe e it . describe es la que indica que un nuevo set de pruebas comienza, este grupo debe contener pruebas muy similares, tal vez para una misma función. it describe una prueba individual. En expect va la función a probar, en toBe va el valor que se espera obtener de la función.

4. Crear repositorio de Gitlab.

Para crear un repositorio en Gitlab primero deberás tener una cuenta activa en la plataforma. Ua vez con tu cuenta creada y validada, sigue los siguientes pasos para crear el repositorio:

Como debe quedar el formulario para crear nuevo repositorio.

1. Entramos a Gitalb.com
2. Damos click en “New Project”
3. Llenamos todos los campos necesarios para poder crear el nuevo repositorio para nuestro proyecto.
4. Creamos el nuevo proyecto dando click al botón.

Enlazar el proyecto con el repositorio

En tu proyecto de React, al crearlo, se inició un repositorio de git. Para enlazar tu repositorio local con el remoto creado en Gitlab, primero debes ir a tu repo en Gitlab y dar click en “Clone”, y copiar el valor de “Clone with HTTP” (también puede ser con SSH si tienes tus llaves ssh configuradas correctamente). Una vez copiado el valor para clonar, ve a la terminal y corre el siguiente comando para enlazar los repositorios:

git remote add origin <el valor que copiaste de gitlab>

Una vez enlazados, podemos hacer commit de nuestros cambios con los siguientes comandos:

git add -A (Añadimos todos los cambios por registrar)

git commit -m "initial commit" (Se registran los cambios con un comentario)

5. Configurar CI/CD Pipeline.

Ahora comenzarás a configurar la parte principal de este tutorial: el CI/CD Pipeline de Gitlab, per primero hay que entender cómo funciona.

El funcionamiento del pipeline de Gitlab es muy parecido al de Docker. Al iniciar el proceso de la tubería se instala una imagen de Docker, creando así un contenedor con diferentes etapas en el recorrido de la tubería. Estas etapas (o stages en el lenguaje de Docker) las puedes personalizar tanto como Docker lo permita. En cada una de estas puedes realizar diferentes tareas, definidas por comandos de shell que ocuparías en tu proyecto. Comenzamos.

Antes que nada, hay que crear un archivo de configuración de Gitlab, en el que indicarás todas las etapas que se realizarán. Crea un nuevo archivo en la raíz de tu proyecto, llamado .gitlab-ci.yml .

El formato de este nuevo archivo es YAML, puedes encontrar más información aquí.

La configuración para este proyecto es algo como el código siguiente:

image: mhart/alpine-node:11
cache:
  paths:
    - node_modules/
    - .yarn
stages:
  - init
  - test
  - build
# FE stands for Front-End
fe:init:
  stage: init
  script:
    - yarn config set cache-folder .yarn
    - yarn install
fe:test:
  stage: test
  needs: ["fe:init"]
  before_script:
    - yarn config set cache-folder .yarn
    - yarn install
  script:
    - yarn run test
fe:build:
  stage: build
  needs: ["fe:test"]
  before_script:
    - yarn config set cache-folder .yarn
    - yarn install
  script:
    - yarn run build

En el código de arriba, definiste qué imagen de Docker usará el pipeline de Gitlab. También describiste tus diferentes etapas, que son 3: init, test y build. En init se verificará que las dependencias pueden ser instaladas correctamente. En test se revisará que pasen todas las pruebas escritas en tus archivos .test.js. Y, finalmente, en la última etapa, build, se comprobará que se puede compilar el proyecto para producción correctamente.

6. Probar el funcionamiento del pipeline.

Para probar el funcionamiento del pipeline de Gitlab, solamente haz push a cualquier rama de tu repositorio de Gitlab creado anteriormente. Verás cómo hay una sección hasta arriba del repositorio con el estado de la tubería y sus diferentes etapas.

Vista de pipeline exitoso en Gitlab.

7. Cierre

Muy bien, has terminado este tutorial, ¡Felicidades! Ahora sabes cómo configurar una tubería básica para tus repositorios en Gitlab con React. Tal vez te habrás dado cuenta que no añadiste el linter a tu archivo .gitlab-ci.yml , esto fue a propósito, será tu actividad añadirlo al las etapas de pruebas, para que pongas en práctica lo que aprendiste en este tutorial.