Frontend Academy · Lezione

GitHub Actions per il frontend: lint, test e build

Scrivere un workflow YAML che installi le dipendenze, esegua ESLint e i test Jest e crei la build dell’app a ogni pull request

GitHub Actions per il frontend: lint, test e build è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Perché usare la CI per il frontend

L'integrazione continua esegue test, linter e build a ogni push e pull request. Individua le regressioni prima che raggiungano il ramo principale. È indispensabile per qualsiasi team con più di uno sviluppatore.

Basi di GitHub Actions

I workflow sono file YAML nella directory .github/workflows/. Ogni workflow contiene job che vengono eseguiti in seguito a determinati trigger (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

Caching delle dipendenze

Metta in cache node_modules (oppure le cache di pnpm/yarn) per evitare di reinstallare tutto a ogni esecuzione. setup-node supporta la cache integrata.

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

Job di lint

Esegua i controlli di ESLint e Prettier. Faccia fallire la build in caso di errori.

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 di test

Esegua Vitest o Jest. Produca report di copertura per una maggiore visibilità.

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 di build

Crei il bundle di produzione. Lo carichi come artefatto per i job di deployment successivi.

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

Job paralleli

Lint, test e controllo dei tipi possono essere eseguiti in parallelo: Actions esegue ogni job sul proprio runner. Utilizzi needs: per imporre un ordine, ad esempio build dopo lint e test.

Controllo dei tipi

Aggiunga un job dedicato al controllo dei tipi: tsc --noEmit. Individua gli errori TypeScript prima dell'esecuzione.

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

Test con matrice

Esegua il job di test con più versioni di Node o su diversi sistemi operativi in parallelo.

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

Passaggi condizionali

Utilizzi if: per eseguire i passaggi solo in determinate condizioni, ad esempio esclusivamente sul ramo principale.

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

Segreti e variabili

Conservi le chiavi API e i token nei segreti del repository (Settings → Secrets). Vi acceda tramite secrets.NAME. Non esegua mai il commit dei segreti nel repository.

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

Regole di protezione dei branch

In Settings → Branches, richieda il superamento del workflow CI prima di consentire il merge in main. Insieme alle revisioni obbligatorie, questa è la misura di sicurezza standard per i team.

Verifica rapida

Qual è lo scopo di cancel-in-progress: true nel blocco di concorrenza di un workflow GitHub Actions?

Riepilogo: GitHub Actions per il frontend

Il file YAML del workflow si trova in .github/workflows/. I job vengono eseguiti con push/PR. Metta in cache node_modules tramite setup-node. I job standard sono: lint, typecheck, test, build. Li esegua in parallelo usando needs per stabilire l'ordine. Usi una matrice per i test su più versioni. Gestisca i segreti tramite le impostazioni del repository. La protezione dei branch richiede che la CI abbia esito positivo prima del merge. Usi cancel-in-progress per eliminare le esecuzioni duplicate.

Domande Frequenti

La lezione «GitHub Actions per il frontend: lint, test e build» è gratuita?

Sì — il testo completo di «GitHub Actions per il frontend: lint, test e build» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «GitHub Actions per il frontend: lint, test e build»?

Scrivere un workflow YAML che installi le dipendenze, esegua ESLint e i test Jest e crei la build dell’app a ogni pull request Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «GitHub Actions per il frontend: lint, test e build»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Frontend Academy?

Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

GitHub Actions per il frontend: lint, test e build
Deploy su Vercel, Netlify e Cloudflare Pages
Variabili d’ambiente nella CI
Controlli Lighthouse automatizzati

← Torna a Frontend Academy