nx/docs/generated/packages/storybook/executors/storybook.json

{
  "name": "storybook",
  "implementation": "/packages/storybook/src/executors/storybook/storybook.impl.ts",
  "schema": {
    "version": 2,
    "outputCapture": "direct-nodejs",
    "title": "Storybook Dev Builder",
    "cli": "nx",
    "description": "Serve up Storybook in development mode.",
    "type": "object",
    "presets": [
      {
        "name": "Default minimum setup",
        "keys": ["uiFramework", "port", "configDir"]
      }
    ],
    "properties": {
      "uiFramework": {
        "type": "string",
        "description": "Storybook framework npm package.",
        "enum": [
          "@storybook/react",
          "@storybook/html",
          "@storybook/web-components",
          "@storybook/vue",
          "@storybook/vue3",
          "@storybook/svelte"
        ],
        "default": "@storybook/react",
        "x-priority": "important"
      },
      "port": {
        "type": "number",
        "description": "Port to listen on.",
        "default": 9009
      },
      "previewUrl": { "type": "string", "description": "Preview URL." },
      "host": {
        "type": "string",
        "description": "Host to listen on.",
        "default": "localhost"
      },
      "staticDir": {
        "type": "array",
        "description": "Directory where to load static files from, array of strings.",
        "items": { "type": "string" },
        "x-deprecated": "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."
      },
      "configDir": {
        "type": "string",
        "description": "Directory where to load Storybook configurations from.",
        "x-completion-type": "directory",
        "x-priority": "important"
      },
      "https": {
        "type": "boolean",
        "description": "Serve Storybook over HTTPS. Note: You must provide your own certificate information.",
        "default": false
      },
      "open": {
        "type": "boolean",
        "description": "Open browser window automatically."
      },
      "ci": {
        "type": "boolean",
        "description": "CI mode (skip interactive prompts, don't open browser).",
        "default": false
      },
      "loglevel": {
        "type": "string",
        "description": "Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent].",
        "pattern": "(silly|verbose|info|warn|silent)"
      },
      "quiet": {
        "type": "boolean",
        "description": "Suppress verbose build output."
      },
      "docs": {
        "type": "boolean",
        "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation."
      },
      "docsMode": {
        "type": "boolean",
        "description": "Starts Storybook in documentation mode. Learn more about it : https://storybook.js.org/docs/react/writing-docs/build-documentation#preview-storybooks-documentation.",
        "default": false
      }
    },
    "additionalProperties": true,
    "definitions": {},
    "required": ["uiFramework", "configDir"],
    "examplesFile": "---\ntitle: Storybook dev server executor examples\ndescription: This page contains examples for the @nrwl/storybook:storybook executor.\n---\n\n`project.json`:\n\n```json\n//...\n\"ui\": {\n    \"targets\": {\n        //...\n        \"storybook\": {\n            \"executor\": \"@nrwl/storybook:storybook\",\n            \"options\": {\n                \"uiFramework\": \"@storybook/react\",\n                \"port\": 4400,\n                \"configDir\": \"libs/ui/.storybook\"\n            },\n            \"configurations\": {\n                \"ci\": {\n                    \"quiet\": true\n                }\n            }\n        },\n    }\n}\n```\n\n```bash\nnx run ui:storybook\n```\n\n## Examples\n\n### For non-Angular projects\n\n{% tabs %}\n{% tab label=\"Setting the uiFramework\" %}\n\nYou can change the `uiFramework` option, to correspond to the framework you are using for your project. Supported values are: `\"@storybook/react\"`, `\"@storybook/html\"`, `\"@storybook/web-components\"`, `\"@storybook/vue\"`, `\"@storybook/vue3\"` and `\"@storybook/svelte\"`. If you are using Angular, please check out the Angular-specific Storybook executor.\n\n```json\n\"storybook\": {\n    \"executor\": \"@nrwl/storybook:storybook\",\n    \"options\": {\n        \"uiFramework\": \"@storybook/web-components\",\n        \"port\": 4400,\n        \"configDir\":  \"libs/ui/.storybook\"\n    },\n    \"configurations\": {\n        \"ci\": {\n            \"quiet\": true\n        }\n    }\n}\n```\n\n{% /tab %}\n{% tab label=\"Working in docsMode\" %}\n\nYou can work in docs mode, building a documentation-only site, by setting the `docsMode` option to `true` and using the `@storybook/addon-docs` addon.\n\nRead more on the [Storybook documentation page for `addon-docs`](https://storybook.js.org/addons/@storybook/addon-docs).\n\n```json\n\"storybook\": {\n    \"executor\": \"@nrwl/storybook:storybook\",\n    \"options\": {\n        \"uiFramework\": \"@storybook/react\",\n        \"port\": 4400,\n        \"configDir\": \"libs/ui/.storybook\",\n        \"docsMode\": true\n    },\n    \"configurations\": {\n        \"ci\": {\n            \"quiet\": true\n        }\n    }\n}\n```\n\n{% /tab %}\n\n{% /tabs %}\n\n### For Angular projects\n\n{% tabs %}\n{% tab label=\"Default configuration\" %}\n\nThis 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](https://storybook.js.org/docs/angular/get-started/install).\n\n```json\n\"storybook\": {\n  \"executor\": \"@storybook/angular:start-storybook\",\n  \"options\": {\n    \"port\": 4400,\n    \"configDir\": \"libs/ui/.storybook\",\n    \"browserTarget\": \"ui:build\",\n    \"compodoc\": false\n  },\n  \"configurations\": {\n    \"ci\": {\n      \"quiet\": true\n    }\n  }\n},\n```\n\n{% /tab %}\n{% tab label=\"Changing the browserTarget\" %}\n\nYou can set the [`browserTarget`](/packages/storybook/documents/angular-browser-target) to use `build-storybook` as the builder. This is most useful in the cases where your project does not have a `build` target.\n\n```json\n\"storybook\": {\n  \"executor\": \"@storybook/angular:start-storybook\",\n  \"options\": {\n    \"port\": 4400,\n    \"configDir\": \"libs/ui/.storybook\",\n    \"browserTarget\": \"ui:build-storybook\",\n    \"compodoc\": false\n  },\n  \"configurations\": {\n    \"ci\": {\n      \"quiet\": true\n    }\n  }\n},\n```\n\n{% /tab %}\n\n{% tab label=\"Adding styles\" %}\n\nYou 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](/packages/storybook/documents/angular-configuring-styles).\n\n```json\n\"storybook\": {\n  \"executor\": \"@storybook/angular:start-storybook\",\n  \"options\": {\n    \"port\": 4400,\n    \"configDir\": \"libs/ui/.storybook\",\n    \"browserTarget\": \"ui:build\",\n    \"compodoc\": false,\n    \"styles\": [\"some-styles.css\"],\n    \"stylePreprocessorOptions\": {\n          \"includePaths\": [\"some-style-paths\"]\n    }\n  },\n  \"configurations\": {\n    \"ci\": {\n      \"quiet\": true\n    }\n  }\n},\n```\n\n{% /tab %}\n\n{% /tabs %}\n"
  },
  "description": "Serve Storybook.",
  "aliases": [],
  "hidden": false,
  "path": "/packages/storybook/src/executors/storybook/schema.json",
  "type": "executor"
}