2.9 KiB
| title | description |
|---|---|
| Storybook configuration generator examples | This page contains examples for the @nx/storybook:configuration generator. |
This is a framework-agnostic generator for setting up Storybook configuration for a project.
nx g @nx/storybook:configuration
Nx will understand if you're using Storybook v7 or Storybook v6 and configure your project accordingly. By default, it will try to use Storybook v7.
When running this generator, you will be prompted to provide the following:
- The
nameof the project you want to generate the configuration for. - The
storybook7UiFrameworkyou 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
- Whether you want to
configureCypress. If you chooseyes, a Cypress e2e app will be created (or configured) to run against the project's Storybook instance. - Whether you want to
configureTestRunner. If you chooseyes, atest-storybooktarget will be generated in your project'sproject.json, with a command to invoke the Storybooktest-runner.
You must provide a name and a storybook7UiFramework 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)
Examples
Generate Storybook configuration using TypeScript
nx g @nx/storybook:configuration ui --storybook7UiFramework=@storybook/web-components-vite --tsConfiguration=true
This will generate a Storybook configuration for the ui project using TypeScript for the Storybook configuration files (the files inside the .storybook directory).
Generate Storybook configuration for Storybook version 6
If, for somem reason, you want to force Nx to generate Storybook version 6 configuration, you can do so by passing false to the storybook7Configuration flag:
nx g @nx/storybook:configuration ui --uiFramework=@storybook/react --storybook7Configuration=false
However, this is NOT recommended.