Frontend Academy · Lesson

GitHub Actions for Frontend: lint test build

Write a workflow YAML that installs dependencies, runs ESLint, executes Jest tests, and builds the app on every pull request.

GitHub Actions for Frontend: lint test build is a free Frontend Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why CI for the Frontend?

Continuous Integration runs your tests, linters, and build on every push and pull request. Catches regressions before they reach main. Required for any team with more than one developer.

GitHub Actions Basics

Workflows are YAML files in .github/workflows/. Each workflow has jobs that run on triggers (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 Dependencies

Cache node_modules (or pnpm/yarn caches) to avoid reinstalling every run. setup-node has built-in cache support.

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

Lint Job

Run ESLint and Prettier checks. Fail the build on errors.

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

Run Vitest or Jest. Output coverage reports for visibility.

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

Build the production bundle. Upload as an artifact for downstream deployment jobs.

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

Parallel Jobs

Lint, test, and type-check can run in parallel — Actions runs each job on its own runner. Use needs: to enforce order (build after lint/test).

Type Checking

Add a dedicated type-check job: tsc --noEmit. Catches TypeScript errors before runtime.

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 Testing

Run the test job against multiple Node versions or OSes in parallel.

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

Conditional Steps

Use if: to run steps only under conditions — e.g., only on the main branch.

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

Secrets and Variables

Store API keys, tokens in repository secrets (Settings → Secrets). Access via secrets.NAME. Never commit secrets to the repo.

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

Branch Protection Rules

In Settings → Branches, require the CI workflow to pass before allowing merge to main. Combined with required reviews, this is the standard team safeguard.

Quick Check

What's the purpose of cancel-in-progress: true in the concurrency block of a GitHub Actions workflow?

Recap: GitHub Actions for Frontend

Workflow YAML in .github/workflows/. Jobs run on push/PR. Cache node_modules via setup-node. Standard jobs: lint, typecheck, test, build. Parallel with needs for order. Matrix for multi-version testing. Secrets via repository settings. Branch protection requires CI green before merge. cancel-in-progress to dedupe runs.

Frequently asked questions

Is the “GitHub Actions for Frontend: lint test build” lesson free?

Yes — the full text of “GitHub Actions for Frontend: lint test build” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.

What will I learn in “GitHub Actions for Frontend: lint test build”?

Write a workflow YAML that installs dependencies, runs ESLint, executes Jest tests, and builds the app on every pull request. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Frontend Academy?

No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “GitHub Actions for Frontend: lint test build” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Frontend Academy lesson?

Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

GitHub Actions for Frontend: lint test build
Deploying to Vercel Netlify and Cloudflare Pages
Environment Variables in CI
Automated Lighthouse Checks

← Back to Frontend Academy