Phase 5: Advanced & Professional Skills

GitHub Actions for linting, type checking & testing

Intermediate ~3 min read
Think of it this way A friendly analogy. Read this if the technical version feels dense. Show Hide

Imagine you're baking your absolute favorite chocolate chip cookies to share with friends. You want them to be perfect, right? You wouldn't want to accidentally put in salt instead of sugar, or find out they're burnt only after everyone has taken a bite! When people build websites or create apps, they feel the same way. They want their creations to be awesome and work perfectly without any glitches or surprises for the people using them.

That's where something called GitHub Actions comes in. Think of it like having a super-smart, super-fast kitchen assistant. Every single time you make a tiny change to your recipe, or try out a brand new one, your assistant automatically jumps into action. It does a quick, thorough check of everything, all by itself, before you even think about putting anything in the oven or serving it up. It’s like having a helpful robot helper making sure your baking always goes smoothly.

Your kitchen assistant does three main kinds of checks automatically. First, it does a "recipe review" (which in coding we call "linting"). It checks if you're following good baking habits, like making sure your recipe steps are written clearly, or if you've left out a basic instruction that could cause trouble later. It's about keeping things tidy and following the best practices. Second, it does an "ingredient type check" (in coding, this is "type checking"). This is super important: if your recipe says "add 2 cups of sugar," your assistant makes sure you've actually put in sugar, not salt by mistake, or flour. It ensures each ingredient is the correct kind for its job. Finally, after you've 'baked' your cookies, but still before the party, your assistant takes a tiny, secret taste (that's "testing"). Does it taste delicious? Is it crunchy on the outside and chewy on the inside, just like you wanted? If anything isn't quite right, your assistant tells you immediately.

This means that when you're working on building amazing websites or cool new games, you have a tireless, helpful robot always making sure everything is crafted correctly and tastes great. You can catch any little mistakes very early, so you can fix them before anyone else even sees them, making sure you always create awesome things that everyone will love!

As a frontend developer, ensuring code quality and preventing regressions is crucial. GitHub Actions provide an excellent way to automate these checks directly within your version control workflow. For linting, type checking, and testing, GitHub Actions lets you define automated processes that run every time new code is pushed or a pull request is opened. This means you get immediate feedback on whether your changes introduce errors, violate coding standards, or break existing functionality, long before they can be merged into your main codebase. This early detection saves significant time and effort in the long run.

Specifically, for frontend projects, GitHub Actions can be configured to execute three critical steps: linting, type checking, and testing. Linting (e.g., using ESLint) automatically scans your code for stylistic issues, potential bugs, and adherence to best practices. Type checking (essential for TypeScript projects) ensures that all variables, functions, and components use the correct data types, catching common runtime errors at compile time. Finally, testing involves running your unit, integration, or end-to-end tests (e.g., with Jest or React Testing Library) to verify that your application behaves as expected. By automating these, you enforce a consistent code quality standard across your team and codebase.

Setting this up involves creating simple YAML configuration files in a .github/workflows directory in your repository. These files define a sequence of steps – like checking out your code, setting up Node.js, installing dependencies, and then executing your lint, type-check, and test scripts. The results are visible directly in your GitHub pull requests, allowing teammates to see immediate feedback and ensuring that only high-quality, verified code makes it to production. This proactive approach not only builds confidence in your deployments but also frees up developers to focus on building features rather than manually reviewing basic quality gates.

Key Takeaways

  • Automate essential quality checks (linting, type checking, testing) with GitHub Actions.
  • Catch code errors, style violations, and broken tests early in the development cycle.
  • Improves overall code quality, consistency, and team collaboration.
  • Configured using simple YAML files within your .github/workflows directory.
  • Ensures a more reliable codebase and faster feedback loops before deployment.

Code Example

yaml
name: CI Checks

on:
  pull_request:
    branches: [ main, develop ]
  push:
    branches: [ main, develop ]

jobs:
  build-and-test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - name: Use Node.js
      uses: actions/setup-node@v4
      with:
        node-version: '20'
    - name: Install dependencies
      run: npm ci
    - name: Run ESLint
      run: npm run lint
    - name: Run TypeScript check
      run: npm run type-check
    - name: Run tests
      run: npm test

How this code works

This GitHub Actions workflow, named CI Checks, automates crucial quality checks for a frontend project. It activates on: specified events: whenever code is pushed directly or a pull request is opened against the main or develop branches. This ensures that every proposed change is automatically vetted for common issues before it can potentially affect the main codebase, helping maintain high code quality and preventing regressions.

The workflow consists of one jobs entry, build-and-test, which executes a series of steps on an ubuntu-latest virtual machine. It starts by using actions/checkout@v4 to retrieve the project's code. Next, actions/setup-node@v4 configures the environment with Node.js version 20, essential for running frontend tools. A key step follows: npm ci installs project dependencies. This command is specifically chosen over npm install for CI/CD environments because it guarantees a clean and consistent dependency tree based strictly on package-lock.json, preventing unexpected variations. Finally, the workflow executes npm run lint for code style, npm run type-check for TypeScript static analysis, and npm test to run automated tests, providing comprehensive feedback on the code change.

Resources

Related Articles

Hand-picked reads to go deeper on ci/cd for frontend.

Back to Frontend Developer Roadmap