@nx/storybook:configuration
Add Storybook configuration to a UI library or an application.
Add Storybook configuration to a UI library or an application.
This is a framework-agnostic generator for setting up Storybook configuration for a project.
1nx g @nx/storybook:configuration
2
Starting Nx 16, Nx does not support Storybook v6 any more. So, Nx will configure your project to use Storybook v7. If you are not on Storybook 7 yet, please migrate. You can read more about how to migrate to Storybook 7 in our Storybook 7 migration generator guide.
When running this generator, you will be prompted to provide the following:
name
of the project you want to generate the configuration for.uiFramework
you want to use. Supported values are:@storybook/angular
@storybook/html-webpack5
@storybook/nextjs
@storybook/preact-webpack5
@storybook/react-webpack5
@storybook/react-vite
@storybook/server-webpack5
@storybook/svelte-webpack5
@storybook/svelte-vite
@storybook/sveltekit
@storybook/vue-webpack5
@storybook/vue-vite
@storybook/vue3-webpack5
@storybook/vue3-vite
@storybook/web-components-webpack5
@storybook/web-components-vite
interactionTests
). If you choose yes
, all the necessary dependencies will be installed. Also, a test-storybook
target will be generated in your project's project.json
, with a command to invoke the Storybook test-runner
. You can read more about this in the Nx Storybook interaction tests documentation page.You must provide a name
and a uiFramework
for the generator to work.
You can read more about how this generator works, in the Storybook package overview page.
If you are using Angular, React, React Native or Next.js in your project, it's best to use the framework specific generator:
React Storybook Configuration Generator (React and Next.js projects)
1nx g @nx/storybook:configuration ui --uiFramework=@storybook/web-components-vite --tsConfiguration=false
2
By default, our generator generates TypeScript Storybook configuration files. You can choose to use JavaScript for the Storybook configuration files of your project (the files inside the .storybook
directory, eg. .storybook/main.js
).
1nx generate configuration ...
2
By default, Nx will search for configuration
in the default collection provisioned in workspace.json.
You can specify the collection explicitly as follows:
1nx g @nx/storybook:configuration ...
2
Show what will be generated without writing to disk:
1nx g configuration ... --dry-run
2
Project for which to generate Storybook configuration.
@storybook/angular
, @storybook/html-webpack5
, @storybook/nextjs
, @storybook/preact-webpack5
, @storybook/react-webpack5
, @storybook/react-vite
, @storybook/server-webpack5
, @storybook/svelte-webpack5
, @storybook/svelte-vite
, @storybook/sveltekit
, @storybook/vue-webpack5
, @storybook/vue-vite
, @storybook/vue3-webpack5
, @storybook/vue3-vite
, @storybook/web-components-webpack5
, @storybook/web-components-vite
Storybook UI Framework to use.
webpack
vite
, webpack
The Storybook builder to use.
true
Configure your project with TypeScript. Generate main.ts and preview.ts files, instead of main.js and preview.js.
false
Add a static-storybook to serve the static storybook built files.
true
Set up Storybook interaction tests.
false
Generate JavaScript story files rather than TypeScript story files.
eslint
eslint
, none
The tool to use for running lint checks.
false
Skip formatting files.
Run the cypress-configure generator.
Use interactionTests instead. This option will be removed in v18.
A directory where the Cypress project will be placed. Added at root by default.
Use interactionTests instead. This option will be removed in v18.
true
Split the project configuration into <projectRoot>/project.json
rather than including it inside workspace.json
.
Nx only supports standaloneConfig