0Pricing
Frontend Academy · Aula

GitHub Actions para frontend: lint, testes e compilação

Escrever um fluxo de trabalho YAML que instale dependências, execute o ESLint, execute testes Jest e compile a aplicação a cada pedido de alteração.

GitHub Actions para frontend: lint, testes e compilação é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

Por que usar CI no front-end?

A Integração contínua executa seus testes, verificações de estilo e compilação a cada envio e solicitação de alteração. Detecta regressões antes que elas cheguem à ramificação principal. É obrigatória para qualquer equipe com mais de um desenvolvedor.

Fundamentos do GitHub Actions

Os fluxos de trabalho são arquivos YAML em .github/workflows/. Cada fluxo de trabalho tem tarefas executadas por gatilhos (push, pull_request, 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

Armazenamento em cache de dependências

Armazene node_modules em cache (ou os caches do pnpm/yarn) para evitar reinstalá-los a cada execução. setup-node oferece suporte integrado a cache.

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

Tarefa de verificação de estilo

Execute as verificações do ESLint e do Prettier. Faça a compilação falhar quando houver erros.

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

Tarefa de testes

Execute o Vitest ou o Jest. Gere relatórios de cobertura para facilitar o acompanhamento.

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

Tarefa de compilação

Compile o pacote de produção. Envie-o como um artefato para as tarefas de implantação 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

Tarefas paralelas

As verificações de estilo, os testes e a verificação de tipos podem ser executados em paralelo — o Actions executa cada tarefa em seu próprio executor. Use needs: para impor a ordem (compilação depois das verificações de estilo e dos testes).

Verificação de tipos

Adicione uma tarefa dedicada à verificação de tipos: tsc --noEmit. Ela detecta erros do TypeScript antes da execução.

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

Testes em matriz

Execute a tarefa de testes com várias versões do Node ou sistemas operacionais em 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

Etapas condicionais

Use if: para executar etapas somente sob determinadas condições — por exemplo, apenas na ramificação principal.

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

Segredos e variáveis

Armazene chaves de API e tokens nos segredos do repositório (Configurações → Segredos). Acesse-os por meio de secrets.NAME. Nunca confirme segredos no repositório.

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

Regras de proteção de ramificações

Em Configurações → Ramificações, exija que o fluxo de trabalho de CI seja aprovado antes de permitir a mesclagem em main. Combinada com revisões obrigatórias, essa é a proteção padrão para a equipe.

Verificação rápida

Qual é a finalidade de cancel-in-progress: true no bloco de simultaneidade de um fluxo de trabalho do GitHub Actions?

Recapitulação: GitHub Actions para front-end

O YAML dos fluxos de trabalho fica em .github/workflows/. Os trabalhos são executados em um push ou PR. Armazene node_modules em cache por meio de setup-node. Trabalhos padrão: lint, verificação de tipos, teste e compilação. Execute em paralelo usando needs para definir a ordem. Use uma matriz para testar várias versões. Segredos por meio das configurações do repositório. A proteção de ramificações exige que o CI esteja aprovado antes da mesclagem. Use cancel-in-progress para eliminar execuções duplicadas.

Perguntas Frequentes

A aula “GitHub Actions para frontend: lint, testes e compilação” é grátis?

Sim — o texto completo de “GitHub Actions para frontend: lint, testes e compilação” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “GitHub Actions para frontend: lint, testes e compilação”?

Escrever um fluxo de trabalho YAML que instale dependências, execute o ESLint, execute testes Jest e compile a aplicação a cada pedido de alteração. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “GitHub Actions para frontend: lint, testes e compilação”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. GitHub Actions para frontend: lint, testes e compilação
  2. Implementação no Vercel, Netlify e Cloudflare Pages
  3. Variáveis de ambiente na integração contínua
  4. Verificações automatizadas do Lighthouse
← Voltar para Frontend Academy