Storybook is a tool dedicated to component debugging, providing around component development.
Before when using Storybook, there are various problems related to configurations, Babel, Webpack, less or sass, but those are already included in Modern.js builder, using Modern.js builder can make your configurations a log easier.
You can switch between Webpack and Rspack smoothly in Modern.js builder, for those who already use Modern.js builder or Modern.js framework, you can start using Storybook with the same configurations.
Before getting started, the current Storybook supports building using either Webpack or Rspack as the underlying tool. Depending on your needs, install any of the following packages:
If your current project is already a Modern.js project and you haven't used any old version Storybook plugins, you can directly enable the Storybook feature by using the following command:
This command will create a template for Storybook, including:
To start, run npm run storybook
.
If you are using an older version of the Storybook plugin, you can still run the command above to create templates and modify the package.json. You can also upgrade manually.
If you have made some custom configurations to Storybook in the older version, you need to move the configuration file root/config/storybook/main.(j|t)s
to root/.storybook/main.(j|t)s
.
And then add the following lines in root/.storybook/main.(j|t)s
, specify framework as @modern-js/storybook
.
Update dependencies like @storybook/addon-* to major version 7.
Finally, follow the official Storybook documentation to make the necessary updates for some breaking changes, such as changes in story writing and MDX syntax. You can refer to the migration guide at storybook migrate doc.
Addon some scripts in your package.json
To Start, run npm run storybook
Modern.js Builder only support Storybook 7, so you need to upgrade from Storybook version 6 to version 7, please follow the steps outlined in the official Storybook documentation at storybook migrate doc.
The default config file path is modern.config.(j|t)s
, for the detail config, see builder config.
If the original project includes configurations for Babel, they need to be written in the modern configuration. Most Babel configurations have already been included in Modern.js.
Rspack is known for its fast build speed. To use Rspack as a build tool in Modern.js, you only need to configure it as follows:
Note that in the above configuration, the reactDocgen configuration has been changed because Rspack currently does not support @storybook/react-docgen-typescript-plugin.
Before starting, make sure that you have installed the @modern-js/builder-rspack-provider package.
There are some configurations in .storybook/main.js
.
string
modern.config.(j|t)s
Specify the path of Modern.js Builder configuration.
Example:
'webpack' | 'rspack'
webpack
Specify the underlying build tool to use either Webpack or Rspack. Please make sure to install the corresponding provider. To use Webpack, install @modern-js/builder-webpack-provider. To use Rspack, install @modern-js/builder-rspack-provider.
Example:
BuilderConfig
undefined
To modify the configuration of the builder, which has a higher priority than the configuration file, you can specify the Modern.js builder configuration directly here if you do not want to use the configuration file.
Example:
@modern-js/storybook proxies some of the storybook cli commands.
Start Storybook, more details at https://storybook.js.org/docs/react/api/cli-options#dev.
Build Storybook for production, more details at https://storybook.js.org/docs/react/api/cli-options#build.
The configuration file includes an additional field: builderPlugins
, in addition to the Modern.js builder configuration. This field is used to enable builder plugins, such as enabling SWC compilation.
Due to the current version of Storybook in the document being version 7, please select the addon for Storybook V7.
When an addon does not require additional Babel or Webpack configurations, it can be used directly, such as @storybook/addon-essentials.
For some addons that require dependencies on Babel plugins and Webpack configurations, such as @storybook/addon-coverage, only @modern-js/builder-webpack-provider supports them.
Using @modern-js/storybook can bring you lightning-fast builds with Rspack, without the need for tedious configuration. It comes with many best practices for web development out-of-the-box, such as code splitting strategies, built-in support for CSS modules and postcss, TypeScript support, and commonly used Babel plugins.
The powerful capabilities of Modern.js builder can be directly used in Storybook projects.
Modern.js builder won't load your other configurations like babel.config.json
, babel config needs to be set in Modern.js config, tools.babel.
Webpack configuration can be written in either tools.webpack or tools.webpackChain.
If you find that the build performance is not good, please check if the Storybook automatic documentation generation feature is enabled. For optimal performance, configure it to use react-docgen
. The difference between react-docgen
and react-docgen-typescript
is that the former is implemented based on Babel, while the latter is implemented based on TypeScript. The former has better performance but weaker type inference capabilities. If you are using Rspack for the build, only react-docgen
is supported.