The default Vite and webpack builders emit relative asset paths, but Rsbuild recommends absolute paths for deployment (see the asset prefix tips). To deploy Storybook at https://example.com/sb-path, set output.assetPrefix.
const config: StorybookConfig = {
// --snip--
rsbuildFinal: (config) => {
+ config.output ??= {}
+ config.output.assetPrefix = '/sb-path/'
return config
},
// --snip--
}Rspack supports the webpackInclude magic comment starting in version 0.0.7, which prevents this issue.
Older Rspack versions bundled every matching file because webpackInclude was not yet available. Use rspack.IgnorePlugin to exclude files that shouldn't be part of your stories (for example, Markdown).
// .storybook/main.js
import path from 'path'
import { mergeRsbuildConfig } from '@rsbuild/core'
export default {
framework: 'storybook-react-rsbuild',
async rsbuildFinal(config) {
return mergeRsbuildConfig(config, {
tools: {
rspack: (config, { addRules, appendPlugins, rspack, mergeConfig }) => {
return mergeConfig(config, {
plugins: [
new rspack.IgnorePlugin({
checkResource: (resource, context) => {
const absPathHasExt = path.extname(resource)
if (absPathHasExt === '.md') {
return true
}
return false
},
}),
],
})
},
},
})
},
}getAbsolutePath to resolve the framework?See Storybook's FAQ for the explanation.
Rsbuild offers a CLI debug mode. Enable it when running Storybook to dump the generated configuration paths.
In development:
DEBUG=rsbuild storybook devIn production:
DEBUG=rsbuild storybook buildCheck the CLI output to see where the Rsbuild and Rspack configs are written.
Yes. Rsbuild is built on Rspack, so you can feed your Rspack configuration into the Rsbuild builder. Follow the Rspack integration guide to learn how.