0Pricing
Frontend Academy · Lektion

GitHub Actions für Frontends: Linting, Tests und Build

Schreiben Sie eine Workflow-YAML-Datei, die Abhängigkeiten installiert, ESLint ausführt, Jest-Tests ausführt und die App bei jedem Pull Request erstellt.

GitHub Actions für Frontends: Linting, Tests und Build ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum CI für das Frontend?

Continuous Integration führt bei jedem Push und Pull Request Ihre Tests, Linter und den Build aus. Dadurch werden Regressionen erkannt, bevor sie den Hauptbranch erreichen. CI ist für jedes Team mit mehr als einem Entwickler erforderlich.

Grundlagen von GitHub Actions

Workflows sind YAML-Dateien im Verzeichnis .github/workflows/. Jeder Workflow besteht aus Jobs, die durch Trigger (push, pull_request, schedule) ausgeführt werden.

# .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

Abhängigkeiten cachen

Cached Sie node_modules (oder die pnpm-/yarn-Caches), damit die Abhängigkeiten nicht bei jedem Durchlauf neu installiert werden müssen. setup-node unterstützt Caching bereits integriert.

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

Lint-Job

Führen Sie ESLint- und Prettier-Prüfungen aus. Lassen Sie den Build bei Fehlern fehlschlagen.

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

Test-Job

Führen Sie Vitest oder Jest aus. Erzeugen Sie Coverage-Berichte, damit die Testabdeckung sichtbar ist.

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

Build-Job

Erstellen Sie das Produktions-Bundle. Laden Sie es als Artefakt für nachgelagerte Deployment-Jobs hoch.

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

Parallele Jobs

Linting, Tests und Type-Checking können parallel ausgeführt werden — Actions führt jeden Job auf einem eigenen Runner aus. Verwenden Sie needs:, um die Reihenfolge festzulegen (Build nach Linting und Tests).

Typprüfung

Fügen Sie einen eigenen Type-Check-Job hinzu: tsc --noEmit. Dadurch werden TypeScript-Fehler vor der Laufzeit erkannt.

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

Matrix-Tests

Führen Sie den Test-Job parallel für mehrere Node-Versionen oder Betriebssysteme aus.

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

Bedingte Schritte

Verwenden Sie if:, um Schritte nur unter bestimmten Bedingungen auszuführen — zum Beispiel nur im Main-Branch.

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

Secrets und Variablen

Speichern Sie API-Schlüssel und Tokens in Repository-Secrets (Einstellungen → Secrets). Greifen Sie über secrets.NAME darauf zu. Committen Sie Secrets niemals in das Repository.

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

Branch-Schutzregeln

Verlangen Sie in Einstellungen → Branches, dass der CI-Workflow erfolgreich durchläuft, bevor ein Merge nach main erlaubt wird. Zusammen mit erforderlichen Reviews ist dies die standardmäßige Absicherung für Teams.

Kurzer Check

Welchen Zweck hat cancel-in-progress: true im concurrency-Block eines GitHub-Actions-Workflows?

Zusammenfassung: GitHub Actions für Frontend

Workflow-YAML liegt in .github/workflows/. Jobs werden bei Push/PR ausgeführt. Cachen Sie node_modules über setup-node. Standard-Jobs: lint, typecheck, test, build. Parallelisieren Sie sie mit needs, um die Reihenfolge festzulegen. Verwenden Sie eine Matrix für Tests mit mehreren Versionen. Secrets über die Repository-Einstellungen. Der Branch-Schutz verlangt vor dem Merge, dass CI erfolgreich ist. cancel-in-progress, um redundante Läufe zu vermeiden.

Häufig gestellte Fragen

Ist die Lektion „GitHub Actions für Frontends: Linting, Tests und Build“ kostenlos?

Ja — der vollständige Text von „GitHub Actions für Frontends: Linting, Tests und Build“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „GitHub Actions für Frontends: Linting, Tests und Build“?

Schreiben Sie eine Workflow-YAML-Datei, die Abhängigkeiten installiert, ESLint ausführt, Jest-Tests ausführt und die App bei jedem Pull Request erstellt. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „GitHub Actions für Frontends: Linting, Tests und Build“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. GitHub Actions für Frontends: Linting, Tests und Build
  2. Bereitstellung auf Vercel, Netlify und Cloudflare Pages
  3. Umgebungsvariablen in CI
  4. Automatisierte Lighthouse-Prüfungen
← Zurück zu Frontend Academy