Automate with continuous integration

Configure CI to publish your Storybook and run Chromatic’s automation whenever you push code. Badge your PRs to get notified about test and review results.

Configure CI

Before we begin, make sure you set the CHROMATIC_PROJECT_TOKEN environment variable (sometimes referred to as “secrets”) in your CI service’s configuration. Add a chromatic script to your package.json if you don’t have one already, and make sure chromatic is listed in devDependencies.

"scripts": {
  "chromatic": "chromatic --exit-zero-on-changes"
}

Integrate with popular CI tools like you would any other job. Run npm run chromatic to publish your Storybook. If UI Test or UI Review are enabled, it will return a non-zero exit code when there are changes. For example:

- run:
    command: npm install # install dependencies
- run:
    command: npm test # run your unit tests
- run:
    command: npm run chromatic # publish Storybook and run visual tests

Here’s how we recommend configuring Chromatic for popular CI services:

• GitHub Actions
• GitLab Pipelines
• Bitbucket Pipelines
• CircleCI
• Travis CI
• Jenkins
• Azure Pipelines
• Other CI providers

Pull request checks

When a build runs it will automatically add a PR status check to the current pull request indicating the state of the build. By default, you’ll see Storybook Publish. If you enabled UI Tests or UI Review you’ll also see their respective checks.

GitHub, Bitbucket, or GitLab projects that are linked to a repository get this feature out of the box. If you use other version control services to host your code, you can write a custom CI script to add a check for Chromatic (via your CI provider).

Require checks in GitHub, GitLab, or Bitbucket to ensure they are completed before merging.

Next: See the recommended Chromatic workflow

How tools work together affects your development speed. Learn the recommended Chromatic workflow.

Read next chapter

Frequently asked questions