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 :(

Hi - I have the same question about how to publish (make a deployable artifact) when using Storybook into nwrl/nx workspace. Have you figured out maybe? — Bruno Bruzzano, Dec 14 '20 at 06:00

score 3 · Answer 1 · edited Feb 18 '22 at 15:36

On your nx project you should have a workspace.json (or project.json in 13.x) 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.

References:

https://nx.dev/storybook/overview-angular

score 2 · Answer 2 · edited Dec 01 '21 at 06:24

@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:

Build your storybook (npx nx run logo:build-storybook)
Create your project in the Chromatic Platform and get the project key
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
(Optional) Create a custom command in your project.json to execute this. More information:https://nx.dev/l/a/executors/run-commands-builder
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

Storybook Angular NX workspace: How to publish using Chromatic?

2 Answers2