CI workflow (react-grid-layout/react-draggable)

The CI workflow from react-grid-layout/react-draggable, explained and optimized by Latchkey.

CI health: C - fair

Point runs-on at Latchkey and get run de-duplication, job timeouts, self-healing for flaky steps, and up to 58% lower cost, applied automatically.

Grade your own workflow free or run it on Latchkey →

Source: react-grid-layout/react-draggable.github/workflows/ci.ymlLicense MITView source

What it does

This is the CI workflow from the react-grid-layout/react-draggable repository, a real project running GitHub Actions. It is shown here with attribution under its MIT license.

Below, Latchkey shows a faster, safer version produced by its optimization engine.

The workflow

workflow (.yml)

name: CI

on:
  push:
    branches: [master]
  pull_request:
    branches: [master]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'yarn'

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Lint
        run: yarn lint

  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [20, 22, 24]
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'yarn'

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      # The typeCompat tsc compile is Node-version-independent; skip it on every
      # non-primary matrix node so the full source type graph is compiled once,
      # not three times. All other unit tests still run on every Node version.
      - name: Run unit tests
        env:
          SKIP_TSC_TYPE_COMPAT: ${{ matrix.node-version != 20 && '1' || '' }}
        run: yarn test

      # The build (tsup --dts + webpack) recompiles the full type graph for
      # declaration emit; that output is byte-identical across Node versions, so
      # building on every matrix entry just recompiles the same type graph N times.
      # Gate it to the primary Node version. Unit tests still run on all versions.
      - name: Build
        if: matrix.node-version == 20
        run: yarn build

  test-browser:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'yarn'

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Build
        run: yarn build

      - name: Run browser tests
        run: yarn test:browser

  coverage:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'yarn'

      - name: Install dependencies
        run: yarn install --frozen-lockfile

      - name: Run tests with coverage
        run: yarn test:coverage

  # NOTE: the standalone TypeScript checks (`tsc --noEmit` for source and
  # `tsc -p typings` for the public .d.ts) are already run by `make lint` in the
  # `lint` job above. Running them again here recompiled the full type graph a
  # second time every CI run for no added coverage, so this job was removed and
  # `lint` is the single owner of type-checking. Re-add a dedicated job only if
  # `make lint` ever stops invoking tsc.

The same workflow, on Latchkey

Removes redundant runs and caps runaway jobs. Added and changed lines are highlighted.

name: CI
 
on:
  push:
    branches: [master]
  pull_request:
    branches: [master]
 
concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true
 
jobs:
  lint:
    timeout-minutes: 30
    runs-on: latchkey-small
    steps:
      - uses: actions/checkout@v4
 
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'yarn'
 
      - name: Install dependencies
        run: yarn install --frozen-lockfile
 
      - name: Lint
        run: yarn lint
 
  test:
    timeout-minutes: 30
    runs-on: latchkey-small
    strategy:
      matrix:
        node-version: [20, 22, 24]
    steps:
      - uses: actions/checkout@v4
 
      - name: Setup Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'yarn'
 
      - name: Install dependencies
        run: yarn install --frozen-lockfile
 
      # The typeCompat tsc compile is Node-version-independent; skip it on every
      # non-primary matrix node so the full source type graph is compiled once,
      # not three times. All other unit tests still run on every Node version.
      - name: Run unit tests
        env:
          SKIP_TSC_TYPE_COMPAT: ${{ matrix.node-version != 20 && '1' || '' }}
        run: yarn test
 
      # The build (tsup --dts + webpack) recompiles the full type graph for
      # declaration emit; that output is byte-identical across Node versions, so
      # building on every matrix entry just recompiles the same type graph N times.
      # Gate it to the primary Node version. Unit tests still run on all versions.
      - name: Build
        if: matrix.node-version == 20
        run: yarn build
 
  test-browser:
    timeout-minutes: 30
    runs-on: latchkey-small
    steps:
      - uses: actions/checkout@v4
 
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'yarn'
 
      - name: Install dependencies
        run: yarn install --frozen-lockfile
 
      - name: Build
        run: yarn build
 
      - name: Run browser tests
        run: yarn test:browser
 
  coverage:
    timeout-minutes: 30
    runs-on: latchkey-small
    steps:
      - uses: actions/checkout@v4
 
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'yarn'
 
      - name: Install dependencies
        run: yarn install --frozen-lockfile
 
      - name: Run tests with coverage
        run: yarn test:coverage
 
  # NOTE: the standalone TypeScript checks (`tsc --noEmit` for source and
  # `tsc -p typings` for the public .d.ts) are already run by `make lint` in the
  # `lint` job above. Running them again here recompiled the full type graph a
  # second time every CI run for no added coverage, so this job was removed and
  # `lint` is the single owner of type-checking. Re-add a dedicated job only if
  # `make lint` ever stops invoking tsc.

What changed

Run on Latchkey managed runners with one line (runs-on), which apply the fixes below automatically and self-heal transient failures. This example uses latchkey-small; pick the runner size that fits the job.
Cancel superseded runs when a branch or PR gets a newer push.
Add a job timeout so a hung step cannot burn hours of runner time.

What Latchkey heals here

This workflow has steps that commonly fail on transient issues (network, registries, flaky browsers). On Latchkey managed runners they are detected, retried, and self-healed instead of failing your build:

Dependency installs

This workflow runs 4 jobs (6 with the matrix expanded) per trigger. On Latchkey the same minutes cost up to 58% less than GitHub-hosted, with zero queue time.

Actions used in this workflow

actions/checkout actions/setup-node