Chromatic Integration with Azure DevOps

 When working on front-end projects, visual consistency is just as critical as functionality. That’s why I love integrating Chromatic with my CI pipelines — it provides automated Storybook builds, visual regression testing, and review links right inside the development workflow.

In this post, I’ll walk you through how I set up Chromatic integration in Azure DevOps pipelines for a sample project. It’s simple, secure, and requires no changes to your repository structure.

---

Why Automate Chromatic Builds?

By running Chromatic builds on feature branches as part of your pipeline, you get:

• Automatic deployment of Storybook previews

• Visual regression testing with every commit

• Reviewable UI builds for designers, testers, and stakeholders

• Early detection of UI drift or unintended visual changes

---

Prerequisites

Before starting, ensure you have:

• Access to your Azure DevOps project and repository

• A Chromatic Project Token (available in your Chromatic project settings)

• Permission to create/edit Pipelines and Variable Groups in Azure DevOps

---

Step 1 – Create a Shared Variable Group

1. Go to Azure DevOps → Pipelines → Library → + Variable group

2. Name the group: chromatic-shared

3. Add a variable:

   • Name: CHROMATIC_PROJECT_TOKEN

   • Value: your Chromatic token

   • ✅ Check “Keep this value secret”

4. Save the group

5. Open the group → Pipeline permissions → Authorize it for your pipeline

This keeps your token secure and reusable across multiple pipelines.

---

Step 2 – Add the Pipeline YAML File

Create a new file in your repository at:

/.AzureDevOps/chromatic-azure-pipelines.yml

Here’s a sample configuration:

trigger:
  branches:
    include:
      - feature/*

pool:
  vmImage: 'ubuntu-latest'

variables:
- group: chromatic-shared

steps:
  - checkout: self

  - task: NodeTool@0
    inputs:
      versionSpec: '18.x'

  - script: |
      npm ci
      npx chromatic --project-token $(CHROMATIC_PROJECT_TOKEN) --exit-zero-on-changes
    displayName: 'Build Storybook & Publish to Chromatic'

This pipeline runs on feature/* branches, installs dependencies, builds Storybook, and uploads it to Chromatic.

---

Step 3 – Create the Pipeline in Azure DevOps

1. Navigate to Pipelines → New Pipeline

2. Select your repository

3. Choose Existing Azure Pipelines YAML file

4. Point to /.AzureDevOps/chromatic-azure-pipelines.yml

5. Save and run your pipeline

---

Step 4 – Trigger It

Push any commit to a feature/* branch.
The pipeline will:

• Detect the project root

• Install dependencies

• Build your Storybook (e.g. from apps/samplehead)

• Upload the build to Chromatic

Once complete, you’ll see a Chromatic build URL in the pipeline logs.

---

Step 5 – Review in Chromatic

Head to your Chromatic Dashboard and open your project.
You’ll see the new build with all the components rendered and visual changes (if any) highlighted.

This makes it easy for your designers, testers, and product owners to review and approve UI changes quickly.

---

Final Thoughts

Integrating Chromatic into Azure DevOps is a fast win for front-end quality assurance. With every feature branch pushing builds to Chromatic automatically, you can:

• Catch visual regressions early

• Simplify UI reviews

• Maintain a reliable design system

This setup has become a core part of my front-end delivery workflow, ensuring UI consistency at scale with minimal manual effort.