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