0Pricing
Frontend Academy · Lección

GitHub Actions para frontend: lint, test y build

Escriba un YAML de workflow que instale dependencias, ejecute ESLint y los tests de Jest y compile la aplicación en cada pull request.

GitHub Actions para frontend: lint, test y build es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

¿Por qué CI para el frontend?

La integración continua ejecuta las pruebas, los linters y la compilación en cada push y pull request. Detecta regresiones antes de que lleguen a main. Es necesaria para cualquier equipo con más de un desarrollador.

Conceptos básicos de GitHub Actions

Los workflows son archivos YAML ubicados en .github/workflows/. Cada workflow contiene jobs que se ejecutan mediante activadores (push, pull_request y schedule).

# .github/workflows/ci.yml
name: CI
on:
  push:
    branches: [main]
  pull_request:
concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci
      - run: npm test

Almacenamiento en caché de dependencias

Almacene en caché node_modules (o las cachés de pnpm/yarn) para evitar reinstalarlas en cada ejecución. setup-node incluye compatibilidad integrada con la caché.

- uses: actions/setup-node@v4
  with:
    node-version: '20'
    cache: 'npm'   # or 'yarn' or 'pnpm'

Job de lint

Ejecute las comprobaciones de ESLint y Prettier. Haga que la compilación falle si se producen errores.

lint:
  runs-on: ubuntu-latest
  steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with: { node-version: '20', cache: 'npm' }
    - run: npm ci
    - run: npm run lint
    - run: npm run format:check

Job de pruebas

Ejecute Vitest o Jest. Genere informes de cobertura para facilitar la visibilidad.

test:
  runs-on: ubuntu-latest
  steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with: { node-version: '20', cache: 'npm' }
    - run: npm ci
    - run: npm test -- --coverage
    - uses: codecov/codecov-action@v4
      with:
        files: ./coverage/lcov.info

Job de compilación

Compile el paquete de producción. Súbalo como artefacto para los jobs de implementación posteriores.

build:
  runs-on: ubuntu-latest
  needs: [lint, test]
  steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with: { node-version: '20', cache: 'npm' }
    - run: npm ci
    - run: npm run build
    - uses: actions/upload-artifact@v4
      with:
        name: dist
        path: dist/
        retention-days: 7

Jobs en paralelo

El lint, las pruebas y la comprobación de tipos pueden ejecutarse en paralelo: Actions ejecuta cada job en su propio runner. Use needs: para imponer un orden (compilación después del lint y las pruebas).

Comprobación de tipos

Añada un job específico para comprobar tipos: tsc --noEmit. Detecta los errores de TypeScript antes del tiempo de ejecución.

typecheck:
  runs-on: ubuntu-latest
  steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with: { node-version: '20', cache: 'npm' }
    - run: npm ci
    - run: npx tsc --noEmit

Pruebas en matriz

Ejecute el job de pruebas con varias versiones de Node o sistemas operativos en paralelo.

test:
  strategy:
    fail-fast: false
    matrix:
      node: [18, 20, 22]
      os: [ubuntu-latest, windows-latest, macos-latest]
  runs-on: ${{ matrix.os }}
  steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with: { node-version: ${{ matrix.node }} }
    - run: npm ci && npm test

Pasos condicionales

Use if: para ejecutar pasos únicamente cuando se cumplan determinadas condiciones, por ejemplo, solo en la rama main.

- name: Deploy to staging
  if: github.ref == 'refs/heads/main'
  run: npm run deploy:staging

Secretos y variables

Almacene las claves de API y los tokens en los secretos del repositorio (Settings → Secrets). Acceda mediante secrets.NAME. Nunca haga commit de secretos en el repositorio.

- run: npm run deploy
  env:
    DEPLOY_TOKEN: ${{ secrets.DEPLOY_TOKEN }}
    AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}

Reglas de protección de ramas

En Settings → Branches, exija que el workflow de CI pase antes de permitir fusionar cambios en main. Combinado con revisiones obligatorias, es la medida de protección estándar de un equipo.

Comprobación rápida

¿Cuál es el propósito de cancel-in-progress: true en el bloque de concurrencia de un workflow de GitHub Actions?

Repaso: GitHub Actions para frontend

El YAML de los workflows se encuentra en .github/workflows/. Los jobs se ejecutan tras un push o un PR. Almacene en caché node_modules mediante setup-node. Jobs estándar: lint, typecheck, test y build. Ejecútelos en paralelo y use needs para controlar el orden. Use una matriz para probar varias versiones. Gestione los secretos mediante la configuración del repositorio. La protección de ramas exige que CI esté en verde antes de fusionar. Use cancel-in-progress para deduplicar ejecuciones.

Preguntas frecuentes

¿La lección «GitHub Actions para frontend: lint, test y build» es gratis?

Sí — el texto completo de «GitHub Actions para frontend: lint, test y build» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «GitHub Actions para frontend: lint, test y build»?

Escriba un YAML de workflow que instale dependencias, ejecute ESLint y los tests de Jest y compile la aplicación en cada pull request. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «GitHub Actions para frontend: lint, test y build»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. GitHub Actions para frontend: lint, test y build
  2. Implementación en Vercel, Netlify y Cloudflare Pages
  3. Variables de entorno en CI
  4. Comprobaciones automatizadas con Lighthouse
← Volver a Frontend Academy