@nx/react:storybook-configuration
Set up Storybook for a React app or library.
Set up Storybook for a React app or library.
This generator will set up Storybook for your React project. You can also use this generator to generate Storybook configuration for your Next.js project. By default, starting Nx 16, Storybook v7 is used.
1nx g @nx/react:storybook-configuration project-name
2
You can read more about how this generator works, in the Storybook for React overview page.
When running this generator, you will be prompted to provide the following:
name
of the project you want to generate the configuration for.interactionTests
). If you choose yes
, a play
function will be added to your stories, and 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..generateStories
for the components in your project. If you choose yes
, a .stories.ts
file will be generated next to each of your components in your project.You must provide a name
for the generator to work.
By default, this generator will also set up Storybook interaction tests. If you don't want to set up Storybook interaction tests, you can pass the --interactionTests=false
option, but it's not recommended.
There are a number of other options available. Let's take a look at some examples.
1nx g @nx/react:storybook-configuration ui
2
This will generate Storybook configuration for the ui
project using TypeScript for the Storybook configuration files (the files inside the .storybook
directory, eg. .storybook/main.ts
).
1nx g @nx/react:storybook-configuration ui --generateStories=true --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts
2
This will generate a Storybook configuration for the ui
project and generate stories for all components in the libs/ui/src/lib
directory, except for the ones in the libs/ui/src/not-stories
directory, and the ones in the apps/my-app
directory that end with .something.ts
, and also for components that their file name is of the pattern *.other.*
.
This is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.
By default, Nx will ignore the following paths:
1*.stories.ts, *.stories.tsx, *.stories.js, *.stories.jsx, *.stories.mdx
2
but you can change this behaviour easily, as explained above.
1nx g @nx/react:storybook-configuration ui --generateStories=true --js=true
2
This will generate stories for all the components in the ui
project using JavaScript instead of TypeScript. So, you will have .stories.js
files next to your components.
1nx g @nx/react:storybook-configuration ui --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 storybook-configuration ...
2
By default, Nx will search for storybook-configuration
in the default collection provisioned in workspace.json.
You can specify the collection explicitly as follows:
1nx g @nx/react:storybook-configuration ...
2
Show what will be generated without writing to disk:
1nx g storybook-configuration ... --dry-run
2
Project for which to generate Storybook configuration.
true
Specifies whether to configure a static file server target for serving storybook. Helpful for speeding up CI build/test times.
true
Automatically generate *.stories.ts
files for components declared in this project?
true
Set up Storybook interaction tests.
[*.stories.ts,*.stories.tsx,*.stories.js,*.stories.jsx,*.stories.mdx]
Paths to ignore when looking for components.
false
Generate JavaScript story files rather than TypeScript story files.
eslint
eslint
The tool to use for running lint checks.
true
Configure your project with TypeScript. Generate main.ts and preview.ts files, instead of main.js and preview.js.
Learn how Nx Cloud can help you overcome the performance paradox with fast, reliable CI and better coordination as you scale your organization.