CI/CD para proyectos Angular con GitHub Actions

Automatizar el proceso de build, test y deploy de tu aplicación Angular no es un lujo — es una necesidad. GitHub Actions hace que sea accesible para cualquier proyecto.

El workflow básico

Un pipeline CI/CD para Angular típicamente incluye: instalar dependencias, ejecutar linting, correr tests, hacer build y desplegar.

name: CI/CD Pipeline

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

jobs:
  build-and-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 run lint
      - run: npm run test -- --no-watch --code-coverage
      - run: npm run build

Caché de dependencias

La clave para pipelines rápidos es cachear node_modules. Con actions/setup-node y la opción cache: 'npm', esto es automático.

Deploy automático

Para desplegar en plataformas como Vercel, Netlify o Firebase, agrega un step adicional:

  deploy:
    needs: build-and-test
    if: github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npm run build
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: ${{ secrets.GITHUB_TOKEN }}
          firebaseServiceAccount: ${{ secrets.FIREBASE_SA }}
          channelId: live

Preview deployments en PRs

Una práctica excelente es generar un deploy de preview para cada Pull Request. Esto permite que revisores vean los cambios en un entorno real antes de aprobar.

Protección de ramas

Configura branch protection rules para que el merge a main solo sea posible si el pipeline pasa. Esto garantiza que el código en producción siempre cumple con los estándares de calidad.