Improve Monorepo project token management

[dobesv]

Feature request

When we run chromatic in a monorepo we have to pass in separate project token env var for each project. Managing these separate keys for every package and passing them in at the right time is a bit of a pain.

It would be great if we could use just one environment variable for all the projects in a monorepo.

Proposed solution

Some ideas:

• Have a way to combine all tokens into a single env var, like proj1:token1,proj2:token2
• Have chromatic somehow use one token where it uses that plus a project name to look up where to send the storybook
• Have it so that chromatic will look for alternative project-specific env vars for a token, e.g. if we set $CHROMATIC_PROJECT_TOKEN_PROJ1, $CHROMATIC_PROJECT_TOKEN_PROJ2 in .env and then when we run chromatic we somehow tell it to use those env vars instead - perhaps based on the package name in package.json it looks for an env var. At least in this case we could run the chromatic jobs per package in a batch like yarn workspaces foreach run chromatic.

Alternative solutions

Currently I have to separately list off every chromatic project in our CI build scripts so that I can set $CHROMATIC_PROJECT_TOKEN to the right token. And then add those tokens to the CI secrets configuration.

[andrewortwein]

Thanks @dobesv! I have added this to our internal set of feature requests for triage.

[thafryer]

Thanks @dobesv for writing in. What CI Provider are you using? If you are using GitHub Actions, would something like this potentially work for you? https://github.com/thafryer/nx-sb-jarel/blob/main/.github/workflows/chromatic.yml

[dobesv]

Could you elaborate on how that would help?

From a quick read it still seems to require configuring separate env vars for every project in CI.

A GitHub Actions based solution doesn't help if we want to do a test run of chromatic outside of the CI environment.

Also, we are not using GitHub Actions, so even if a GitHub Actions based approach along these lines was helpful in any way, it wouldn't help us specifically.

[thafryer]

@dobesv My apologies. I got confused looking at a few of your suggestions. Currently, we do not have plans to support using one project token for multiple projects. We have this feature request tracked with our product team.

Have you tried combining multiple projects into one storybook for use with Chromatic? If so, how was the experience of using it for this case?

[dobesv]

We used to build all the projects with one storybook, that is one available workaround, yeah. For now I've got some hacks in place but I can imagine that anyone doing monorepo development with chromatic would appreciate some kind of quality of life improvements here.

[joeldbirch]

@thafryer For your info, I've tried combining multiple projects but had issues. My use case is that I have a rapidly growing NX monorepo with thousands of (technically) "apps", each containing one or more responsive artworks, each of which requires testing using the new "modes" feature so I can control how the artwork looks at various viewport sizes. Because they are created as standalone apps, they each have their own vite.config.ts which needs to be used to render the stories. This doesn't seem possible as the combined storybook only takes single path for framework.options.builder.viteConfigPath.

I also tried getting a composed storybook host to be tested, which would allow me to generate and compose from individual storybooks, but found in the Chromatic docs that testing and approval isn't supported for composed storybooks.

Another monorepo-with-Chromatic problem is that I need a solution that allows new "apps" to be added to the testing without further manual setup. For example, manually adding new project tokens via a UI isn't scaleable enough for our use case.

[thafryer]

@joeldbirch Thanks for providing this feedback! I've shared this with our product folks, and your experience will definitely help improve the experience of using Chromatic in monorepos! To help enable your usage of the new "Modes" feature, can you provide a reproduction of your setup using the Vite config(s)?