Storybook 7 is here - and Nx is ready
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.0.0 release article. 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.0.0 migration guide.
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. Nx also provides a Storybook 7 migration generator that you can use to migrate your existing Storybook configuration to version 7.
So, let's see how you can use Storybook 7 on your Nx workspace.
Migrate your existing workspace to Storybook 7
If you already have Storybook configured in your Nx workspace, you can use the Storybook 7 migrator generator to migrate your existing Storybook configuration to version 7.
Set up Storybook 7 in a new Nx Workspace
Please read the
@nx/storybook package overview to see how you can configure Storybook in your Nx workspace.
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
@nx/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.