First Chromatic run
Time to fill up our UI platform with our work to date!
At this point, you have an account at Chromatic, and it's aware of your component library repository. You've also just enabled the Chromatic step in CI. We are now ready to try it out, finally.
First publish#
As you've gone through the Chromatic setup process, it will have instructed you to publish your Storybook. To actually do that, you only need to run npx chromatic --project-token=YOUR_TOKEN. Do that now.
Do not add the chromatic command if asked to do so since this will expose your token in cleartext.
The output will look something like this:
$npx chromatic --project-token=YOUR_TOKEN
Chromatic CLI v5.9.2
https://www.chromatic.com/docs/cli
✔ Authenticated with Chromatic
✔ Authenticated with Chromatic
✔ Authenticated with Chromatic
✔ Authenticated with Chromatic
✔ Authenticated with Chromatic
✔ Authenticated with Chromatic
✔ Authenticated with Chromatic
✔ Authenticated with Chromatic
✔ Authenticated with Chromatic
✔ Authenticated with Chromatic
✔ Authenticated with Chromatic
✔ Authenticated with Chromatic
→ Using project token '********10f4'
✔ Retrieved git information
→ Commit 'b002944' on branch 'main'; no parent commits found
✔ Collected Storybook metadata
→ Storybook v6.3.2 for React; supported addons found: Actions, Essentials, Links
✔ Storybook built in 7 seconds
→ View build log at /Users/mikaelvesavuori/Web/course/my-component-library/build-storybook.log
✔ Publish complete in 12 seconds
→ View your Storybook at https://60e067c8e1963a003972abff-xdygmddkpz.chromatic.com
✔ Started build 1
→ Continue setup at https://www.chromatic.com/setup?appId=60e067c8e1963a003972abff
✔ Build 1 auto-accepted
→ Tested 22 stories across 17 components; captured 22 snapshots in 9 seconds
ℹ Speed up Continuous Integration
Your project is linked to GitHub so Chromatic will report results there.
This means you can pass the --exit-once-uploaded flag to skip waiting for build results.
Read more here: https://www.chromatic.com/docs/cli#chromatic-options
✔ Build passed. Welcome to Chromatic!
We found 17 components with 22 stories and took 22 snapshots.
ℹ Please continue setup at https://www.chromatic.com/setup?appId=60e067c8e1963a003972abff
⚠ No 'chromatic' script found in your package.json
Would you like me to add it for you? [y/N] n
Inside Chromatic, you should see a screen like this when it is done with your import:
To detect any changes, we need to make an additional push with some changes.
Okay, so Chromatic wants something to diff our base version with. No need to make a big thing of this, so I'll just edit the Demo component:
import React from 'react';
const Demo = () => <div>Demo component (updated!)</div>;
export default Demo;
This page is a preview of The newline Guide to React Component Design Systems with Figmagic