Learn Gatsby - Modern Tooling & Build Automation

#Introduction

Build automation turns repetitive work into processes a machine can run. The Gatsby CLI, npm scripts, TypeScript, and CI/CD pipelines keep a project not just running today, but safe to change tomorrow.

Episode 19 covers the Gatsby CLI and package scripts, TypeScript support in Gatsby, CI/CD pipelines, and linting, formatting, and pre-commit hooks.

#The Gatsby CLI and Package Scripts

#Basic Gatsby CLI Commands

The Gatsby CLI provides commands to create projects and run the develop-build cycle:

gatsby new situs-ku https://github.com/gatsbyjs/gatsby-starter-blog
gatsby develop
gatsby build
gatsby serve
gatsby clean

gatsby clean deletes the .cache and public folders, useful when a build is inconsistent due to corrupted cache. gatsby develop runs the development server with live reload.

#Consistent Package Scripts

Wrap the CLI commands in package.json scripts so every team member uses the same commands:

{
  "scripts": {
    "develop": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve",
    "clean": "gatsby clean"
  }
}

#TypeScript in Gatsby

#TypeScript Configuration

Since Gatsby 4, configuration files can be written in TypeScript. gatsby-config.ts, gatsby-node.ts, and gatsby-browser.ts are recognized automatically. Make sure tsconfig.json adds the needed settings:

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react-jsx",
    "strict": true,
    "moduleResolution": "bundler"
  }
}

"strict": true enables all strict type checks. For path aliases like imports from src/components, add paths to the tsconfig.

#Writing Typed Components

With TypeScript, component props are defined as an interface so type errors are caught while writing code:

Component with typed props

interface ButtonProps {
  label: string
  variant: "primary" | "secondary"
}
 
const Button = ({ label, variant }: ButtonProps) => {
  return <button className={variant}>{label}</button>
}

#CI/CD Pipeline for Gatsby

#GitHub Actions Workflow

The simplest CI pipeline runs install, lint, test, and build for every pull request:

name: CI
 
on:
  pull_request:
  push:
    branches: [main]
 
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run lint
      - run: npm test
      - run: npm run build

npm ci performs a deterministic install based on the lockfile, better suited to CI than npm install. Caching the .cache and public folders speeds up subsequent builds.

#Reproducible Builds

Pin the Node.js version and package manager so build results stay consistent across machines. Keep values that vary between environments in environment variables rather than in code.

#Linting, Formatting, and Pre-commit Hooks

#Prettier and ESLint

Combine ESLint for finding problems with Prettier for formatting. They don't replace each other: ESLint focuses on code rules, Prettier focuses on writing style.

#Husky and lint-staged

To enforce rules before code enters git, run lint only on changed files with lint-staged:

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"]
  }
}

husky installs a pre-commit git hook that calls lint-staged. Files that break the rules never get the chance to be committed.

#Conclusion

Key takeaways:

• gatsby clean fixes builds that are inconsistent because of cache.
• Wrap CLI commands in consistent npm scripts.
• Gatsby configuration files can be written in TypeScript.
• CI runs lint, test, and build for every change.
• npm ci is used for deterministic installs in CI.
• Husky and lint-staged enforce rules before commits.

In the next episode, episode 20, we'll discuss deployment and hosting — deployment options on Gatsby Cloud, Netlify, and Vercel, build output and previews, domain management, and CDN with cache invalidation.