Skip to main content

CI/CD Pipelines

Basic MR CI/CD Pipeline (FE)​

Basic MR CI/CD Pipeline

Basic Main CI/CD Pipeline (FE)​

Basic Main CI/CD Pipeline

CI/CD Pipeline Recommendations​

  • Set up it in the way to ensure that only a single job or workflow using the same concurrency group will run at a time. It will reduce costs spent on unnecessary jobs. GitHub Example.
  • Parallelize jobs where possible.

Tests parallelism​

  • Use Vitest with its parallelism out of the box. See Vitest Performance
  • Parallelize tests by splitting them into multiple jobs by tests type: static, unit, component, integration.
  • Parallelize long running jobs (component/integration tests) by splitting them into multiple shards. See Vitest Sharding

Use Cache for Eslint to speed up pipeline​

npm lint scripts (package.json):

{
  ...
  "scripts": {
    ...
    "lint": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs --quiet --cache --cache-strategy content --cache-location ~/.eslintcache/lint",
    "lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx,.cjs,.mjs --fix --cache --cache-strategy content --cache-location ~/.eslintcache/lint",
  }
  ...
}

Reusable Linting Job (.github/workflows/reusable-test-static.yml):

name: Test Static
on:
  workflow_call

jobs:
  test-static:
    runs-on: ubuntu-latest
    timeout-minutes: 5
    steps:
    - name: Checkout Repository
      uses: actions/checkout@v4

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

    - name: Use Eslint Cache
      uses: actions/cache@v4
      with:
        path: |
          ~/.eslintcache/
        key: eslint-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json', '**/.eslintrc.js') }}

    - name: Install dependencies
      run: npm ci

    - name: Test Static
      run: npm run lint

Additional info:

CI Tools:​

Useful GitHub Actions​