Storybook Angular NX workspace: How to publish using Chromatic?

Question

Hi Does anyone know how to Run Storybook Chromatic in an NX workspace? My Angular app and libs are working fine when Serving locally, I have run Stories for my projects fine. I have even built and published the stories locally. What I want is to publish it to remote using Chromatic but I do not know how.

Is there a process for this? I have not found one yet.
I am trying something really messy at the moment - but it is not working. This is my failed attempt:

Adding a run script to the Workspace package.json:

"build-storybook": "./node_modules/@storybook/angular/bin/index.js build-storybook --output-dir ./dist/storybook -c ./libs/cwb-panel/.storybook”

Gives this error:

Command failed with exit code 1: npm run --silent build-storybook -- --output-dir /var/folders/qz/2d3l6_blahblahblah

error: unknown option '--output-dir'

I am stumped, there must be a way, just not sure what it is:(

Answer 1

On your nx project you should have a workspace.json that has some storybook config already:

"storybook": {
          "executor": "@nrwl/storybook:storybook",
          "options": {
            "uiFramework": "@storybook/react",
            "port": 4400,
            "config": { "configFolder": "libs/ui-library/.storybook" }
          },
          "configurations": { "ci": { "quiet": true } }
        },
        "build-storybook": {
          "executor": "@nrwl/storybook:build",
          "outputs": ["{options.outputPath}"],
          "options": {
            "uiFramework": "@storybook/react",
            "outputPath": "dist/storybook/ui-library",
            "config": { "configFolder": "libs/ui-library/.storybook" }
          },
          "configurations": { "ci": { "quiet": true } }
        }

You can build a nx storybook publishable version by running: npx nx serve ui-library:build-storybook

This will generate the folder dist/storybook/ui-library that is the one you want to use either in Chromatic or deploying it elsewhere.

Answer 2

@feralamillo is right, but his answer is incomplete.

You can't just run the build-storybook command, you need to customize the command like this:

npx chromatic --project-token=cXXXXX -d=dist/storybook/component-name

I will give you a step by step:

1. Build your storybook ( npx nx run logo:build-storybook )
2. Create your project in the Chromatic Platform and get the project key
3. Use the custom command to use your dist directory ( npx chromatic --project-token=cXXXXX -d=dist/storybook/component-name ) More Information: https://www.chromatic.com/docs/cli
4. (Optional) Create a custom command in your project.json to execute this. More information: https://nx.dev/l/a/executors/run-commands-builder
5. I don't know how to manage chromatic in a monorepo, but here I found some ways to manage it: https://www.chromatic.com/docs/monorepos.html#monorepos