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.

Checkmarx Integration with Azure DevOps – A Walkthrough

 As a developer and solution architect, security is always top of mind for me — especially when working with enterprise-grade platforms. One of the best practices I follow is to ensure code scanning is automated and part of the CI/CD process.

In this post, I’ll share a quick walkthrough of how I integrated Checkmarx One with Azure DevOps Pipelines for a sample project. This is a hands-on, personal experience — designed so anyone can follow along and set up their own secure pipeline.

---

Why Automate Checkmarx Scans?

Instead of running manual scans or relying on developers to remember security checks, I prefer to have a scheduled pipeline that runs automatically. This ensures:

• Consistent scanning of every commit or scheduled interval

• Immediate visibility of vulnerabilities in the Checkmarx dashboard

• Early detection, reducing risk before code reaches production

---

Prerequisites

Before starting, make sure you have:

• Access to an Azure DevOps project and repository

• Checkmarx OAuth credentials (Client ID / Client Secret)

• Permissions to create and edit Pipelines and Service Connections

---

Step 1 – Create the Checkmarx Service Connection

1. Go to Azure DevOps → Project Settings → Service Connections

2. Select New service connection → Checkmarx One Service Connection

3. Provide the details:

   • Server URL: https://anz.ast.checkmarx.net

   • Auth URL (optional): https://anz.iam.checkmarx.net

   • Client ID / Secret: Obtain from your security or DevOps admin

4. Name it something clear, e.g., checkmarx, and save.

5. Authorize it for your pipeline so the build agent can use it.

---

Step 2 – Add the Pipeline YAML File

Create a new file in your repository at:

/.AzureDevOps/checkmarx-azure-pipelines.yml

Here’s a sample structure:

trigger:
  branches:
    include:
      - main
      - develop

pool:
  vmImage: 'ubuntu-latest'

steps:
  - task: Checkmarx AST@1
    displayName: 'Run Checkmarx Scan'
    inputs:
      projectName: 'sample-project'
      serviceConnection: 'checkmarx'
      scanType: 'sast'
      breakBuild: true

This configuration triggers a scan on your chosen branches, runs a SAST (Static Application Security Testing) scan, and optionally breaks the build if vulnerabilities exceed the defined threshold.

---

Step 3 – Create the Pipeline

1. Navigate to Pipelines → New Pipeline

2. Choose your repository

3. Select Existing Azure Pipelines YAML file

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

5. Save and run your first scan

---

Step 4 – Review Results in Checkmarx

Once the pipeline finishes, head to the Checkmarx dashboard:

• Log in at: https://anz.ast.checkmarx.net/login-organization

• View the scan results for your project

• Review vulnerabilities, prioritize by severity, and start remediating issues

---

Final Thoughts

Setting up Checkmarx integration with Azure DevOps is straightforward and well worth the effort for the peace of mind it provides. With a scheduled and automated pipeline, your codebase stays continuously monitored, reducing the risk of security breaches.

This approach has become a standard step in my DevSecOps workflow — whether I’m building a small proof-of-concept or delivering enterprise-scale digital solutions.