docs(core): remove deprecated docs page for Nx 14 and earlier (#22767)
This commit is contained in:
Jack Hsu
GitHub
parent
455742a8d6
commit
839e4b25fc
@ -21,7 +21,7 @@ Here are some of our feature highlights:
|
||||
## Deprecations
|
||||
|
||||
{% cards cols="2" %}
|
||||
{% card title="workspace-lint" type="document" url="/deprecated/workspace-lint" /%}
|
||||
{% card title="workspace-lint" type="document" url="https://github.com/nrwl/nx/pull/14287" /%}
|
||||
{% card title="module federation utils from devkit public api" type="external" url="https://github.com/nrwl/nx/pull/16574" /%}
|
||||
{% card title="Global implicitDependencies" url="/deprecated/global-implicit-dependencies" /%}
|
||||
{% card title="stylus style option for react and next" type="external" url="https://github.com/nrwl/nx/pull/16135" /%}
|
||||
|
||||
@ -4731,14 +4731,6 @@
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "workspace-lint",
|
||||
"path": "/deprecated/workspace-lint",
|
||||
"id": "workspace-lint",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "As Provided vs. Derived",
|
||||
"path": "/deprecated/as-provided-vs-derived",
|
||||
@ -4763,14 +4755,6 @@
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "defaultCollection",
|
||||
"path": "/deprecated/default-collection",
|
||||
"id": "default-collection",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "runtimeCacheInputs",
|
||||
"path": "/deprecated/runtime-cache-inputs",
|
||||
@ -4811,63 +4795,6 @@
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Storybook deprecated docs",
|
||||
"path": "/deprecated/storybook",
|
||||
"id": "storybook",
|
||||
"isExternal": false,
|
||||
"children": [
|
||||
{
|
||||
"name": "Angular: Information about the Storybook targets",
|
||||
"path": "/deprecated/storybook/angular-storybook-targets",
|
||||
"id": "angular-storybook-targets",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Angular - The projectBuildConfig",
|
||||
"path": "/deprecated/storybook/angular-project-build-config",
|
||||
"id": "angular-project-build-config",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Angular: Storybook Migration to webpackFinal",
|
||||
"path": "/deprecated/storybook/migrate-webpack-final-angular",
|
||||
"id": "migrate-webpack-final-angular",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Angular: Upgrading to Storybook 6",
|
||||
"path": "/deprecated/storybook/upgrade-storybook-v6-angular",
|
||||
"id": "upgrade-storybook-v6-angular",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "React: Storybook Migration to webpackFinal and the Nx Addon",
|
||||
"path": "/deprecated/storybook/migrate-webpack-final-react",
|
||||
"id": "migrate-webpack-final-react",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "React: Upgrading to Storybook 6",
|
||||
"path": "/deprecated/storybook/upgrade-storybook-v6-react",
|
||||
"id": "upgrade-storybook-v6-react",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
}
|
||||
],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "v1 Nx Plugin API",
|
||||
"path": "/deprecated/v1-nx-plugin-api",
|
||||
@ -4887,14 +4814,6 @@
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "workspace-lint",
|
||||
"path": "/deprecated/workspace-lint",
|
||||
"id": "workspace-lint",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "As Provided vs. Derived",
|
||||
"path": "/deprecated/as-provided-vs-derived",
|
||||
@ -4919,14 +4838,6 @@
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "defaultCollection",
|
||||
"path": "/deprecated/default-collection",
|
||||
"id": "default-collection",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "runtimeCacheInputs",
|
||||
"path": "/deprecated/runtime-cache-inputs",
|
||||
@ -4967,111 +4878,6 @@
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Storybook deprecated docs",
|
||||
"path": "/deprecated/storybook",
|
||||
"id": "storybook",
|
||||
"isExternal": false,
|
||||
"children": [
|
||||
{
|
||||
"name": "Angular: Information about the Storybook targets",
|
||||
"path": "/deprecated/storybook/angular-storybook-targets",
|
||||
"id": "angular-storybook-targets",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Angular - The projectBuildConfig",
|
||||
"path": "/deprecated/storybook/angular-project-build-config",
|
||||
"id": "angular-project-build-config",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Angular: Storybook Migration to webpackFinal",
|
||||
"path": "/deprecated/storybook/migrate-webpack-final-angular",
|
||||
"id": "migrate-webpack-final-angular",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Angular: Upgrading to Storybook 6",
|
||||
"path": "/deprecated/storybook/upgrade-storybook-v6-angular",
|
||||
"id": "upgrade-storybook-v6-angular",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "React: Storybook Migration to webpackFinal and the Nx Addon",
|
||||
"path": "/deprecated/storybook/migrate-webpack-final-react",
|
||||
"id": "migrate-webpack-final-react",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "React: Upgrading to Storybook 6",
|
||||
"path": "/deprecated/storybook/upgrade-storybook-v6-react",
|
||||
"id": "upgrade-storybook-v6-react",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
}
|
||||
],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Angular: Information about the Storybook targets",
|
||||
"path": "/deprecated/storybook/angular-storybook-targets",
|
||||
"id": "angular-storybook-targets",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Angular - The projectBuildConfig",
|
||||
"path": "/deprecated/storybook/angular-project-build-config",
|
||||
"id": "angular-project-build-config",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Angular: Storybook Migration to webpackFinal",
|
||||
"path": "/deprecated/storybook/migrate-webpack-final-angular",
|
||||
"id": "migrate-webpack-final-angular",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "Angular: Upgrading to Storybook 6",
|
||||
"path": "/deprecated/storybook/upgrade-storybook-v6-angular",
|
||||
"id": "upgrade-storybook-v6-angular",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "React: Storybook Migration to webpackFinal and the Nx Addon",
|
||||
"path": "/deprecated/storybook/migrate-webpack-final-react",
|
||||
"id": "migrate-webpack-final-react",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "React: Upgrading to Storybook 6",
|
||||
"path": "/deprecated/storybook/upgrade-storybook-v6-react",
|
||||
"id": "upgrade-storybook-v6-react",
|
||||
"isExternal": false,
|
||||
"children": [],
|
||||
"disableCollapsible": false
|
||||
},
|
||||
{
|
||||
"name": "v1 Nx Plugin API",
|
||||
"path": "/deprecated/v1-nx-plugin-api",
|
||||
|
||||
@ -6478,17 +6478,6 @@
|
||||
"path": "/deprecated/workspace-json",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"id": "workspace-lint",
|
||||
"name": "workspace-lint",
|
||||
"description": "",
|
||||
"mediaImage": "",
|
||||
"file": "shared/deprecated/workspace-lint",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/workspace-lint",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"id": "as-provided-vs-derived",
|
||||
"name": "As Provided vs. Derived",
|
||||
@ -6522,17 +6511,6 @@
|
||||
"path": "/deprecated/workspace-executors",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"id": "default-collection",
|
||||
"name": "defaultCollection",
|
||||
"description": "",
|
||||
"mediaImage": "",
|
||||
"file": "shared/deprecated/default-collection",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/default-collection",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"id": "runtime-cache-inputs",
|
||||
"name": "runtimeCacheInputs",
|
||||
@ -6588,84 +6566,6 @@
|
||||
"path": "/deprecated/angular-schematics-builders",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"id": "storybook",
|
||||
"name": "Storybook deprecated docs",
|
||||
"description": "Deprecated @nx/storybook package documentation and guides.",
|
||||
"mediaImage": "",
|
||||
"file": "",
|
||||
"itemList": [
|
||||
{
|
||||
"id": "angular-storybook-targets",
|
||||
"name": "Angular: Information about the Storybook targets",
|
||||
"description": "This document explains the role of the storybook and build-storybook targets in Angular projects with a Storybook configuration, and specifically which executors are used for them.",
|
||||
"mediaImage": "",
|
||||
"file": "shared/deprecated/storybook/angular-storybook-targets",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/storybook/angular-storybook-targets",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"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-project-build-config",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/storybook/angular-project-build-config",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"id": "migrate-webpack-final-angular",
|
||||
"name": "Angular: Storybook Migration to webpackFinal",
|
||||
"description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration.",
|
||||
"mediaImage": "",
|
||||
"file": "shared/deprecated/storybook/migrate-webpack-final-angular",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/storybook/migrate-webpack-final-angular",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"id": "upgrade-storybook-v6-angular",
|
||||
"name": "Angular: Upgrading to Storybook 6",
|
||||
"description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for Angular projects.",
|
||||
"mediaImage": "",
|
||||
"file": "shared/deprecated/storybook/storybook-v6-angular",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/storybook/upgrade-storybook-v6-angular",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"id": "migrate-webpack-final-react",
|
||||
"name": "React: Storybook Migration to webpackFinal and the Nx Addon",
|
||||
"description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration and the Nx React Addon.",
|
||||
"mediaImage": "",
|
||||
"file": "shared/deprecated/storybook/migrate-webpack-final-react",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/storybook/migrate-webpack-final-react",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"id": "upgrade-storybook-v6-react",
|
||||
"name": "React: Upgrading to Storybook 6",
|
||||
"description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for React projects.",
|
||||
"mediaImage": "",
|
||||
"file": "shared/deprecated/storybook/storybook-v6-react",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/storybook/upgrade-storybook-v6-react",
|
||||
"tags": []
|
||||
}
|
||||
],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/storybook",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"id": "v1-nx-plugin-api",
|
||||
"name": "v1 Nx Plugin API",
|
||||
@ -6693,17 +6593,6 @@
|
||||
"path": "/deprecated/workspace-json",
|
||||
"tags": []
|
||||
},
|
||||
"/deprecated/workspace-lint": {
|
||||
"id": "workspace-lint",
|
||||
"name": "workspace-lint",
|
||||
"description": "",
|
||||
"mediaImage": "",
|
||||
"file": "shared/deprecated/workspace-lint",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/workspace-lint",
|
||||
"tags": []
|
||||
},
|
||||
"/deprecated/as-provided-vs-derived": {
|
||||
"id": "as-provided-vs-derived",
|
||||
"name": "As Provided vs. Derived",
|
||||
@ -6737,17 +6626,6 @@
|
||||
"path": "/deprecated/workspace-executors",
|
||||
"tags": []
|
||||
},
|
||||
"/deprecated/default-collection": {
|
||||
"id": "default-collection",
|
||||
"name": "defaultCollection",
|
||||
"description": "",
|
||||
"mediaImage": "",
|
||||
"file": "shared/deprecated/default-collection",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/default-collection",
|
||||
"tags": []
|
||||
},
|
||||
"/deprecated/runtime-cache-inputs": {
|
||||
"id": "runtime-cache-inputs",
|
||||
"name": "runtimeCacheInputs",
|
||||
@ -6803,150 +6681,6 @@
|
||||
"path": "/deprecated/angular-schematics-builders",
|
||||
"tags": []
|
||||
},
|
||||
"/deprecated/storybook": {
|
||||
"id": "storybook",
|
||||
"name": "Storybook deprecated docs",
|
||||
"description": "Deprecated @nx/storybook package documentation and guides.",
|
||||
"mediaImage": "",
|
||||
"file": "",
|
||||
"itemList": [
|
||||
{
|
||||
"id": "angular-storybook-targets",
|
||||
"name": "Angular: Information about the Storybook targets",
|
||||
"description": "This document explains the role of the storybook and build-storybook targets in Angular projects with a Storybook configuration, and specifically which executors are used for them.",
|
||||
"mediaImage": "",
|
||||
"file": "shared/deprecated/storybook/angular-storybook-targets",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/storybook/angular-storybook-targets",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"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-project-build-config",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/storybook/angular-project-build-config",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"id": "migrate-webpack-final-angular",
|
||||
"name": "Angular: Storybook Migration to webpackFinal",
|
||||
"description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration.",
|
||||
"mediaImage": "",
|
||||
"file": "shared/deprecated/storybook/migrate-webpack-final-angular",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/storybook/migrate-webpack-final-angular",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"id": "upgrade-storybook-v6-angular",
|
||||
"name": "Angular: Upgrading to Storybook 6",
|
||||
"description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for Angular projects.",
|
||||
"mediaImage": "",
|
||||
"file": "shared/deprecated/storybook/storybook-v6-angular",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/storybook/upgrade-storybook-v6-angular",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"id": "migrate-webpack-final-react",
|
||||
"name": "React: Storybook Migration to webpackFinal and the Nx Addon",
|
||||
"description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration and the Nx React Addon.",
|
||||
"mediaImage": "",
|
||||
"file": "shared/deprecated/storybook/migrate-webpack-final-react",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/storybook/migrate-webpack-final-react",
|
||||
"tags": []
|
||||
},
|
||||
{
|
||||
"id": "upgrade-storybook-v6-react",
|
||||
"name": "React: Upgrading to Storybook 6",
|
||||
"description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for React projects.",
|
||||
"mediaImage": "",
|
||||
"file": "shared/deprecated/storybook/storybook-v6-react",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/storybook/upgrade-storybook-v6-react",
|
||||
"tags": []
|
||||
}
|
||||
],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/storybook",
|
||||
"tags": []
|
||||
},
|
||||
"/deprecated/storybook/angular-storybook-targets": {
|
||||
"id": "angular-storybook-targets",
|
||||
"name": "Angular: Information about the Storybook targets",
|
||||
"description": "This document explains the role of the storybook and build-storybook targets in Angular projects with a Storybook configuration, and specifically which executors are used for them.",
|
||||
"mediaImage": "",
|
||||
"file": "shared/deprecated/storybook/angular-storybook-targets",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/storybook/angular-storybook-targets",
|
||||
"tags": []
|
||||
},
|
||||
"/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-project-build-config",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/storybook/angular-project-build-config",
|
||||
"tags": []
|
||||
},
|
||||
"/deprecated/storybook/migrate-webpack-final-angular": {
|
||||
"id": "migrate-webpack-final-angular",
|
||||
"name": "Angular: Storybook Migration to webpackFinal",
|
||||
"description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration.",
|
||||
"mediaImage": "",
|
||||
"file": "shared/deprecated/storybook/migrate-webpack-final-angular",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/storybook/migrate-webpack-final-angular",
|
||||
"tags": []
|
||||
},
|
||||
"/deprecated/storybook/upgrade-storybook-v6-angular": {
|
||||
"id": "upgrade-storybook-v6-angular",
|
||||
"name": "Angular: Upgrading to Storybook 6",
|
||||
"description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for Angular projects.",
|
||||
"mediaImage": "",
|
||||
"file": "shared/deprecated/storybook/storybook-v6-angular",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/storybook/upgrade-storybook-v6-angular",
|
||||
"tags": []
|
||||
},
|
||||
"/deprecated/storybook/migrate-webpack-final-react": {
|
||||
"id": "migrate-webpack-final-react",
|
||||
"name": "React: Storybook Migration to webpackFinal and the Nx Addon",
|
||||
"description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration and the Nx React Addon.",
|
||||
"mediaImage": "",
|
||||
"file": "shared/deprecated/storybook/migrate-webpack-final-react",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/storybook/migrate-webpack-final-react",
|
||||
"tags": []
|
||||
},
|
||||
"/deprecated/storybook/upgrade-storybook-v6-react": {
|
||||
"id": "upgrade-storybook-v6-react",
|
||||
"name": "React: Upgrading to Storybook 6",
|
||||
"description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for React projects.",
|
||||
"mediaImage": "",
|
||||
"file": "shared/deprecated/storybook/storybook-v6-react",
|
||||
"itemList": [],
|
||||
"isExternal": false,
|
||||
"path": "/deprecated/storybook/upgrade-storybook-v6-react",
|
||||
"tags": []
|
||||
},
|
||||
"/deprecated/v1-nx-plugin-api": {
|
||||
"id": "v1-nx-plugin-api",
|
||||
"name": "v1 Nx Plugin API",
|
||||
|
||||
@ -256,11 +256,5 @@ For more on using Storybook, see the [official Storybook documentation](https://
|
||||
|
||||
Here's more information on common migration scenarios for Storybook with Nx. For Storybook specific migrations that are not automatically handled by Nx please refer to the [official Storybook page](https://storybook.js.org/)
|
||||
|
||||
- [Upgrading to Storybook 6](/deprecated/storybook/upgrade-storybook-v6-react)
|
||||
- [Migrate to the Nx React Storybook Addon](/deprecated/storybook/migrate-webpack-final-react)
|
||||
- [Storybook 7 migration generator](/nx-api/storybook/generators/migrate-7)
|
||||
- [Storybook 7 setup guide](/nx-api/storybook/documents/storybook-7-setup)
|
||||
|
||||
## Older documentation
|
||||
|
||||
You can find older documentation for the `@nx/storybook` package in our [deprecated section](/deprecated/storybook).
|
||||
|
||||
@ -1348,11 +1348,6 @@
|
||||
"id": "workspace-json",
|
||||
"file": "shared/deprecated/workspace-json"
|
||||
},
|
||||
{
|
||||
"name": "workspace-lint",
|
||||
"id": "workspace-lint",
|
||||
"file": "shared/deprecated/workspace-lint"
|
||||
},
|
||||
{
|
||||
"name": "As Provided vs. Derived",
|
||||
"id": "as-provided-vs-derived",
|
||||
@ -1368,11 +1363,6 @@
|
||||
"id": "workspace-executors",
|
||||
"file": "shared/deprecated/workspace-executors"
|
||||
},
|
||||
{
|
||||
"name": "defaultCollection",
|
||||
"id": "default-collection",
|
||||
"file": "shared/deprecated/default-collection"
|
||||
},
|
||||
{
|
||||
"name": "runtimeCacheInputs",
|
||||
"id": "runtime-cache-inputs",
|
||||
@ -1398,49 +1388,6 @@
|
||||
"id": "angular-schematics-builders",
|
||||
"file": "shared/deprecated/angular-schematics-builders"
|
||||
},
|
||||
{
|
||||
"name": "Storybook deprecated docs",
|
||||
"id": "storybook",
|
||||
"description": "Deprecated @nx/storybook package documentation and guides.",
|
||||
"itemList": [
|
||||
{
|
||||
"id": "angular-storybook-targets",
|
||||
"name": "Angular: Information about the Storybook targets",
|
||||
"description": "This document explains the role of the storybook and build-storybook targets in Angular projects with a Storybook configuration, and specifically which executors are used for them.",
|
||||
"file": "shared/deprecated/storybook/angular-storybook-targets"
|
||||
},
|
||||
{
|
||||
"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",
|
||||
"name": "Angular: Storybook Migration to webpackFinal",
|
||||
"description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration.",
|
||||
"file": "shared/deprecated/storybook/migrate-webpack-final-angular"
|
||||
},
|
||||
{
|
||||
"id": "upgrade-storybook-v6-angular",
|
||||
"name": "Angular: Upgrading to Storybook 6",
|
||||
"description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for Angular projects.",
|
||||
"file": "shared/deprecated/storybook/storybook-v6-angular"
|
||||
},
|
||||
{
|
||||
"id": "migrate-webpack-final-react",
|
||||
"name": "React: Storybook Migration to webpackFinal and the Nx Addon",
|
||||
"description": "This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration and the Nx React Addon.",
|
||||
"file": "shared/deprecated/storybook/migrate-webpack-final-react"
|
||||
},
|
||||
{
|
||||
"id": "upgrade-storybook-v6-react",
|
||||
"name": "React: Upgrading to Storybook 6",
|
||||
"description": "This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for React projects.",
|
||||
"file": "shared/deprecated/storybook/storybook-v6-react"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "v1 Nx Plugin API",
|
||||
"id": "v1-nx-plugin-api",
|
||||
|
||||
@ -1,43 +0,0 @@
|
||||
# defaultCollection
|
||||
|
||||
{% callout type="caution" title="Experimental" %}
|
||||
Configuring `defaultCollection` will no longer have any effect in Nx 17+
|
||||
{% /callout %}
|
||||
|
||||
In the `nx.json` you can set a `defaultCollection` property like this:
|
||||
|
||||
```jsonc
|
||||
{
|
||||
"cli": {
|
||||
"defaultCollection": "@nx/next"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
This would cause the following command
|
||||
|
||||
```shell
|
||||
nx g library my-lib
|
||||
```
|
||||
|
||||
To create a `@nx/next:library` library instead of some other generator with the name `library`.
|
||||
|
||||
This property is no longer needed because the Nx cli automatically will prompt you to choose between the available options if there is any ambiguity. The output looks like this:
|
||||
|
||||
```shell
|
||||
> nx g lib my-lib
|
||||
? Which generator would you like to use? …
|
||||
@nx/react-native:library
|
||||
@nx/angular:library
|
||||
@nx/expo:library
|
||||
@nx/nest:library
|
||||
@nx/node:library
|
||||
|
||||
@nestjs/schematics:library
|
||||
@schematics/angular:library
|
||||
@nx/js:library
|
||||
@nx/next:library
|
||||
@nx/react:library
|
||||
|
||||
None of the above
|
||||
```
|
||||
@ -1,46 +0,0 @@
|
||||
---
|
||||
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.
|
||||
---
|
||||
|
||||
# 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 %}
|
||||
|
||||
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.
|
||||
|
||||
Your Storybook targets in your `project.json` will look like this:
|
||||
|
||||
```jsonc {% fileName="project.json" %}
|
||||
"storybook": {
|
||||
"executor": "@nx/storybook:storybook",
|
||||
"options": {
|
||||
...
|
||||
"projectBuildConfig": "my-project:build-storybook"
|
||||
},
|
||||
...
|
||||
},
|
||||
"build-storybook": {
|
||||
"executor": "@nx/storybook:build",
|
||||
...
|
||||
"options": {
|
||||
...
|
||||
"projectBuildConfig": "my-project:build-storybook"
|
||||
},
|
||||
...
|
||||
}
|
||||
```
|
||||
|
||||
This setup instructs Nx to use the configuration under the `build-storybook` target of `my-project` when using the `storybook` and `build-storybook` executors.
|
||||
|
||||
## Notes about the `defaultProject`
|
||||
|
||||
Storybook for Angular needs a default project specified in order to run. The reason is that it uses that default project to read the build configuration from (paths to files to include in the build, and other configurations/settings). In a pure Angular/Storybook setup (**not** an Nx workspace), the Angular application/project would have an `angular.json` file. That file would have a property called `defaultProject`. In an Nx workspace the `defaultProject` property would be specified in the `nx.json` file. Previously, Nx would try to resolve the `defaultProject` of the workspace, and use the build configuration of that project. In most cases, the `defaultProject`'s build configuration would not work for some other project set up with Storybook, since there would most probably be mismatches in paths or other project-specific options.
|
||||
@ -1,28 +0,0 @@
|
||||
---
|
||||
title: Angular - Information about the Storybook targets
|
||||
description: This document explains the role of the storybook and build-storybook targets in Angular projects with a Storybook configuration, and specifically which executors are used for them.
|
||||
---
|
||||
|
||||
# Information about `storybook` and `build-storybook` targets for Angular projects with a Storybook configuration
|
||||
|
||||
{% 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 %}
|
||||
|
||||
If you are on Nx version `>=14.1.8`, the [Nx Storybook plugin for _Angular_ projects](/recipes/storybook/overview-angular) uses the original Storybook executors for Angular (`"@storybook/angular:start-storybook"` and `"@storybook/angular:build-storybook"`) to serve and build Storybook.
|
||||
|
||||
That means that you can use the official [Storybook for Angular documentation (expand the "Troubleshooting" section)](https://storybook.js.org/docs/angular/get-started/install#troubleshooting) to configure the options for serving and building Storybook.
|
||||
|
||||
## Moving your project targets to the new (native Storybook) schema
|
||||
|
||||
If you are on Nx version `<14.1.8` and you want to move to the latest version (or any version `>=14.1.8`) you can use the `nx migrate` command, which will take care of migrating your Storybook targets across all your Angular projects using Storybook to use the new schema, the original Storybook executors for Angular. The configuration changes that you need to make will be handled automatically by Nx, so you will not have to do any manual work.
|
||||
|
||||
If you have already moved on a version of Nx `>=14.1.8` without using `nx migrate` and now you are having trouble with your Angular projects using Storybook (eg. `Property 'uiFramework' does not match the schema. '@storybook/angular' should be one of ...`), that means that your targets are still using the old schema and they should change. The way to fix that is to call `nx migrate` again like this:
|
||||
|
||||
```bash
|
||||
nx migrate @nx/storybook@14.1.0 --to="@nx/storybook@14.2.0"
|
||||
```
|
||||
|
||||
and follow the instructions that will be printed in the console.
|
||||
|
||||
This command will generate a new `migrations.json` file which will contain the "change-storybook-targets" migration script. This script (when called with `yarn nx migrate --run-migrations`) will change the `storybook` and `build-storybook` targets in all your Angular projects that are configured to use Storybook. The new target configuration will use the native Storybook builders (`@storybook/angular:build-storybook` and `@storybook/angular:start-storybook`) instead of the Nx Storybook builders (`@nx/storybook:build-storybook` and `@nx/storybook:storybook`).
|
||||
@ -1,165 +0,0 @@
|
||||
---
|
||||
title: Angular - Storybook Migration to webpackFinal
|
||||
description: This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration.
|
||||
---
|
||||
|
||||
# Storybook Migration to webpackFinal
|
||||
|
||||
{% callout type="info" title="Configure webpack for Storybook" %}
|
||||
If you are looking for how you can configure webpack for Storybook, please check out our guide: [How to configure Webpack and Vite for Storybook](/recipes/storybook/custom-builder-configs).
|
||||
{% /callout %}
|
||||
|
||||
Nx 12.7 as in combination with Storybook v6.3 doesn't need a custom `webpack.config.js` which was previously required and auto-generated by Nx.
|
||||
|
||||
Here are the main differences to the previous setups:
|
||||
|
||||
- there's no `webpack.config.js`
|
||||
- custom webpack configurations can be added in the `webpackFinal` property of the `main.js` file
|
||||
|
||||
Here's an example of a newly generated `main.js` file:
|
||||
|
||||
```javascript {% fileName=".storybook/main.js" %}
|
||||
// project-level .storybook/main.js file
|
||||
const rootMain = require('../../../.storybook/main');
|
||||
|
||||
module.exports = {
|
||||
...rootMain,
|
||||
|
||||
core: { ...rootMain.core, builder: 'webpack5' },
|
||||
|
||||
stories: [
|
||||
...rootMain.stories,
|
||||
'../src/lib/**/*.stories.mdx',
|
||||
'../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
|
||||
],
|
||||
addons: [...rootMain.addons],
|
||||
webpackFinal: async (config, { configType }) => {
|
||||
// apply any global webpack configs that might have been specified in .storybook/main.js
|
||||
if (rootMain.webpackFinal) {
|
||||
config = await rootMain.webpackFinal(config, { configType });
|
||||
}
|
||||
|
||||
// add your own webpack tweaks if needed
|
||||
|
||||
return config;
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
At the Nx workspace root level, the configuration file looks as follows:
|
||||
|
||||
```javascript {% fileName=".storybook/main.js" %}
|
||||
// root level .storybook/main.js file
|
||||
module.exports = {
|
||||
stories: [],
|
||||
addons: ['@storybook/addon-essentials'],
|
||||
// uncomment the property below if you want to apply some webpack config globally
|
||||
// webpackFinal: async (config, { configType }) => {
|
||||
// // Make whatever fine-grained changes you need that should apply to all storybook configs
|
||||
|
||||
// // Return the altered config
|
||||
// return config;
|
||||
// },
|
||||
};
|
||||
```
|
||||
|
||||
## Migrating
|
||||
|
||||
If you're upgrading from a lower version of Nx, your old Storybook configuration will still work. New configurations generated will use the new syntax as shown above. The newly generated code will also make sure to extend from a global `webpack.config.js` which might exist in the root-level `.storybook/` directory of your Nx workspace.
|
||||
|
||||
This gives you the flexibility to incrementally migrate your configurations.
|
||||
|
||||
Here's the step-by-step migration process:
|
||||
|
||||
### 1. adjust the `main.js` file
|
||||
|
||||
Restructure your `main.js` file so that it looks like in the example illustrated above.
|
||||
|
||||
If you need to keep your root-level `.storybook/webpack.config.js` for now, then make sure you adjust the `main.js` in a way that it properly calls the root-level `webpack.config.js` to inherit all of the global configurations.
|
||||
|
||||
```javascript {% fileName=".storybook/webpack.config.js" %}
|
||||
const rootMain = require('../../../.storybook/main');
|
||||
const rootWebpackConfig = require('../../../.storybook/webpack.config');
|
||||
|
||||
module.exports = {
|
||||
...rootMain,
|
||||
...
|
||||
webpackFinal: async (config) => {
|
||||
// for backwards compatibility call the `rootWebpackConfig`
|
||||
// this can be removed once that one is migrated fully to
|
||||
// use the `webpackFinal` property in the `main.js` file
|
||||
config = rootWebpackConfig({ config });
|
||||
|
||||
// add your own webpack tweaks if needed
|
||||
|
||||
return config;
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
{% callout type="note" title="Tip!" %}
|
||||
The easiest way is probably to generate a new library and Storybook configuration and then copy & paste the `main.js`.
|
||||
{% /callout %}
|
||||
|
||||
### 2. Move any custom webpack configuration to `webpackFinal`
|
||||
|
||||
In previous versions of Nx a custom `webpack.config.js` was generated with the following content:
|
||||
|
||||
```javascript {% fileName="webpack.config.js" %}
|
||||
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
|
||||
const rootWebpackConfig = require('../../../.storybook/webpack.config');
|
||||
/**
|
||||
* Export a function. Accept the base config as the only param.
|
||||
*
|
||||
* @param {Parameters<typeof rootWebpackConfig>[0]} options
|
||||
*/
|
||||
module.exports = async ({ config, mode }) => {
|
||||
config = await rootWebpackConfig({ config, mode });
|
||||
|
||||
const tsPaths = new TsconfigPathsPlugin({
|
||||
configFile: './tsconfig.base.json',
|
||||
});
|
||||
|
||||
config.resolve.plugins
|
||||
? config.resolve.plugins.push(tsPaths)
|
||||
: (config.resolve.plugins = [tsPaths]);
|
||||
|
||||
return config;
|
||||
};
|
||||
```
|
||||
|
||||
Such webpack file is no more needed as Storybook v6.3+ has proper TypeScript support already built-in now.
|
||||
|
||||
In case you made custom modifications to the `webpack.config.js` file, you need to move them over to the `main.js` `webpackFinal` property and then delete the `webpack.config.js`.
|
||||
|
||||
### 3. Remove the root-level `.storybook/webpack.config.js` file
|
||||
|
||||
Once you've migrated all your libraries, you can think about removing the root-level `.storybook/webpack.config.js` file and migrate any custom configuration there to `.storybook/main.js` `webpackFinal` property in the very same folder.
|
||||
|
||||
### 4. Opting in to Webpack 5
|
||||
|
||||
If you choose to opt-in to Webpack 5, by specifying `builder: 'webpack5'` in your project's `.storybook/main.(js|ts)` (as shown above, in the example of a newly generated `main.js` file), don't forget to add the Storybook dependencies for Webpack 5 to work:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="npm" %}
|
||||
|
||||
```shell
|
||||
npm add -D @storybook/builder-webpack5 @storybook/manager-webpack5
|
||||
```
|
||||
|
||||
{% /tab %}
|
||||
{% tab label="yarn" %}
|
||||
|
||||
```shell
|
||||
yarn add -D @storybook/builder-webpack5 @storybook/manager-webpack5
|
||||
```
|
||||
|
||||
{% /tab %}
|
||||
{% tab label="pnpm" %}
|
||||
|
||||
```shell
|
||||
pnpm add -D @storybook/builder-webpack5 @storybook/manager-webpack5
|
||||
```
|
||||
|
||||
{% /tab %}
|
||||
{% /tabs %}
|
||||
@ -1,230 +0,0 @@
|
||||
---
|
||||
title: React - Storybook Migration to webpackFinal and the Nx Addon
|
||||
description: This guide explains how migrate from older versions of Storybook which used a custom webpack.config.js to the new Storybook 6.3+ which uses the webpackFinal property in the main configuration and the Nx React Addon.
|
||||
---
|
||||
|
||||
# Nx React Storybook Addon
|
||||
|
||||
{% callout type="info" title="Configure webpack for Storybook" %}
|
||||
If you are looking for how you can configure webpack for Storybook, please check out our guide: [How to configure Webpack and Vite for Storybook](/recipes/storybook/custom-builder-configs).
|
||||
{% /callout %}
|
||||
|
||||
Nx 12.7 comes with a dedicated Storybook addon for React which dramatically simplifies the Storybook setup and makes sure that Storybook uses the same webpack configuration as your React applications running within an Nx workspace.
|
||||
|
||||
{% youtube
|
||||
src="https://www.youtube.com/embed/oUE74McS_NY"
|
||||
title="New in Nx 12.7: React Storybook Preset"
|
||||
/%}
|
||||
|
||||
Here are the main differences to the previous versions of Nx:
|
||||
|
||||
- there's no `webpack.config.js`; Custom webpack configurations can be added in the `webpackFinal` property of the `main.js` file
|
||||
- the `main.js` file now contains a predefined Storybook addon exported by `@nx/react/plugins/storybook`.
|
||||
|
||||
Here's an example of a newly generated `main.js` file:
|
||||
|
||||
```javascript {% fileName=".storybook/main.js" %}
|
||||
// project-level .storybook/main.js file
|
||||
const rootMain = require('../../../.storybook/main');
|
||||
|
||||
module.exports = {
|
||||
...rootMain,
|
||||
|
||||
core: {
|
||||
...rootMain.core,
|
||||
// opt-into Storybook Webpack 5
|
||||
builder: 'webpack5',
|
||||
},
|
||||
|
||||
stories: [
|
||||
...rootMain.stories,
|
||||
'../src/lib/**/*.stories.mdx',
|
||||
'../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
|
||||
],
|
||||
addons: [...rootMain.addons, '@nx/react/plugins/storybook'],
|
||||
webpackFinal: async (config, { configType }) => {
|
||||
// apply any global webpack configs that might have been specified in .storybook/main.js
|
||||
if (rootMain.webpackFinal) {
|
||||
config = await rootMain.webpackFinal(config, { configType });
|
||||
}
|
||||
|
||||
// add your own webpack tweaks if needed
|
||||
|
||||
return config;
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
At the Nx workspace root level, the configuration file looks as follows:
|
||||
|
||||
```javascript {% fileName=".storybook/main.js" %}
|
||||
// root level .storybook/main.js file
|
||||
module.exports = {
|
||||
stories: [],
|
||||
addons: ['@storybook/addon-essentials'],
|
||||
// uncomment the property below if you want to apply some webpack config globally
|
||||
// webpackFinal: async (config, { configType }) => {
|
||||
// // Make whatever fine-grained changes you need that should apply to all storybook configs
|
||||
|
||||
// // Return the altered config
|
||||
// return config;
|
||||
// },
|
||||
};
|
||||
```
|
||||
|
||||
## Migrating
|
||||
|
||||
If you're upgrading from a lower version of Nx, your old Storybook configuration will still work. New configurations generated will use the new syntax as shown above. The newly generated code will also make sure to extend from a global `webpack.config.js` which might exist in the root-level `.storybook/` directory of your Nx workspace.
|
||||
|
||||
This gives you the flexibility to incrementally migrate your configurations.
|
||||
|
||||
Here's the step-by-step migration process:
|
||||
|
||||
### 1. adjust the `main.js` file
|
||||
|
||||
Restructure your `main.js` file so that it looks like in the example illustrated above.
|
||||
|
||||
If you need to keep your root-level `.storybook/webpack.config.js` for now, then make sure you adjust the `main.js` in a way that it properly calls the root-level `webpack.config.js` to inherit all of the global configurations.
|
||||
|
||||
```javascript {% fileName=".storybook/webpack.config.js" %}
|
||||
const rootMain = require('../../../.storybook/main');
|
||||
const rootWebpackConfig = require('../../../.storybook/webpack.config');
|
||||
|
||||
module.exports = {
|
||||
...rootMain,
|
||||
//...
|
||||
webpackFinal: async (config) => {
|
||||
// for backwards compatibility call the `rootWebpackConfig`
|
||||
// this can be removed once that one is migrated fully to
|
||||
// use the `webpackFinal` property in the `main.js` file
|
||||
config = rootWebpackConfig({ config });
|
||||
|
||||
// add your own webpack tweaks if needed
|
||||
|
||||
return config;
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
{% callout type="note" title="Tip!" %}
|
||||
The easiest way is probably to generate a new library and Storybook configuration and then copy & paste the `main.js`.
|
||||
{% /callout %}
|
||||
|
||||
### 2. Move any custom webpack configuration to `webpackFinal`
|
||||
|
||||
In previous versions of Nx a custom `webpack.config.js` was generated with the following content:
|
||||
|
||||
```javascript {% fileName="webpack.config.js" %}
|
||||
module.exports = async ({ config, mode }) => {
|
||||
config = await rootWebpackConfig({ config, mode });
|
||||
|
||||
const tsPaths = new TsconfigPathsPlugin({
|
||||
configFile: './tsconfig.base.json',
|
||||
});
|
||||
|
||||
config.resolve.plugins
|
||||
? config.resolve.plugins.push(tsPaths)
|
||||
: (config.resolve.plugins = [tsPaths]);
|
||||
|
||||
// Found this here: https://github.com/nrwl/nx/issues/2859
|
||||
// And copied the part of the solution that made it work
|
||||
|
||||
const svgRuleIndex = config.module.rules.findIndex((rule) => {
|
||||
const { test } = rule;
|
||||
|
||||
return test.toString().startsWith('/\\.(svg|ico');
|
||||
});
|
||||
config.module.rules[svgRuleIndex].test =
|
||||
/\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/;
|
||||
|
||||
config.module.rules.push(
|
||||
{
|
||||
test: /\.(png|jpe?g|gif|webp)$/,
|
||||
loader: require.resolve('url-loader'),
|
||||
options: {
|
||||
limit: 10000, // 10kB
|
||||
name: '[name].[hash:7].[ext]',
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
oneOf: [
|
||||
// If coming from JS/TS file, then transform into React component using SVGR.
|
||||
{
|
||||
issuer: {
|
||||
test: /\.[jt]sx?$/,
|
||||
},
|
||||
use: [
|
||||
{
|
||||
loader: require.resolve('@svgr/webpack'),
|
||||
options: {
|
||||
svgo: false,
|
||||
titleProp: true,
|
||||
ref: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: require.resolve('url-loader'),
|
||||
options: {
|
||||
limit: 10000, // 10kB
|
||||
name: '[name].[hash:7].[ext]',
|
||||
esModule: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
// Fallback to plain URL loader.
|
||||
{
|
||||
use: [
|
||||
{
|
||||
loader: require.resolve('url-loader'),
|
||||
options: {
|
||||
limit: 10000, // 10kB
|
||||
name: '[name].[hash:7].[ext]',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}
|
||||
);
|
||||
|
||||
return config;
|
||||
};
|
||||
```
|
||||
|
||||
Such webpack file is no more needed as the `@nx/react/plugins/storybook` now takes care of it.
|
||||
|
||||
In case you made custom modifications to the `webpack.config.js` file, you need to move them over to the `main.js` `webpackFinal` property and then delete the `webpack.config.js`.
|
||||
|
||||
### 3. Remove the root-level `.storybook/webpack.config.js` file
|
||||
|
||||
Once you've migrated all your libraries, you can think about removing the root-level `.storybook/webpack.config.js` file and migrate any custom configuration there to `.storybook/main.js` `webpackFinal` property in the very same folder.
|
||||
|
||||
### 4. Opting in to Webpack 5
|
||||
|
||||
If you choose to opt-in to Webpack 5, by specifying `builder: 'webpack5'` in your project's `.storybook/main.(js|ts)` (as shown above, in the example of a newly generated `main.js` file), don't forget to add the Storybook dependencies for Webpack 5 to work:
|
||||
|
||||
{% tabs %}
|
||||
{% tab label="npm" %}
|
||||
|
||||
```shell
|
||||
npm add -D @storybook/builder-webpack5 @storybook/manager-webpack5
|
||||
```
|
||||
|
||||
{% /tab %}
|
||||
{% tab label="yarn" %}
|
||||
|
||||
```shell
|
||||
yarn add -D @storybook/builder-webpack5 @storybook/manager-webpack5
|
||||
```
|
||||
|
||||
{% /tab %}
|
||||
{% tab label="pnpm" %}
|
||||
|
||||
```shell
|
||||
pnpm add -D @storybook/builder-webpack5 @storybook/manager-webpack5
|
||||
```
|
||||
|
||||
{% /tab %}
|
||||
{% /tabs %}
|
||||
@ -1,204 +0,0 @@
|
||||
---
|
||||
title: Angular - Upgrading to Storybook 6
|
||||
description: This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for Angular projects.
|
||||
---
|
||||
|
||||
# Upgrading to Storybook 6 (and Nx versions >10.1.x and <14.0.0)
|
||||
|
||||
_Disclaimer: From Nx 14.0.0 and on, Nx does not support Storybook v.5. If your workspace is on a version of Nx older than Nx 14, then you will be able to use the generators described in this guide. If you're using Nx >14, then you will already have been automatically migrated to Storybook 6._
|
||||
|
||||
Nx now comes with [Storybook version 6](https://storybook.js.org/releases/6.0). Chances are, if you used Nx version `10.1.x` or older with Storybook, you are using [Storybook version 5.3](https://storybook.js.org/releases/5.3) with configuration files of [Storybook version 5.2](https://storybook.js.org/releases/5.2).
|
||||
|
||||
Nx version `10.2.x` will continue to support Storybook version `5.2.x`, however newer versions of Nx will only support Storybook version `6` (and on).
|
||||
|
||||
When you are running the Nx workspace migration script, your Storybook instances and configurations across your apps and libraries will NOT be migrated automatically. We chose not to migrate your Storybook instances and configurations across your apps and libraries automatically, since there a number of breaking changes that Storybook introduced in versions `5.3` and `6.0`, and making decisions on what to migrate automatically would risk the integrity of your code.
|
||||
|
||||
Instead, when you choose to migrate from Nx versions `<10.1.x` to Nx versions `>10.2.x` (using the Nx migration script - `nx migrate`) we will keep your Storybook packages and Storybook instances and configurations intact. We suggest that you do the migration on your own, using the guide below, with all the references to the official Storybook migration guides. Look at the use cases below, and follow the one that matches your case.
|
||||
|
||||
## Use Cases
|
||||
|
||||
### Use case 1: Create an Nx workspace from scratch using the latest version of Nx
|
||||
|
||||
If you are creating an Nx workspace using the latest version of Nx, the latest version of Storybook (version 6) will be used as well. You do not need to do anything.
|
||||
|
||||
### Use case 2: I already have an Nx workspace that does NOT use Storybook and I want to migrate to the latest Nx
|
||||
|
||||
If you already have an Nx workspace with a previous version of Nx that does NOT use Storybook, and you migrate to the latest Nx using the migrate scripts provided by Nx, and then, after the migration to the latest Nx, you choose to add Storybook, the latest version of Storybook will be used. You do not need to do anything.
|
||||
|
||||
### Use case 3: I already have an Nx workspace with Storybook and I want to migrate to the latest Nx
|
||||
|
||||
In that case, when you run the Nx migration scripts, the scripts will ignore the Storybook packages, the Storybook configuration files, the Storybook instances in your apps and libraries, and all the generated stories. If you continue to add Storybook configurations and Storybook instances to new libraries and applications, then the version of Storybook that you already have will be used (most probably, if you have not changed anything manually, that version will be `5.3.9` using, however, the configuration files of `5.2`). You will have to do the [upgrade to the latest Storybook on your own, manually](#upgrading-to-storybook-6-manually). After that, Nx will use that version, and configure all new Storybook instances using the new version.
|
||||
|
||||
## Upgrading to Storybook 6 using the Nx migration generator
|
||||
|
||||
### Some info about the generator
|
||||
|
||||
The `@nx/angular:storybook-migrate-defaults-5-to-6` generator will not exactly do a migration. It will perform the following actions:
|
||||
|
||||
- It will generate new Storybook configuration files using the new (`>6.x`) Storybook way. The way it will do that is, it will look in all the `project.json` files and it will find all the projects that have a `Storybook` configuration. Using the `configFolder` path provided there, it will go and generate new Storybook instances in all these paths. Finally, it will generate a new Storybook instance at the root directory.
|
||||
|
||||
- If you choose to `keepOld`, then it will add all your existing Storybook configuration files into another folder labeled `.old_storybook`.
|
||||
|
||||
- It will update all the Storybook-related (`@storybook/*`) packages in your `package.json`.
|
||||
|
||||
### How to use the generator
|
||||
|
||||
That way, you can have working Storybook instances for all your projects just by running
|
||||
|
||||
```shell
|
||||
nx g @nx/angular:storybook-migrate-defaults-5-to-6
|
||||
```
|
||||
|
||||
### What if I had made changes to the defaults?
|
||||
|
||||
In case you had made customizations to the default Storybook configurations, you can then manually change each of your Storybook instance configuration files using the official [Storybook 6 Migration Guide](https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5) to make sure you use the new syntax. Your old configuration files are available to you to use as a reference.
|
||||
|
||||
Please check out this official [Storybook 6 Migration Guide](https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5) article, as well as the [detailed guides here](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-53x-to-60x).
|
||||
|
||||
### What if I am not ready to change everything at once?
|
||||
|
||||
The generator gives you the option to migrate one project at a time. You can provide the `--name=PROJECT_NAME` flag, and then the generator will **only** generate new files for the specified project.
|
||||
|
||||
Please note that this option will NOT update all the Storybook-related (`@storybook/*`) packages in your `package.json`, or the root Storybook folder. The reason is that if you want to do the migration gradually, one project at a time, you want your old, existing, projects, to still work. That way, you will still be able to run your old, non-migrated Storybook projects. However, you will not be able to run any migrated Storbook projects. Once you have migrated all your Storybook projects, you can run `nx g @nx/angular:storybook-migrate-defaults-5-to-6` once again, and the generator will take care of updating all the Storybook-related (`@storybook/*`) packages in your `package.json` and it will also generate the new Storybook files for the root Storybook directory.
|
||||
|
||||
### General tip:
|
||||
|
||||
**Commit any changes you have locally**. We would suggest that you start the migration with a clean git history, in case anything goes wrong.
|
||||
|
||||
## Upgrading to Storybook 6 manually
|
||||
|
||||
There is really no great reason for doing the migration completely manually. The `@nx/angular:storybook-migrate-defaults-5-to-6` generator [will take care of Steps 1, 2 and 3](#upgrading-to-storybook-6-using-the-nx-migration-generator). What you will need to do after running the generator is that you have to manually migrate any custom changes you had done to the default Storybook configuration files that were automatically generated by Nx when you first used Nx Storybook. To do the manual migration you should use the official [Storybook 6 Migration Guide](https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5) article, as well as the [detailed guides here](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-53x-to-60x).
|
||||
|
||||
However, if you still want to do everything manually, these are the steps you should follow:
|
||||
|
||||
### Step 0:
|
||||
|
||||
**Commit any changes you have locally**. We would suggest that you start the migration with a clean git history, in case anything goes wrong.
|
||||
|
||||
### Step 1: Changing the configuration files from version 5.2 to 5.3
|
||||
|
||||
The most noticeable change in Storybook versions newer than `5.2` is that the configuration files have changed names and content.
|
||||
Quoting from the [official Storybook migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-52x-to-53x):
|
||||
|
||||
- `presets.js` has been renamed to `main.js`. `main.js` is the main point of configuration for storybook.
|
||||
- `config.js` has been renamed to `preview.js`. `preview.js` configures the "preview" iframe that renders your components.
|
||||
- `addons.js` has been renamed to `manager.js`. `manager.js` configures Storybook's "manager" UI that wraps the preview, and also configures addons panel.
|
||||
|
||||
Please follow the [official Storybook version 5.2.x to 5.3.x migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-52x-to-53x) to change your files accordingly.
|
||||
|
||||
If you are using Storybook using only the generated files after running the `storybook-configuration` generator, things might be easier for you. Please check the [sample files for a manual upgrade](#sample-files-for-manual-upgrade).
|
||||
|
||||
### Step 2: Going from version 5.3 to 6.0
|
||||
|
||||
Please check out this official [Storybook 6 Migration Guide](https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5) article, as well as the [detailed guides here](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-53x-to-60x).
|
||||
|
||||
- One big change in Storybook version `6` is that it has **built-in Typescript support**. This means that you can remove Typescript configurations from your configuration files.
|
||||
- Please also **check that your stories match any differences in syntax** introduced in versions `5.3` and `6.0`.
|
||||
|
||||
### Step 3: Upgrade all `@storybook/*` packages in your project
|
||||
|
||||
Check your `package.json` file for all `@storybook` packages. Install the latest versions of these, using `yarn`:
|
||||
|
||||
For example:
|
||||
|
||||
```shell
|
||||
yarn add --dev @storybook/angular@latest
|
||||
```
|
||||
|
||||
### Step 4: Check that everything works as expected
|
||||
|
||||
Check that everything works as expected. If you are still having trouble, you can submit you issue in the [GitHub Nx repo](https://github.com/nrwl/nx). We wish you luck!
|
||||
|
||||
## Sample files for manual upgrade
|
||||
|
||||
If you have not changed the content of the files which the `storybook-configuration` generator produced, you can use the following samples to migrate to Storybook `6`:
|
||||
|
||||
### Configuring the root `./storybook` directory
|
||||
|
||||
- In the root `./storybook` directory, create a new file named `main.js` with the following content:
|
||||
|
||||
```typescript {% fileName="main.js" %}
|
||||
module.exports = {
|
||||
stories: [],
|
||||
addons: ['@storybook/addon-essentials'],
|
||||
};
|
||||
```
|
||||
|
||||
- If you have any addons in the `addons.js` file, add them in the `addons` array in the `main.js` file. If you are using the default generated files without any changes, you should not have any addons. You can now delete the `addons.js` file.
|
||||
|
||||
- The other two files remain unchanged.
|
||||
|
||||
### Configuring the Storybook instances across apps and libraries - the library-specific `./storybook` directories
|
||||
|
||||
- In the library `./storybook` directory, create a new file named `main.js` with the following content:
|
||||
|
||||
```typescript {% fileName="main.js" %}
|
||||
const lib_main_module = require('../../.storybook/main');
|
||||
|
||||
lib_main_module.stories.push('../src/lib/**/*.stories.mdx');
|
||||
lib_main_module.stories.push('../src/lib/**/*.stories.@(js|jsx|ts|tsx)');
|
||||
module.exports = lib_main_module;
|
||||
```
|
||||
|
||||
Please take extra care making sure that the path to the root `./storybook` directory provided in the first line is correct.
|
||||
|
||||
- If you have any addons in the `addons.js` file, add them in the `addons` array in the `main.js` file. You can add any addons in the `addons` module array using the following syntax:
|
||||
|
||||
```typescript {% fileName="main.js" %}
|
||||
lib_main_module.addons.push('<YOUR_ADDON_HERE>');
|
||||
```
|
||||
|
||||
After you add any addons in the `main.js` file, you can safely delete the `addons.js` file. If you are using the default generated files without any changes, your `addons.js` file should be empty (but an import line, referencing the root `addons.js` file).
|
||||
|
||||
- Rename the file `config.js` to `preview.js` and remove the last line where your stories paths are configured. Now, the contents of the `preview.js` file will look like this:
|
||||
|
||||
```typescript {% fileName="preview.js" %}
|
||||
import { addDecorator } from '@storybook/angular';
|
||||
import { YourDecorator } from '@storybook/<something>';
|
||||
|
||||
addDecorator(YourDecorator);
|
||||
```
|
||||
|
||||
- Modify the contents of `webpack.config.js`. Remove the following lines, which are the TypeScript configuration, which is not needed by Storybook any more:
|
||||
|
||||
```typescript {% fileName="webpack.config.js" %}
|
||||
config.resolve.extensions.push('.ts', '.tsx');
|
||||
config.module.rules.push({
|
||||
test: /\.(ts|tsx)$/,
|
||||
loader: require.resolve('babel-loader'),
|
||||
options: {
|
||||
presets: [
|
||||
'@babel/preset-env',
|
||||
'@babel/preset-react',
|
||||
'@babel/preset-typescript',
|
||||
],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### Check final folder structure
|
||||
|
||||
Your folder structure should now look like this:
|
||||
|
||||
```text
|
||||
<workspace name>/
|
||||
├── .storybook/
|
||||
│ ├── main.js
|
||||
│ ├── tsconfig.json
|
||||
│ └── webpack.config.js
|
||||
├── apps/
|
||||
├── libs/
|
||||
│ └── <library name>/
|
||||
│ ├── .storybook/
|
||||
│ │ ├── main.js
|
||||
│ │ ├── tsconfig.json
|
||||
│ │ └── webpack.config.js
|
||||
│ ├── src/
|
||||
│ ├── README.md
|
||||
│ ├── tsconfig.json
|
||||
│ └── etc...
|
||||
├── nx.json
|
||||
├── package.json
|
||||
├── README.md
|
||||
└── etc...
|
||||
```
|
||||
@ -1,201 +0,0 @@
|
||||
---
|
||||
title: React - Upgrading to Storybook 6
|
||||
description: This guide explains how you can upgrade your Storybook from versions 5.3 and below to Storybook 6, for React projects.
|
||||
---
|
||||
|
||||
# Upgrading to Storybook 6 (and Nx versions >10.1.x and <14.0.0)
|
||||
|
||||
_Disclaimer: From Nx 14.0.0 and on, Nx does not support Storybook v.5. If your workspace is on a version of Nx older than Nx 14, then you will be able to use the generators described in this guide. If you're using Nx >14, then you will already have been automatically migrated to Storybook 6._
|
||||
|
||||
Nx now comes with [Storybook version 6](https://storybook.js.org/releases/6.0). Chances are, if you used Nx version `10.1.x` or older with Storybook, you are using [Storybook version 5.3](https://storybook.js.org/releases/5.3) with configuration files of [Storybook version 5.2](https://storybook.js.org/releases/5.2).
|
||||
|
||||
Nx version `10.2.x` will continue to support Storybook version `5.2.x`, however newer versions of Nx will only support Storybook version `6` (and on).
|
||||
|
||||
When you are running the Nx workspace migration script, your Storybook instances and configurations across your apps and libraries will NOT be migrated automatically. We chose not to migrate your Storybook instances and configurations across your apps and libraries automatically, since there a number of breaking changes that Storybook introduced in versions `5.3` and `6.0`, and making decisions on what to migrate automatically would risk the integrity of your code.
|
||||
|
||||
Instead, when you choose to migrate from Nx versions `<10.1.x` to Nx versions `>10.2.x` (using the Nx migration script - `nx migrate`) we will keep your Storybook packages and Storybook instances and configurations intact. We suggest that you do the migration on your own, using the guide below, with all the references to the official Storybook migration guides. Look at the use cases below, and follow the one that matches your case.
|
||||
|
||||
## Use Cases
|
||||
|
||||
### Use case 1: Create an Nx workspace from scratch using the latest version of Nx
|
||||
|
||||
If you are creating an Nx workspace using the latest version of Nx, the latest version of Storybook (version 6) will be used as well. You do not need to do anything.
|
||||
|
||||
### Use case 2: I already have an Nx workspace that does NOT use Storybook and I want to migrate to the latest Nx
|
||||
|
||||
If you already have an Nx workspace with a previous version of Nx that does NOT use Storybook, and you migrate to the latest Nx using the migrate scripts provided by Nx, and then, after the migration to the latest Nx, you choose to add Storybook, the latest version of Storybook will be used. You do not need to do anything.
|
||||
|
||||
### Use case 3: I already have an Nx workspace with Storybook and I want to migrate to the latest Nx
|
||||
|
||||
In that case, when you run the Nx migration scripts, the scripts will ignore the Storybook packages, the Storybook configuration files, the Storybook instances in your apps and libraries, and all the generated stories. If you continue to add Storybook configurations and Storybook instances to new libraries and applications, then the version of Storybook that you already have will be used (most probably, if you have not changed anything manually, that version will be `5.3.9` using, however, the configuration files of `5.2`). You will have to do the [upgrade to the latest Storybook on your own, manually](#upgrading-to-storybook-6-manually). After that, Nx will use that version, and configure all new Storybook instances using the new version.
|
||||
|
||||
## Upgrading to Storybook 6 using the Nx migration generator
|
||||
|
||||
### Some info about the generator
|
||||
|
||||
The `@nx/react:storybook-migrate-defaults-5-to-6` generator will not exactly do a migration. It will perform the following actions:
|
||||
|
||||
- It will generate new Storybook configuration files using the new (`>6.x`) Storybook way. The way it will do that is, it will look in all the `project.json` files and it will find all the projects that have a `Storybook` configuration. Using the `configFolder` path provided there, it will go and generate new Storybook instances in all these paths. Finally, it will generate a new Storybook instance at the root directory.
|
||||
|
||||
- If you choose to `keepOld`, then it will add all your existing Storybook configuration files into another folder labeled `.old_storybook`.
|
||||
|
||||
- It will update all the Storybook-related (`@storybook/*`) packages in your `package.json`.
|
||||
|
||||
### How to use the generator
|
||||
|
||||
That way, you can have working Storybook instances for all your projects just by running
|
||||
|
||||
```shell
|
||||
nx g @nx/react:storybook-migrate-defaults-5-to-6
|
||||
```
|
||||
|
||||
### What if I had made changes to the defaults?
|
||||
|
||||
In case you had made customizations to the default Storybook configurations, you can then manually change each of your Storybook instance configuration files using the official [Storybook 6 Migration Guide](https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5) to make sure you use the new syntax. Your old configuration files are available to you to use as a reference.
|
||||
|
||||
Please check out this official [Storybook 6 Migration Guide](https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5) article, as well as the [detailed guides here](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-53x-to-60x).
|
||||
|
||||
### What if I am not ready to change everything at once?
|
||||
|
||||
The generator gives you the option to migrate one project at a time. You can provide the `--name=PROJECT_NAME` flag, and then the generator will **only** generate new files for the specified project.
|
||||
|
||||
Please note that this option will NOT update all the Storybook-related (`@storybook/*`) packages in your `package.json`, or the root Storybook folder. The reason is that if you want to do the migration gradually, one project at a time, you want your old, existing, projects, to still work. That way, you will still be able to run your old, non-migrated Storybook projects. However, you will not be able to run any migrated Storbook projects. Once you have migrated all your Storybook projects, you can run `nx g @nx/react:storybook-migrate-defaults-5-to-6` once again, and the generator will take care of updating all the Storybook-related (`@storybook/*`) packages in your `package.json` and it will also generate the new Storybook files for the root Storybook directory.
|
||||
|
||||
### General tip:
|
||||
|
||||
**Commit any changes you have locally**. We would suggest that you start the migration with a clean git history, in case anything goes wrong.
|
||||
|
||||
## Upgrading to Storybook 6 manually
|
||||
|
||||
There is really no great reason for doing the migration completely manually. The `@nx/react:storybook-migrate-defaults-5-to-6` generator [will take care of Steps 1, 2 and 3](#upgrading-to-storybook-6-using-the-nx-migration-generator). What you will need to do after running the generator is that you have to manually migrate any custom changes you had done to the default Storybook configuration files that were automatically generated by Nx when you first used Nx Storybook. To do the manual migration you should use the official [Storybook 6 Migration Guide](https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5) article, as well as the [detailed guides here](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-53x-to-60x).
|
||||
|
||||
However, if you still want to do everything manually, these are the steps you should follow:
|
||||
|
||||
### Step 0:
|
||||
|
||||
**Commit any changes you have locally**. We would suggest that you start the migration with a clean git history, in case anything goes wrong.
|
||||
|
||||
### Step 1: Changing the configuration files from version 5.2 to 5.3
|
||||
|
||||
The most noticeable change in Storybook versions newer than `5.2` is that the configuration files have changed names and content.
|
||||
Quoting from the [official Storybook migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-52x-to-53x):
|
||||
|
||||
- `presets.js` has been renamed to `main.js`. `main.js` is the main point of configuration for storybook.
|
||||
- `config.js` has been renamed to `preview.js`. `preview.js` configures the "preview" iframe that renders your components.
|
||||
- `addons.js` has been renamed to `manager.js`. `manager.js` configures Storybook's "manager" UI that wraps the preview, and also configures addons panel.
|
||||
|
||||
Please follow the [official Storybook version 5.2.x to 5.3.x migration guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-52x-to-53x) to change your files accordingly.
|
||||
|
||||
### Step 2: Going from version 5.3 to 6.0
|
||||
|
||||
Please check out this official [Storybook 6 Migration Guide](https://medium.com/storybookjs/storybook-6-migration-guide-200346241bb5) article, as well as the [detailed guides here](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-53x-to-60x).
|
||||
|
||||
- One big change in Storybook version `6` is that it has **built-in Typescript support**. This means that you can remove Typescript configurations from your configuration files.
|
||||
- Please also **check that your stories match any differences in syntax** introduced in versions `5.3` and `6.0`.
|
||||
|
||||
### Step 3: Upgrade all `@storybook/*` packages in your project
|
||||
|
||||
Check your `package.json` file for all `@storybook` packages. Install the latest versions of these, using `yarn`:
|
||||
|
||||
For example:
|
||||
|
||||
```shell
|
||||
yarn add --dev @storybook/react@latest
|
||||
```
|
||||
|
||||
### Step 4: Check that everything works as expected
|
||||
|
||||
Check that everything works as expected. If you are still having trouble, you can submit you issue in the [GitHub Nx repo](https://github.com/nrwl/nx). We wish you luck!
|
||||
|
||||
### Sample files for manual upgrade
|
||||
|
||||
If you have not changed the content of the files which the `storybook-configuration` generator produced, you can use the following samples to migrate to Storybook `6`:
|
||||
|
||||
### Configuring the root `./storybook` directory
|
||||
|
||||
- In the root `./storybook` directory, create a new file named `main.js` with the following content:
|
||||
|
||||
```typescript {% fileName="main.js" %}
|
||||
module.exports = {
|
||||
stories: [],
|
||||
addons: ['@storybook/addon-essentials'],
|
||||
};
|
||||
```
|
||||
|
||||
- If you have any addons in the `addons.js` file, add them in the `addons` array in the `main.js` file. If you are using the default generated files without any changes, you should not have any addons. You can now delete the `addons.js` file.
|
||||
|
||||
- The other two files remain unchanged.
|
||||
|
||||
### Configuring the Storybook instances across apps and libraries - the library-specific `./storybook` directories
|
||||
|
||||
- In the library `./storybook` directory, create a new file named `main.js` with the following content:
|
||||
|
||||
```typescript {% fileName="main.js" %}
|
||||
const lib_main_module = require('../../.storybook/main');
|
||||
|
||||
lib_main_module.stories.push('../src/lib/**/*.stories.mdx');
|
||||
lib_main_module.stories.push('../src/lib/**/*.stories.@(js|jsx|ts|tsx)');
|
||||
module.exports = lib_main_module;
|
||||
```
|
||||
|
||||
Please take extra care making sure that the path to the root `./storybook` directory provided in the first line is correct.
|
||||
|
||||
- If you have any addons in the `addons.js` file, add them in the `addons` array in the `main.js` file. You can add any addons in the `addons` module array using the following syntax:
|
||||
|
||||
```typescript {% fileName="main.js" %}
|
||||
lib_main_module.addons.push('<YOUR_ADDON_HERE>');
|
||||
```
|
||||
|
||||
After you add any addons in the `main.js` file, you can safely delete the `addons.js` file. If you are using the default generated files without any changes, your `addons.js` file should be empty (but an import line, referencing the root `addons.js` file).
|
||||
|
||||
- Rename the file `config.js` to `preview.js` and remove the last line where your stories paths are configured. Now, the contents of the `preview.js` file will look like this:
|
||||
|
||||
```typescript {% fileName="preview.js" %}
|
||||
import { addDecorator } from '@storybook/react';
|
||||
|
||||
addDecorator(<YourDecorator>);
|
||||
```
|
||||
|
||||
- Modify the contents of `webpack.config.js`. Remove the following lines, which are the TypeScript configuration, which is not needed by Storybook anymore:
|
||||
|
||||
```typescript {% fileName="webpack.config.js" %}
|
||||
config.resolve.extensions.push('.ts', '.tsx');
|
||||
config.module.rules.push({
|
||||
test: /\.(ts|tsx)$/,
|
||||
loader: require.resolve('babel-loader'),
|
||||
options: {
|
||||
presets: [
|
||||
'@babel/preset-env',
|
||||
'@babel/preset-react',
|
||||
'@babel/preset-typescript',
|
||||
],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### Check final folder structure
|
||||
|
||||
Your folder structure should now look like this:
|
||||
|
||||
```treeview
|
||||
<workspace name>/
|
||||
├── .storybook/
|
||||
│ ├── main.js
|
||||
│ ├── tsconfig.json
|
||||
│ └── webpack.config.js
|
||||
├── apps/
|
||||
├── libs/
|
||||
│ └── <library name>/
|
||||
│ ├── .storybook/
|
||||
│ │ ├── main.js
|
||||
│ │ ├── tsconfig.json
|
||||
│ │ └── webpack.config.js
|
||||
│ ├── src/
|
||||
│ ├── README.md
|
||||
│ ├── tsconfig.json
|
||||
│ └── etc...
|
||||
├── nx.json
|
||||
├── package.json
|
||||
├── README.md
|
||||
└── etc...
|
||||
```
|
||||
@ -1,13 +0,0 @@
|
||||
# workspace-lint
|
||||
|
||||
Before Nx 15, the `workspace-lint` command performed workspace wide lint checks including:
|
||||
|
||||
1. Checking for projects with no files in them
|
||||
2. Checking for files that do not belong to a project
|
||||
3. Ensuring that all the versions of Nx packages are in sync
|
||||
|
||||
Checks (1) and (2) are no longer necessary because [Nx no longer uses a `workspace.json` file](/deprecated/workspace-json) to define project locations. Instead, Nx dynamically detects projects anywhere in the workspace based on the presence of `package.json` or `project.json` files.
|
||||
|
||||
Check (3) is now accomplished manually with the [`nx report` command](/nx-api/nx/documents/report).
|
||||
|
||||
In Nx 15 and 16, `nx workspace-lint` does nothing except display a deprecation message. In Nx 17, `workspace-lint` will be completely removed.
|
||||
@ -256,11 +256,5 @@ For more on using Storybook, see the [official Storybook documentation](https://
|
||||
|
||||
Here's more information on common migration scenarios for Storybook with Nx. For Storybook specific migrations that are not automatically handled by Nx please refer to the [official Storybook page](https://storybook.js.org/)
|
||||
|
||||
- [Upgrading to Storybook 6](/deprecated/storybook/upgrade-storybook-v6-react)
|
||||
- [Migrate to the Nx React Storybook Addon](/deprecated/storybook/migrate-webpack-final-react)
|
||||
- [Storybook 7 migration generator](/nx-api/storybook/generators/migrate-7)
|
||||
- [Storybook 7 setup guide](/nx-api/storybook/documents/storybook-7-setup)
|
||||
|
||||
## Older documentation
|
||||
|
||||
You can find older documentation for the `@nx/storybook` package in our [deprecated section](/deprecated/storybook).
|
||||
|
||||
@ -177,9 +177,7 @@ This setup instructs Nx to use the configuration under the `build` target of `my
|
||||
## 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 `projectBuildConfig`](/deprecated/storybook/angular-project-build-config)
|
||||
|
||||
You can find all Storybook-related Nx topics [here](/nx-api#storybook).
|
||||
|
||||
@ -191,8 +189,3 @@ Here's more information on common migration scenarios for Storybook with Nx. For
|
||||
|
||||
- [Set up Storybook version 7](/nx-api/storybook/documents/storybook-7-setup)
|
||||
- [Migrate to Storybook version 7](/nx-api/storybook/generators/migrate-7)
|
||||
|
||||
#### Older migration scenarios
|
||||
|
||||
- [Upgrading to Storybook 6](/deprecated/storybook/upgrade-storybook-v6-angular)
|
||||
- [Migrate to the new Storybook `webpackFinal` config](/deprecated/storybook/migrate-webpack-final-angular)
|
||||
|
||||
@ -149,8 +149,3 @@ Here's more information on common migration scenarios for Storybook with Nx. For
|
||||
|
||||
- [Set up Storybook version 7](/nx-api/storybook/documents/storybook-7-setup)
|
||||
- [Migrate to Storybook version 7](/nx-api/storybook/generators/migrate-7)
|
||||
|
||||
#### Older migration scenarios
|
||||
|
||||
- [Upgrading to Storybook 6](/deprecated/storybook/upgrade-storybook-v6-react)
|
||||
- [Migrate to the Nx React Storybook Addon](/deprecated/storybook/migrate-webpack-final-react)
|
||||
|
||||
@ -213,23 +213,14 @@
|
||||
- [Profiling Build Performance](/troubleshooting/performance-profiling)
|
||||
- [Deprecated](/deprecated)
|
||||
- [workspace.json](/deprecated/workspace-json)
|
||||
- [workspace-lint](/deprecated/workspace-lint)
|
||||
- [As Provided vs. Derived](/deprecated/as-provided-vs-derived)
|
||||
- [Workspace Generators](/deprecated/workspace-generators)
|
||||
- [Workspace Executors](/deprecated/workspace-executors)
|
||||
- [defaultCollection](/deprecated/default-collection)
|
||||
- [runtimeCacheInputs](/deprecated/runtime-cache-inputs)
|
||||
- [cacheableOperations](/deprecated/cacheable-operations)
|
||||
- [npmScope](/deprecated/npm-scope)
|
||||
- [globalImplicitDependencies](/deprecated/global-implicit-dependencies)
|
||||
- [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 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)
|
||||
- [React: Upgrading to Storybook 6](/deprecated/storybook/upgrade-storybook-v6-react)
|
||||
- [v1 Nx Plugin API](/deprecated/v1-nx-plugin-api)
|
||||
- [See Also](/see-also)
|
||||
- [Site Map](/see-also/sitemap)
|
||||
|
||||
@ -20,22 +20,6 @@ const pages: Array<{ title: string; path: string }> = [
|
||||
{ title: 'reset', path: '/cli/reset' },
|
||||
{ title: 'Storybook', path: '/storybook/overview-react' },
|
||||
{ title: 'Storybook', path: '/storybook/overview-angular' },
|
||||
{
|
||||
title: 'Nx React Storybook Addon',
|
||||
path: '/storybook/migrate-webpack-final-react',
|
||||
},
|
||||
{
|
||||
title: 'Storybook Migration to webpackFinal',
|
||||
path: '/storybook/migrate-webpack-final-angular',
|
||||
},
|
||||
{
|
||||
title: 'Upgrading to Storybook 6 (and Nx versions >10.1.x and <14.0.0)',
|
||||
path: '/storybook/upgrade-storybook-v6-react',
|
||||
},
|
||||
{
|
||||
title: 'Upgrading to Storybook 6 (and Nx versions >10.1.x and <14.0.0)',
|
||||
path: '/storybook/upgrade-storybook-v6-angular',
|
||||
},
|
||||
{
|
||||
title: 'Setting up Storybook Composition with Nx',
|
||||
path: '/storybook/storybook-composition-setup',
|
||||
|
||||
@ -1036,6 +1036,26 @@ const troubleshootingOutOfRecipes = {
|
||||
'/troubleshooting/performance-profiling',
|
||||
};
|
||||
|
||||
/**
|
||||
* Removed deprecated URLs
|
||||
*/
|
||||
const removedDeprecatedUrls = {
|
||||
'/deprecated/default-collection': '/features/generate-code', // 46 views: has not worked since Nx 17 and has very little views
|
||||
'/deprecated/workspace-lint': '/nx-api/nx/documents/report', // 168 views: workspace-lint hasn't worked since Nx 15 and users should use `nx report` to check versions and other info
|
||||
'/deprecated/storybook/angular-storybook-targets':
|
||||
'/recipes/storybook/overview-angular', // 49 views
|
||||
'/deprecated/storybook/angular-project-build-config':
|
||||
'/recipes/storybook/overview-angular', // 126 views: outdated since Nx 14
|
||||
'/deprecated/storybook/migrate-webpack-final-angular':
|
||||
'/recipes/storybook/overview-angular', // 50 views: For Nx < 12.7
|
||||
'/deprecated/storybook/upgrade-storybook-v6-angular':
|
||||
'/recipes/storybook/overview-angular', // 44 views: outdated since Nx 14
|
||||
'/deprecated/storybook/migrate-webpack-final-react':
|
||||
'/recipes/storybook/overview-react', // 417 views: mostly people searching "React Storybook" is matching this outdated page that was for Nx 12.7
|
||||
'/deprecated/storybook/upgrade-storybook-v6-react':
|
||||
'/recipes/storybook/overview-react', // 80 views
|
||||
};
|
||||
|
||||
/**
|
||||
* Public export API
|
||||
*/
|
||||
@ -1063,5 +1083,6 @@ module.exports = {
|
||||
coreFeatureRefactoring: coreFeatureAndConceptsRefactoring,
|
||||
aiChat,
|
||||
eslintRename,
|
||||
removedDeprecatedUrls,
|
||||
troubleshootingOutOfRecipes,
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user