CI/CD Integration

Automate pattern and component scanning in your continuous integration pipeline.

Overview #

Running UiPool in your CI/CD pipeline ensures every commit and pull request is scanned for UI pattern usage. This provides visibility into design system adoption over time and catches regressions early.

GitHub Actions #

Add UiPool scanning to your GitHub Actions workflow:

.github/workflows/uipool.yml

name: UiPool Scan

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

jobs:
  scan:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          
      - name: Install dependencies
        run: npm ci
        
      - name: Run UiPool scan
        run: npx uipool scan --upload --project ${{ github.repository }}
        env:
          UIPOOL_API_KEY: ${{ secrets.UIPOOL_API_KEY }}

Set UIPOOL_API_KEY as a repository secret to upload reports to your UiPool workspace.

GitLab CI #

Configure GitLab CI to run UiPool scans:

.gitlab-ci.yml

uipool-scan:
  stage: test
  image: node:20
  script:
    - npm ci
    - npx uipool scan --upload --project $CI_PROJECT_NAME
  variables:
    UIPOOL_API_KEY: $UIPOOL_API_KEY
  only:
    - main
    - merge_requests

Azure DevOps #

Add UiPool to your Azure Pipelines:

azure-pipelines.yml

trigger:
  - main

pool:
  vmImage: 'ubuntu-latest'

steps:
  - task: NodeTool@0
    inputs:
      versionSpec: '20.x'
      
  - script: npm ci
    displayName: 'Install dependencies'
    
  - script: npx uipool scan --upload --project $(Build.Repository.Name)
    displayName: 'Run UiPool scan'
    env:
      UIPOOL_API_KEY: $(UIPOOL_API_KEY)

Uploading Reports #

After scanning, you can upload reports to your UiPool workspace for tracking and analysis:

uipool scan --upload --project my-app

The --upload flag sends the scan results to UiPool's servers, where they're associated with your workspace and project.

Requires UIPOOL_API_KEY environment variable to be set with your workspace API key.

Pull Request Comments #

Enable automatic PR comments to show pattern usage changes:

uipool scan --upload --project my-app --pr-comment

This will post a summary comment on the PR showing:

New patterns detected in this PR
Removed pattern usages
Changes in component coverage
Deprecated pattern warnings

PR comments feature requires GitHub App installation or appropriate CI permissions.

Caching for Faster Builds #

Speed up CI runs by caching UiPool's node modules:

GitHub Actions caching

- name: Cache npm dependencies
  uses: actions/cache@v4
  with:
    path: ~/.npm
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-node-

Environment Variables #

UiPool respects these environment variables in CI:

Variable	Description
UIPOOL_API_KEY	API key for uploading reports to your workspace
UIPOOL_PROJECT	Project name (overrides --project flag)
UIPOOL_OUTPUT	Output file path (default: uipool-report.json)
CI	Set automatically by most CI systems; enables CI-specific behavior