Deploying your Storybook with Chromatic

Using Chromatic for automatic Storybook deployment.

Throughout this course, we learned that without Storybook, in order to build a feature in the app, the developers have to develop and integrate at the same time. This might result in bigger changes, and once they make a PR, they need to deploy the entire app and go through it until they find the feature to test, even with the smallest change.

With Storybook however, the development starts focused and isolated, and only after you integrate. This allows for faster, more concise changes:

But so far, we have been using Storybook locally; we don’t have a way to publish it yet. In this lesson, we will be setting up a cloud based service that integrates perfectly with Storybook, and is called Chromatic.

Why Chromatic?#

Chromatic is a cloud solution for Storybook that offers:

  • Free Storybook hosting, allowing you to publish your Storybooks with local or remote changes.

  • Visual regression testing with cross-browser support.

  • DOM snapshots to pick code changes.

  • UI review tool, improving collaboration between technical and non-technical people.

  • CI integration, so that every time you make a pull request, there will be a deployed version of your Storybook accessible to anyone in your team, and the review process will be triggered automatically. This works exceptionally well to collaborate with designers!

  • Chromatic is made by Storybook maintainers. As it's a tool tailored for Storybook, it integrates without any effort and will always support the latest features of Storybook!

Having all of these features in an easy-to-integrate environment makes our lives easier, and most of the functionality is free! In fact, for a project the size of MealDrop, Chromatic's free tier will suffice very nicely.

Getting started with Chromatic#

We start by accessing the Get started now page from Chromatic and following the steps:

  1. Sign in with GitHub

  2. Authorize Chromatic

  3. Select "Choose from GitHub" then "Storybook for react apps" from your GitHub projects

Cool! We now have a new project on chromatic.com.

The next step is to integrate the Chromatic library into our project. In the next screen, you will see your project token:

Now it's time to install Chromatic in the project:

Important:

If you have uncommitted changes in your repository, now is the time to commit them. This way, we have a clean git status for the upcoming commits we'll be making.

Let's get the project token provided in that screen and save it as a CHROMATIC_PROJECT_TOKEN environment variable in the .env file, and Chromatic will identify it automatically when we run its command. Go ahead and store the token in the .env file at the root level of your repository:

Add a chromatic command to your package.json:

Note:

Foreshadowing a bit, we use --exit-zero-on-changes so that Chromatic won't fail our CI pipeline in case there are visual changes.

Now let's make a commit for the changes we just did.

Next, let's run Chromatic:

 

Loading...

Start a new discussion. All notification go to the author.

Loading...