@nx/storybook - Executors

The @nx/storybook plugin provides various executors to help you create and configure storybook projects within your Nx workspace. Below is a complete reference for all available executors and their options.

`build`

Build storybook in production mode.

project.json:

//...
"ui": {
    "targets": {
        //...
        "build-storybook": {
            "executor": "@nx/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

Working in docsMode

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.

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

For Angular projects

Default configuration

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": "apps/ngapp/.storybook",
    "browserTarget": "ngapp:build",
    "compodoc": false
  },
  "configurations": {
    "ci": {
      "quiet": true
    }
  }
}

Changing the browserTarget

You can set the browserTarget to use build-storybook as the builder. This is most useful in the cases where your project does not have a build target. Read more about the browserTarget in the Set up Storybook for Angular Projects recipe.

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

Adding styles

You can add paths to stylesheets to be included in the Storybook build by using the styles array. You can also add stylePreprocessorOptions, much like you would do in the Angular builder. You can read more in our guide about styles and preprocessor options for Storybook.

"build-storybook": {
  "executor": "@storybook/angular:build-storybook",
  "outputs": ["{options.outputDir}"],
  "options": {
    "outputDir": "dist/storybook/ngapp",
    "configDir": "apps/ngapp/.storybook",
    "browserTarget": "ngapp:build-storybook",
    "compodoc": false,
    "styles": ["some-styles.css"],
    "stylePreprocessorOptions": {
        "includePaths": ["some-style-paths"]
 }
  },
  "configurations": {
    "ci": {
      "quiet": true
    }
  }
}

Options

Option	Type	Description	Default
`configDir`	string [required]	Directory where to load Storybook configurations from.
`debugWebpack`	boolean	Display final webpack configurations for debugging purposes.
`disableTelemetry`	boolean	Disables Storybook’s telemetry.
`docs`	boolean	Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.
`docsMode`	boolean	Build a documentation-only site using addon-docs.	`false`
`loglevel`	string	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.
`staticDir`	array	Directory where to load static files from, array of strings.
`stylePreprocessorOptions`	object	Options to pass to style preprocessors.
`styles`	array	Global styles to be included in the build.
`webpackStatsJson`	boolean	string	Write Webpack Stats JSON to disk.

`storybook`

Serve up Storybook in development mode.