Publishing storybook to Chromatic

[jvskriubakken]

Hi,

I'm looking for any guidance on how to publish my storybook Chromatic.

BTW, I have created a lib that loads all stories in my whole workspace. And it's this storybook I would like to publish to Chromatic.

Has anyone done this before?

[kylesuss]

Hi. Kyle from Chromatic here 😄

I don't know a ton about nx, but this thread came our way in support so I figured I'd share what I said there:

Do you know how to build your Storybook as a static app in your setup?

https://storybook.js.org/docs/react/workflows/publish-storybook

If you can do that, you can use Chromatic. There's a few things to consider -- when you run Chromatic, we can either (1) build Storybook for you or (2) take a prebuilt Storybook and upload it. It may be the case that the default build settings don't work for nx (I have no idea) and if that's true, you can opt to pass chromatic a prebuilt Storybook instead using the --storybook-build-dir CLI flag (documented here).

[jvskriubakken]

Hi and thanks for the reply!

I figured out how to publish a storybook to Chromatic. More or less like this:

First build the storybook using nx serve:
"build-shared-storybook": "nx serve shared-storybook:build-storybook"

Then upload it with this:
"chromatic": "chromatic --project-token=\"xxxxxxx\" --storybook-build-dir dist/storybook/shared-storybook --auto-accept-changes",

I think with this solution, the storybook is prebuilt by Nx and the result of that is uploaded to chromatic.

[kylesuss]

Yeah! That sounds like the right approach.