project.json:

1//... 2"ui": { 3 "targets": { 4 //... 5 "build-storybook": { 6 "executor": "@nx/storybook:build", 7 "outputs": ["{options.outputDir}"], 8 "options": { 9 "outputDir": "dist/storybook/ui", 10 "configDir": "libs/ui/.storybook" 11 }, 12 "configurations": { 13 "ci": { 14 "quiet": true 15 } 16 } 17 } 18} 19
Nx 15 and lower use @nrwl/ instead of @nx/
1nx run ui:build-storybook 2

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.

1"storybook": { 2 "executor": "@nx/storybook:build", 3 "options": { 4 "port": 4400, 5 "configDir": "libs/ui/.storybook", 6 "docsMode": true 7 }, 8 "configurations": { 9 "ci": { 10 "quiet": true 11 } 12 } 13} 14
Nx 15 and lower use @nrwl/ instead of @nx/

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.

1"build-storybook": { 2 "executor": "@storybook/angular:build-storybook", 3 "outputs": ["{options.outputDir}"], 4 "options": { 5 "outputDir": "dist/storybook/ngapp", 6 "configDir": "libs/ui/.storybook", 7 "browserTarget": "ui:build", 8 "compodoc": false 9 }, 10 "configurations": { 11 "ci": { 12 "quiet": true 13 } 14 } 15} 16

Options

configDir

Required
string

Directory where to load Storybook configurations from.

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.

debugWebpack

boolean

Display final webpack configurations for debugging purposes.

disableTelemetry

boolean

Disables Storybook's telemetry.

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.

webpackStatsJson

boolean ∪ string
Default: false

Write Webpack Stats JSON to disk.

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.

uiFramework

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

Storybook framework npm package.

Upgrade to Storybook 7.