@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

{% tabs %} {% tab label=“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.

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

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

{% /tab %}

{% /tabs %}

For Angular projects

{% tabs %} {% tab label=“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
    }
  }
}

{% /tab %} {% tab label=“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
    }
  }
}

{% /tab %}

{% tab label=“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
    }
  }
}

{% /tab %}

{% /tabs %}

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.

project.json:

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

nx run ui:storybook

Examples

For non-Angular projects

{% tabs %} {% tab label=“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.

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

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

{% /tab %}

{% /tabs %}

For Angular projects

{% tabs %} {% tab label=“Default configuration” %}

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

"storybook": {
  "executor": "@storybook/angular:start-storybook",
  "options": {
    "port": 4400,
    "configDir": "libs/ui/.storybook",
    "browserTarget": "ui:build",
    "compodoc": false
  },
  "configurations": {
    "ci": {
      "quiet": true
    }
  }
},

{% /tab %} {% tab label=“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.

"storybook": {
  "executor": "@storybook/angular:start-storybook",
  "options": {
    "port": 4400,
    "configDir": "libs/ui/.storybook",
    "browserTarget": "ui:build-storybook",
    "compodoc": false
  },
  "configurations": {
    "ci": {
      "quiet": true
    }
  }
},

{% /tab %}

{% tab label=“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.

"storybook": {
  "executor": "@storybook/angular:start-storybook",
  "options": {
    "port": 4400,
    "configDir": "libs/ui/.storybook",
    "browserTarget": "ui:build",
    "compodoc": false,
    "styles": ["some-styles.css"],
    "stylePreprocessorOptions": {
          "includePaths": ["some-style-paths"]
    }
  },
  "configurations": {
    "ci": {
      "quiet": true
    }
  }
},

{% /tab %}

{% /tabs %}

Options

Option	Type	Description	Default
configDir	string [required]	Directory where to load Storybook configurations from.
ci	boolean	CI mode (skip interactive prompts, don’t open browser).	false
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	Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.	false
host	string	Host to listen on.
https	boolean	Serve Storybook over HTTPS. Note: You must provide your own certificate information.	false
loglevel	string	Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent].
noOpen	boolean	Do not open Storybook automatically in the browser.
open	boolean	Open browser window automatically.
port	number	Port to listen on.	9009
previewUrl	string	Preview URL.
quiet	boolean	Suppress verbose build output.
smokeTest	boolean	Exit after successful start.
sslCa	string	Provide an SSL certificate authority. (Optional with —https, required if using a self-signed certificate).
sslCert	string	Provide an SSL certificate. (Required with —https).
sslKey	string	Provide an SSL key. (Required with —https).
staticDir	array	Directory where to load static files from, array of strings.
uiFramework	string	Storybook framework npm package.
webpackStatsJson	boolean	string	Write Webpack Stats JSON to disk.