DOCSEARCHbyAlgolia
Submit Docs

Storybook Rsbuild

website·Indexed 35 days ago

https://storybook.rsbuild.rs

The Rsbuild integration for Storybook, providing a fast and consistent Storybook experience. It supports various frontend stacks including React, Vue, Web Components, React Native Web, and Vanilla JS/TS, and includes addons for Modern.js, Rslib, and Rstack.

Tokens
10.7K
Snippets
53
Records
75
Agent score
65%

What's inside Storybook Rsbuild

  1. Overview of Storybook Rsbuild

    Storybook Rsbuild is an integration that provides a fast and consistent Storybook experience powered by Rsbuild. It allows developers to share a single Rsbuild configuration between their main application and Storybook, reducing configuration drift. Key capabilities include:

    • Support for React, Vue, Lit, and other popular web frameworks.
    • Compatibility with both Rspack and webpack 5.
    • Support for existing webpack 5 Storybook addons.
    • Built-in support for TypeScript, CSS modules, and asset handling.
    • Significantly faster build speeds when using the Rspack bundling engine.

  2. Install storybook-addon-rslib

    To use Rslib with Storybook, install storybook-addon-rslib and @rsbuild/core. Installing @rsbuild/core directly ensures the version is pinned in your lockfile, avoiding conflicts between the addon and your framework package (e.g., storybook-react-rsbuild).
    # npm
npm install @rsbuild/core storybook-addon-rslib -D

# yarn
yarn add @rsbuild/core storybook-addon-rslib -D

# pnpm
pnpm add @rsbuild/core storybook-addon-rslib -D

# bun
bun add @rsbuild/core storybook-addon-rslib -D

# deno
deno add npm:@rsbuild/core npm:storybook-addon-rslib -D

  3. Install Storybook for React Native Web with Rsbuild

    To develop and document React Native components for the web, install the storybook-react-native-web-rsbuild framework along with its required peer dependencies.

    Requirements:

    • react: ≥ 16.8
    • react-native-web: ^0.19.0, ^0.20.0, or ^0.21.0
    • @rsbuild/core: ^1.5.0 or ^2.0.0-0
    • @rsbuild/plugin-react: ≥ 1.0.0
    • storybook: ^10.6.0
    # npm
npm install @rsbuild/core @rsbuild/plugin-react storybook-react-native-web-rsbuild react-native-web -D

# yarn
yarn add @rsbuild/core @rsbuild/plugin-react storybook-react-native-web-rsbuild react-native-web -D

# pnpm
pnpm add @rsbuild/core @rsbuild/plugin-react storybook-react-native-web-rsbuild react-native-web -D

# bun
bun add @rsbuild/core @rsbuild/plugin-react storybook-react-native-web-rsbuild react-native-web -D

  4. Deploy Storybook to a subdirectory or subpath

    The Rsbuild builder uses relative asset paths by default (similar to Vite's base: './' and webpack's publicPath: ''). This allows Storybook to be deployed to any subdirectory (e.g., https://example.com/storybook/) without requiring additional configuration.

  5. Install Storybook for Web Components with Rsbuild

    To use Storybook with Web Components in an Rsbuild project, install the @rsbuild/core and storybook-web-components-rsbuild packages as development dependencies. It is recommended to list @rsbuild/core explicitly to ensure version consistency in lockfiles.
    # npm
npm install @rsbuild/core storybook-web-components-rsbuild -D

# yarn
yarn add @rsbuild/core storybook-web-components-rsbuild -D

# pnpm
pnpm add @rsbuild/core storybook-web-components-rsbuild -D

# bun
bun add @rsbuild/core storybook-web-components-rsbuild -D

# deno
deno add npm:@rsbuild/core npm:storybook-web-components-rsbuild -D

  6. Configure Storybook Rsbuild for existing projects

    When migrating an existing Storybook project to Rsbuild, install the relevant framework package and update .storybook/main.ts.

    If an rsbuild.config.ts exists in the directory where Storybook runs, Storybook Rsbuild automatically detects and merges it into the preview build. To use a configuration file located elsewhere, set the rsbuildConfigPath builder option.

  7. Set up Storybook Rsbuild with React, Vue, or Vanilla JS

    Depending on your framework, use the following official sandboxes as a reference for configuration:

    • React 18: Basic setup with TypeScript.
    • React 16: Legacy support.
    • Rspack React: Integration using raw Rspack configuration without Rsbuild.
    • Vue 3: Setup with TypeScript and JSX support.
    • Lit: Web Components development.
    • Vanilla TS: Framework-agnostic JavaScript/TypeScript setup.

  8. Storybook Rsbuild peer dependency requirements

    Storybook Rsbuild requires the following peer dependencies:

    • @rsbuild/core: ^1.5.0 || ^2.0.0-0 (Stable Rsbuild runtime required).
    • storybook: ^10.6.0 (The minor version of Storybook Rsbuild tracks the Storybook minor version it is built against, e.g., 3.6.x targets Storybook 10.6).

  11. Set up React Native Reanimated for Web

    The framework provides built-in support for React Native Reanimated, including the definition of _WORKLET and _frameTimestamp globals and ESM transformation of webUtils.

    Note for pnpm users: If using a restricted hoistPattern in pnpm-workspace.yaml, you must explicitly add react-native-web to the hoist pattern because react-native-reanimated v4 imports its internals without declaring it as a dependency.

    # Installation
npm install react-native-reanimated react-native-worklets
    # pnpm-workspace.yaml (if hoisting is restricted)
hoistPattern:
  - react-native-web

  12. Configure Module Federation for Modern.js in Storybook

    When using Module Federation with Modern.js and Storybook, you must install @module-federation/storybook-addon and manually pass the remotes option in .storybook/main.ts because Storybook cannot infer it automatically. Additionally, you must disable the moduleFederationPlugin in modern.config.ts while Storybook is running to avoid conflicts.
    npm install @module-federation/storybook-addon -D
    // .storybook/main.ts
import type { StorybookConfig } from 'storybook-react-rsbuild'
const moduleFederationConfig = { remotes: {} }

const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    'storybook-addon-modernjs',
    {
      name: '@module-federation/storybook-addon',
      options: {
        remotes: moduleFederationConfig.remotes,
      },
    },
  ],
  framework: 'storybook-react-rsbuild',
}
export default config
    // package.json
{
  "scripts": {
    "storybook": "STORYBOOK=true storybook dev -p 6006"
  }
}
    // modern.config.ts
import { appTools, defineConfig } from '@modern-js/app-tools'
import { moduleFederationPlugin } from '@module-federation/modern-js'

export default defineConfig({
  plugins: [
    appTools({
      bundler: 'rspack',
    }),
    ...(process.env.STORYBOOK === 'true' ? [] : [moduleFederationPlugin()]),
  ],
})