Storybook 7 is here - and Nx is readyAvailable on Nx v15.6
This is a new feature available on Nx v15.6.0. If you are using an older version of Nx, please upgrade.Storybook 7 is in beta
Storybook version 7 is still in beta, and so is the Nx support for it. Things are evolving dynamically, so it would be better to avoid using in production on Nx. If you want to use the stable, 6.5 version, please go to the Storybook plugin overview guide to get started.
Storybook 7 is a major release that brings a lot of new features and improvements. You can read more about it in the Storybook 7 beta announcement blog post. Apart from the new features and improvements it introduces, it also brings some breaking changes. You can read more about them in the Storybook 7 migration docs and the Storybook 7 migration guide. Do note that version 7 is still in beta, and so is the Nx support for it. Things are evolving dynamically, so it would be better to avoid using in production on Nx.
Nx provides new generators that allow you to generate Storybook 7 configuration for your projects, by installing the correct dependencies and creating the corresponding version 7 configuration files.
So, let's see how to get started with Storybook 7 on Nx workspaces.
Setting Up Storybook 7 in a new Nx Workspace
In this guide we will see how to set up Storybook version 7 in a new Nx workspace, or a workspace that does NOT already have Storybook configured.Migrating existing Storybook configuration
For migrating your existing Nx workspace with existing Storybook configuration to use Storybook version 7, please refer to our Storybook 7 migration guide.
Add the Storybook plugin
yarn add -D @nrwl/storybook
Generating Storybook Configuration
You can generate Storybook configuration for an individual project with this command:
nx g @nrwl/storybook:configuration project-name --storybook7betaConfiguration --storybook7UiFramework=@storybook/react-webpack5
In the field
storybook7UiFramework you must choose one of the following Storybook frameworks:
In Storybook 7, the
framework field in
.storybook/main.js|ts is mandatory. You must choose one of the above frameworks when setting up your application.
If you are using one of the framework-specific generators (e.g.
@nrwl/react:storybook-configuration for React and Nextjs projects, or
@nrwl/react-native:storybook-configuration, the generator will automatically choose the correct framework for you.
Choosing one of these frameworks will have the following effects on your workspace:
Nx will install all the required Storybook packages that go with it.
Nx will generate a root
.storybookfolder and a project-level
.storybookfolder (located under
apps/your-project/.storybook) containing the essential configuration files for Storybook.
If you are working on an Angular, a React or a React Native project (and you choose
@storybook/react-native) the Nx generator will also generate stories for all the components in your project.
Nx will create new
targetsin your project's
build-storybook, containing all the necessary configuration to serve and build Storybook.
Nx will generate a new Cypress e2e app for your project (if there isn't one already) to run against the Storybook instance.
Changes from the v6.5 Storybook configuration
The Storybook configuration generated by Nx for Storybook 7 is very similar to the one generated for Storybook 6.5. Here are the new things that you should expect to see:
- No longer set the
corefield which contains the
frameworkfield is now mandatory, and it "replaces" the
builderconfiguration. You can read more in the Storybook docs.
- Nx no longer adds the
webpackFinalfield to the
.storybook/main.js|tsfiles. This is just for the sake of simplicity. You can still edit your webpack configuration by using the
webpackFinalfield, just as you can edit your Vite configuration by using the
viteFinalfield. You can read more about how to customize your webpack configuration in the Storybook webpack docs, and you can read more about how to customize your Vite configuration in the Storybook Vite docs.
Changes in the
uiFrameworkfield is not needed any more, thus it is not set. Nx was using the
uiFrameworkfield to load any framework specific options for the Storybook builder. This is no longer needed, since the
.storybook/main.js|tstakes care of that.
- More options from the Storybook CLI are now exposed in the executors. You can see these in the
@nrwl/storybook:buildexecutor schemas. You can read more about these options in the Storybook 7 CLI docs. If there's an option you need to pass but it's not in the executor schema, you can always pass it, since the executors are just passing the options to the Storybook CLI.
Use Storybook 7 beta
You can now use Storybook 7 beta! 🎉
npx nx build-storybook PROJECT_NAME
npx nx storybook PROJECT_NAME