Build Frontend workflow (kiali/kiali)

The Build Frontend workflow from kiali/kiali, explained and optimized by Latchkey.

CI health: A - excellent

Point runs-on at Latchkey and get 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: kiali/kiali.github/workflows/build-frontend.ymlLicense Apache-2.0View source

What it does

This is the Build Frontend workflow from the kiali/kiali repository, a real project running GitHub Actions. It is shown here with attribution under its Apache-2.0 license.

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

The workflow

workflow (.yml)

name: Build Frontend

on:
  workflow_call:
    inputs:
      target_branch:
        required: true
        type: string
      build_branch:
        required: true
        type: string

jobs:
  build_frontend:
    name: Build and unit test frontend
    runs-on: ubuntu-latest
    steps:
    - name: Checkout code
      uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
      with:
        ref: ${{ inputs.build_branch }}

    # Corepack must be enabled before setup-node so that setup-node's
    # cache: yarn correctly detects the Yarn 4 cache directory.
    - name: Enable corepack
      run: corepack enable

    - name: Setup node
      uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
      with:
        node-version: "24"
        cache: yarn
        cache-dependency-path: frontend/yarn.lock

    - name: Build
      run: make clean-all build-ui

    - name: Test frontend
      run: |
        cd frontend
        yarn pretty-quick --check --verbose --branch ${{ inputs.target_branch }}
        yarn test

    - name: Upload frontend build
      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
      with:
        name: build
        path: frontend/build/

The same workflow, on Latchkey

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

name: Build Frontend
 
on:
  workflow_call:
    inputs:
      target_branch:
        required: true
        type: string
      build_branch:
        required: true
        type: string
 
jobs:
  build_frontend:
    timeout-minutes: 30
    name: Build and unit test frontend
    runs-on: latchkey-small
    steps:
    - name: Checkout code
      uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
      with:
        ref: ${{ inputs.build_branch }}
 
    # Corepack must be enabled before setup-node so that setup-node's
    # cache: yarn correctly detects the Yarn 4 cache directory.
    - name: Enable corepack
      run: corepack enable
 
    - name: Setup node
      uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
      with:
        node-version: "24"
        cache: yarn
        cache-dependency-path: frontend/yarn.lock
 
    - name: Build
      run: make clean-all build-ui
 
    - name: Test frontend
      run: |
        cd frontend
        yarn pretty-quick --check --verbose --branch ${{ inputs.target_branch }}
        yarn test
 
    - name: Upload frontend build
      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
      with:
        name: build
        path: frontend/build/

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.
Add a job timeout so a hung step cannot burn hours of runner time.

This workflow runs 1 job 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 actions/upload-artifact