docs(storybook): update docs about browserTarget (#21642)
This commit is contained in:
Katerina Skroumpelou
GitHub
parent
fa226c9a9a
commit
f4fa014ff6
@ -5005,9 +5005,9 @@
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Angular: The browserTarget",
|
||||
"path": "/deprecated/storybook/angular-browser-target",
|
||||
"id": "angular-browser-target",
|
||||
"name": "Angular - The projectBuildConfig",
|
||||
"path": "/deprecated/storybook/angular-project-build-config",
|
||||
"id": "angular-project-build-config",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
@ -5161,9 +5161,9 @@
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Angular: The browserTarget",
|
||||
"path": "/deprecated/storybook/angular-browser-target",
|
||||
"id": "angular-browser-target",
|
||||
"name": "Angular - The projectBuildConfig",
|
||||
"path": "/deprecated/storybook/angular-project-build-config",
|
||||
"id": "angular-project-build-config",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
@ -5212,9 +5212,9 @@
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Angular: The browserTarget",
|
||||
"path": "/deprecated/storybook/angular-browser-target",
|
||||
"id": "angular-browser-target",
|
||||
"name": "Angular - The projectBuildConfig",
|
||||
"path": "/deprecated/storybook/angular-project-build-config",
|
||||
"id": "angular-project-build-config",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
|
||||
@ -6852,14 +6852,14 @@
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"id": "angular-browser-target",
|
||||
"name": "Angular: The browserTarget",
|
||||
"description": "This document explains the role of the browserTarget in Angular projects with a Storybook configuration, and how the Storybook executors use it.",
|
||||
"id": "angular-project-build-config",
|
||||
"name": "Angular - The projectBuildConfig",
|
||||
"description": "This document explains the role of the projectBuildConfig in Angular projects with a Storybook configuration, and how the Storybook executors use it.",
|
||||
"mediaImage": "",
|
||||
"file": "shared/deprecated/storybook/angular-browser-target",
|
||||
"file": "shared/deprecated/storybook/angular-project-build-config",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/storybook/angular-browser-target",
|
||||
"path": "/deprecated/storybook/angular-project-build-config",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
@ -7067,14 +7067,14 @@
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"id": "angular-browser-target",
|
||||
"name": "Angular: The browserTarget",
|
||||
"description": "This document explains the role of the browserTarget in Angular projects with a Storybook configuration, and how the Storybook executors use it.",
|
||||
"id": "angular-project-build-config",
|
||||
"name": "Angular - The projectBuildConfig",
|
||||
"description": "This document explains the role of the projectBuildConfig in Angular projects with a Storybook configuration, and how the Storybook executors use it.",
|
||||
"mediaImage": "",
|
||||
"file": "shared/deprecated/storybook/angular-browser-target",
|
||||
"file": "shared/deprecated/storybook/angular-project-build-config",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/storybook/angular-browser-target",
|
||||
"path": "/deprecated/storybook/angular-project-build-config",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
@ -7137,15 +7137,15 @@
|
||||
"path": "/deprecated/storybook/angular-storybook-targets",
|
||||
"tags": []
|
||||
},
|
||||
"/deprecated/storybook/angular-browser-target": {
|
||||
"id": "angular-browser-target",
|
||||
"name": "Angular: The browserTarget",
|
||||
"description": "This document explains the role of the browserTarget in Angular projects with a Storybook configuration, and how the Storybook executors use it.",
|
||||
"/deprecated/storybook/angular-project-build-config": {
|
||||
"id": "angular-project-build-config",
|
||||
"name": "Angular - The projectBuildConfig",
|
||||
"description": "This document explains the role of the projectBuildConfig in Angular projects with a Storybook configuration, and how the Storybook executors use it.",
|
||||
"mediaImage": "",
|
||||
"file": "shared/deprecated/storybook/angular-browser-target",
|
||||
"file": "shared/deprecated/storybook/angular-project-build-config",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/storybook/angular-browser-target",
|
||||
"path": "/deprecated/storybook/angular-project-build-config",
|
||||
"tags": []
|
||||
},
|
||||
"/deprecated/storybook/migrate-webpack-final-angular": {
|
||||
|
||||
@ -134,7 +134,7 @@
|
||||
},
|
||||
"additionalProperties": true,
|
||||
"required": ["configDir"],
|
||||
"examplesFile": "---\ntitle: Storybook builder executor examples\ndescription: This page contains examples for the @nx/storybook:build executor.\n---\n\n`project.json`:\n\n```json\n//...\n\"ui\": {\n \"targets\": {\n //...\n \"build-storybook\": {\n \"executor\": \"@nx/storybook:build\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ui\",\n \"configDir\": \"libs/ui/.storybook\"\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n }\n}\n```\n\n```bash\nnx run ui:build-storybook\n```\n\n## Examples\n\n### For non-Angular projects\n\n{% tabs %}\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\": \"@nx/storybook:build\",\n \"options\": {\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:build-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\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"apps/ngapp/.storybook\",\n \"browserTarget\": \"ngapp: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`](/deprecated/storybook/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\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"apps/ngapp/.storybook\",\n \"browserTarget\": \"ngapp: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](/recipes/storybook/angular-configuring-styles).\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"apps/ngapp/.storybook\",\n \"browserTarget\": \"ngapp:build-storybook\",\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"
|
||||
"examplesFile": "---\ntitle: Storybook builder executor examples\ndescription: This page contains examples for the @nx/storybook:build executor.\n---\n\n`project.json`:\n\n```json\n//...\n\"ui\": {\n \"targets\": {\n //...\n \"build-storybook\": {\n \"executor\": \"@nx/storybook:build\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ui\",\n \"configDir\": \"libs/ui/.storybook\"\n },\n \"configurations\": {\n \"ci\": {\n \"quiet\": true\n }\n }\n }\n}\n```\n\n```bash\nnx run ui:build-storybook\n```\n\n## Examples\n\n### For non-Angular projects\n\n{% tabs %}\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\": \"@nx/storybook:build\",\n \"options\": {\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:build-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\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"apps/ngapp/.storybook\",\n \"browserTarget\": \"ngapp: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` 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](/recipes/storybook/overview-angular) recipe.\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"apps/ngapp/.storybook\",\n \"browserTarget\": \"ngapp: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](/recipes/storybook/angular-configuring-styles).\n\n```json\n\"build-storybook\": {\n \"executor\": \"@storybook/angular:build-storybook\",\n \"outputs\": [\"{options.outputDir}\"],\n \"options\": {\n \"outputDir\": \"dist/storybook/ngapp\",\n \"configDir\": \"apps/ngapp/.storybook\",\n \"browserTarget\": \"ngapp:build-storybook\",\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": "Build Storybook.",
|
||||
"aliases": [],
|
||||
|
||||
@ -113,7 +113,7 @@
|
||||
"additionalProperties": true,
|
||||
"definitions": {},
|
||||
"required": ["configDir"],
|
||||
"examplesFile": "---\ntitle: Storybook dev server executor examples\ndescription: This page contains examples for the @nx/storybook:storybook executor.\n---\n\n`project.json`:\n\n```json\n//...\n\"ui\": {\n \"targets\": {\n //...\n \"storybook\": {\n \"executor\": \"@nx/storybook:storybook\",\n \"options\": {\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=\"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\": \"@nx/storybook:storybook\",\n \"options\": {\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`](/deprecated/storybook/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](/recipes/storybook/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"
|
||||
"examplesFile": "---\ntitle: Storybook dev server executor examples\ndescription: This page contains examples for the @nx/storybook:storybook executor.\n---\n\n`project.json`:\n\n```json\n//...\n\"ui\": {\n \"targets\": {\n //...\n \"storybook\": {\n \"executor\": \"@nx/storybook:storybook\",\n \"options\": {\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=\"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\": \"@nx/storybook:storybook\",\n \"options\": {\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` 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](/recipes/storybook/overview-angular) recipe.\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](/recipes/storybook/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": [],
|
||||
|
||||
@ -1429,10 +1429,10 @@
|
||||
"file": "shared/deprecated/storybook/angular-storybook-targets"
|
||||
},
|
||||
{
|
||||
"id": "angular-browser-target",
|
||||
"name": "Angular: The browserTarget",
|
||||
"description": "This document explains the role of the browserTarget in Angular projects with a Storybook configuration, and how the Storybook executors use it.",
|
||||
"file": "shared/deprecated/storybook/angular-browser-target"
|
||||
"id": "angular-project-build-config",
|
||||
"name": "Angular - The projectBuildConfig",
|
||||
"description": "This document explains the role of the projectBuildConfig in Angular projects with a Storybook configuration, and how the Storybook executors use it.",
|
||||
"file": "shared/deprecated/storybook/angular-project-build-config"
|
||||
},
|
||||
{
|
||||
"id": "migrate-webpack-final-angular",
|
||||
|
||||
@ -1,49 +1,18 @@
|
||||
---
|
||||
title: Angular - The browserTarget
|
||||
description: This document explains the role of the browserTarget in Angular projects with a Storybook configuration, and how the Storybook executors use it.
|
||||
title: Angular - The projectBuildConfig
|
||||
description: This document explains the role of projectBuildConfig in Angular projects with a Storybook configuration, and how the Storybook executors use it.
|
||||
---
|
||||
|
||||
# The `browserTarget` for Angular projects with a Storybook configuration
|
||||
# Setting up `projectBuildConfig` for Nx versions `<14.1.8`
|
||||
|
||||
{% callout type="warning" title="Deprecated!" %}
|
||||
**Careful**: This is for older versions of Nx - for the latest version please look at the [Set up Storybook for Angular Projects](/recipes/storybook/overview-angular) recipe.
|
||||
{% /callout %}
|
||||
|
||||
{% callout type="note" title="Note" %}
|
||||
This documentation page contains information about the [Storybook plugin](/nx-api/storybook), specifically regarding [Angular projects that are using Storybook](/recipes/storybook/overview-angular).
|
||||
{% /callout %}
|
||||
|
||||
## Setting up `browserTarget`
|
||||
|
||||
If you're using [Storybook](/nx-api/storybook) in your Angular project, you will notice that `browserTarget` is specified for the `storybook` and `build-storybook` targets, much like it is done for `serve` or other targets. Angular needs the `browserTarget` for Storybook in order to know which configuration to use for the build. If your project is buildable (it has a `build` target, and uses the main Angular builder - `@angular-devkit/build-angular:browser`) the `browserTarget` for Storybook will use the `build` target, if it's not buildable it will use the `build-storybook` target.
|
||||
You do not have to do anything manually. Nx will create the configuration for you. Even if you are migrating from an older version of Nx, Nx will make sure to change your `package.json` Storybook targets to match the new schema.
|
||||
|
||||
You can read more about the `browserTarget` in the [official Angular documentation](https://angular.io/cli/serve).
|
||||
|
||||
Your Storybook targets in your `project.json` will look like this:
|
||||
|
||||
```jsonc {% fileName="project.json" %}
|
||||
"storybook": {
|
||||
"executor": "@storybook/angular:start-storybook",
|
||||
"options": {
|
||||
...
|
||||
"browserTarget": "my-project:build"
|
||||
},
|
||||
...
|
||||
},
|
||||
"build-storybook": {
|
||||
"executor": "@storybook/angular:build-storybook",
|
||||
...
|
||||
"options": {
|
||||
...
|
||||
"browserTarget": "my-project:build"
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
This setup instructs Nx to use the configuration under the `build` target of `my-project` when using the `storybook` and `build-storybook` executors.
|
||||
|
||||
## Setting up `projectBuildConfig` for Nx versions `<14.1.8`
|
||||
|
||||
**_Careful: This is for older versions of Nx - for the latest version please look at the section above, about `browserTarget`_**
|
||||
|
||||
If you are on Nx version `<14.1.8`, you're still using our custom executor, which means that you have to comply by the Nx Storybook schema. This means that the contents of `browserTarget` should be placed in the `projectBuildConfig` property. This is telling Storybook where to get the build configuration from. To know more about the purpose of `browserTarget` (and `projectBuildConfig`) read the section above.
|
||||
|
||||
If you're using Nx version `>=13.4.6` either in a new Nx workspace, or you migrated your older Nx workspace to Nx version `>=13.4.6`, Nx will automatically add the `projectBuildConfig` property in your projects `project.json` files, for projects that are using Storybook.
|
||||
@ -143,12 +143,43 @@ export const Heading: Story = {
|
||||
|
||||
Notice the interaction test on the second story, inside the `play` function. This just tests if the default text that appears on generated components exists in the rendered component. You can edit this test to suit your needs. You can read more about interaction tests [here](https://storybook.js.org/docs/angular/writing-tests/interaction-testing).
|
||||
|
||||
## Understanding the role of `browserTarget`
|
||||
|
||||
You will notice that `browserTarget` is specified for the `storybook` and `build-storybook` targets, much like it is done for `serve` or other targets. Angular needs the `browserTarget` for Storybook in order to know which configuration to use for the build. If your project is buildable (it has a `build` target, and uses the main Angular builder - `@angular-devkit/build-angular:browser`, `@angular-devkit/build-angular:application` or `@angular-devkit/build-angular:browser-esbuild`) the `browserTarget` for Storybook will use the `build` target, if it's not buildable (or is using another Angular builder) it will use the `build-storybook` target.
|
||||
You do not have to do anything manually. Nx will create the configuration for you. Even if you are migrating from an older version of Nx, Nx will make sure to change your `package.json` Storybook targets to match the new schema.
|
||||
|
||||
You can read more about the `browserTarget` in the [official Angular documentation](https://angular.io/cli/serve).
|
||||
|
||||
Your Storybook targets in your `project.json` (or if you run `nx show project my-project --web`) will look like this:
|
||||
|
||||
```jsonc {% fileName="project.json" %}
|
||||
"storybook": {
|
||||
"executor": "@storybook/angular:start-storybook",
|
||||
"options": {
|
||||
...
|
||||
"browserTarget": "my-project:build"
|
||||
},
|
||||
...
|
||||
},
|
||||
"build-storybook": {
|
||||
"executor": "@storybook/angular:build-storybook",
|
||||
...
|
||||
"options": {
|
||||
...
|
||||
"browserTarget": "my-project:build"
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
This setup instructs Nx to use the configuration under the `build` target of `my-project` when using the `storybook` and `build-storybook` executors.
|
||||
|
||||
## More Documentation
|
||||
|
||||
- [Set up Compodoc for Storybook on Nx](/recipes/storybook/angular-storybook-compodoc)
|
||||
- [Information about the `storybook` tasks](/deprecated/storybook/angular-storybook-targets)
|
||||
- [Configuring styles and preprocessor options](/recipes/storybook/angular-configuring-styles)
|
||||
- [The `browserTarget`](/deprecated/storybook/angular-browser-target)
|
||||
- [The `projectBuildConfig`](/deprecated/storybook/angular-project-build-config)
|
||||
|
||||
You can find all Storybook-related Nx topics [here](/nx-api#storybook).
|
||||
|
||||
|
||||
@ -230,7 +230,7 @@
|
||||
- [Angular Schematics and Builders](/deprecated/angular-schematics-builders)
|
||||
- [Storybook deprecated docs](/deprecated/storybook)
|
||||
- [Angular: Information about the Storybook targets](/deprecated/storybook/angular-storybook-targets)
|
||||
- [Angular: The browserTarget](/deprecated/storybook/angular-browser-target)
|
||||
- [Angular - The projectBuildConfig](/deprecated/storybook/angular-project-build-config)
|
||||
- [Angular: Storybook Migration to webpackFinal](/deprecated/storybook/migrate-webpack-final-angular)
|
||||
- [Angular: Upgrading to Storybook 6](/deprecated/storybook/upgrade-storybook-v6-angular)
|
||||
- [React: Storybook Migration to webpackFinal and the Nx Addon](/deprecated/storybook/migrate-webpack-final-react)
|
||||
|
||||
@ -687,7 +687,9 @@ const packagesDocuments = {
|
||||
'/packages/storybook/documents/angular-configuring-styles':
|
||||
'/recipes/storybook/angular-configuring-styles',
|
||||
'/storybook/angular-browser-target':
|
||||
'/deprecated/storybook/angular-browser-target',
|
||||
'/deprecated/storybook/angular-project-build-config',
|
||||
'/deprecated/storybook/angular-browser-target':
|
||||
'/deprecated/storybook/angular-project-build-config',
|
||||
'/storybook/migrate-webpack-final-angular':
|
||||
'/deprecated/storybook/migrate-webpack-final-angular',
|
||||
'/storybook/upgrade-storybook-v6-angular':
|
||||
@ -697,7 +699,7 @@ const packagesDocuments = {
|
||||
'/storybook/upgrade-storybook-v6-react':
|
||||
'/deprecated/storybook/upgrade-storybook-v6-react',
|
||||
'/packages/storybook/documents/angular-browser-target':
|
||||
'/deprecated/storybook/angular-browser-target',
|
||||
'/deprecated/storybook/angular-project-build-config',
|
||||
'/packages/storybook/documents/migrate-webpack-final-angular':
|
||||
'/deprecated/storybook/migrate-webpack-final-angular',
|
||||
'/packages/storybook/documents/upgrade-storybook-v6-angular':
|
||||
|
||||
@ -89,7 +89,7 @@ This is the default configuration for Angular projects using Storybook. You can
|
||||
{% /tab %}
|
||||
{% tab label="Changing the browserTarget" %}
|
||||
|
||||
You can set the [`browserTarget`](/deprecated/storybook/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.
|
||||
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](/recipes/storybook/overview-angular) recipe.
|
||||
|
||||
```json
|
||||
"build-storybook": {
|
||||
|
||||
@ -88,7 +88,7 @@ This is the default configuration for Angular projects using Storybook. You can
|
||||
{% /tab %}
|
||||
{% tab label="Changing the browserTarget" %}
|
||||
|
||||
You can set the [`browserTarget`](/deprecated/storybook/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.
|
||||
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](/recipes/storybook/overview-angular) recipe.
|
||||
|
||||
```json
|
||||
"storybook": {
|
||||
|
||||
@ -149,13 +149,18 @@ export function findStorybookAndBuildTargetsAndCompiler(targets: {
|
||||
'@nrwl/esbuild:esbuild',
|
||||
'@nrwl/next:build',
|
||||
'@nxext/vite:build',
|
||||
'@angular-devkit/build-angular:application',
|
||||
'@angular-devkit/build-angular:browser',
|
||||
'@angular-devkit/build-angular:browser-esbuild',
|
||||
];
|
||||
|
||||
for (const target in targets) {
|
||||
if (arrayOfBuilders.includes(targets[target].executor)) {
|
||||
if (
|
||||
targets[target].executor === '@angular-devkit/build-angular:browser'
|
||||
targets[target].executor === '@angular-devkit/build-angular:browser' ||
|
||||
targets[target].executor ===
|
||||
'@angular-devkit/build-angular:browser-esbuild' ||
|
||||
targets[target].executor === '@angular-devkit/build-angular:application'
|
||||
) {
|
||||
/**
|
||||
* Not looking for '@nx/angular:ng-packagr-lite' or any other
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user