project.json:

//... "ui": { "targets": { //... "build-storybook": { "executor": "@nrwl/storybook:build", "outputs": ["{options.outputDir}"], "options": { "outputDir": "dist/storybook/ui", "configDir": "libs/ui/.storybook" }, "configurations": { "ci": { "quiet": true } } } }
nx run ui:build-storybook

Examples

For non-Angular projects

You can work in docs mode, building a documentation-only site, by setting the docsMode option to true and using the @storybook/addon-docs addon.

Read more on the Storybook documentation page for addon-docs.

"storybook": { "executor": "@nrwl/storybook:build", "options": { "port": 4400, "configDir": "libs/ui/.storybook", "docsMode": true }, "configurations": { "ci": { "quiet": true } } }

For Angular projects

This is the default configuration for Angular projects using Storybook. You can see that it uses the native @storybook/angular:build-storybook executor. You can read more about the configuration options at the relevant Storybook documentation page.

"build-storybook": { "executor": "@storybook/angular:build-storybook", "outputs": ["{options.outputDir}"], "options": { "outputDir": "dist/storybook/ngapp", "configDir": "libs/ui/.storybook", "browserTarget": "ui:build", "compodoc": false }, "configurations": { "ci": { "quiet": true } } }

Options

configDir

Required
string

Directory where to load Storybook configurations from.

uiFramework

Required
string
Default: @storybook/react
Accepted values: @storybook/react, @storybook/html, @storybook/web-components, @storybook/vue, @storybook/vue3, @storybook/svelte

Storybook framework npm package.

docsMode

boolean
Default: false

Build a documentation-only site using addon-docs.

docs

boolean

Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.

loglevel

string
Pattern: (silly|verbose|info|warn|silent)

Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent].

outputDir

string

Directory where to store built files.

quiet

boolean

Suppress verbose build output.

styles

Array<oneOf [object , string]>

Global styles to be included in the build.

stylePreprocessorOptions

Options to pass to style preprocessors.

Additional Properties

anything

Extra properties of any type may be provided to this object.

staticDir

Deprecated
Array<string>

Directory where to load static files from, array of strings.

In Storybook 6.4 the --static-dir CLI flag has been replaced with the the staticDirs field in .storybook/main.js. It will be removed completely in Storybook 7.0.