@storybook/builder-vite
Advanced tools
The @storybook/builder-vite package is a Storybook builder that integrates Vite as the build tool for Storybook. It allows developers to leverage Vite's fast build times and features within their Storybook environment. This package is particularly useful for projects that are already using Vite and want to maintain consistency in their build tools.
Custom Vite Configuration
Allows customization of the Vite configuration used by Storybook. Developers can add aliases, plugins, and modify other settings to tailor the build process.
module.exports = {
stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
core: {
builder: '@storybook/builder-vite'
},
async viteFinal(config, { configType }) {
// customize the Vite config here
config.resolve.alias = {
...config.resolve.alias,
'@components': '/path/to/components'
};
// return the customized config
return config;
}
};Fast Build Times
By using Vite as the build tool, Storybook can take advantage of Vite's fast build times, leading to quicker startup and refresh times during development.
// There is no specific code sample for this feature as it is an inherent benefit of using Vite with Storybook.Support for Vite Plugins
Enables the use of Vite plugins within the Storybook build process, allowing developers to extend functionality with Vite's rich plugin ecosystem.
module.exports = {
core: {
builder: '@storybook/builder-vite'
},
async viteFinal(config) {
config.plugins.push(myVitePlugin());
return config;
}
};This package is a Storybook builder that uses Webpack 5 as the build tool. It is similar to @storybook/builder-vite in that it integrates a modern build tool into Storybook, but it uses Webpack instead of Vite. Webpack is more established but generally has slower build times compared to Vite.
Similar to the webpack5 builder, this package integrates Webpack 4 into Storybook. It is for projects that are still using Webpack 4 and have not yet upgraded to Webpack 5. It offers a different set of features and plugin compatibility compared to Vite.
While not a builder, this addon provides snapshot testing for Storybook stories. It complements builders like @storybook/builder-vite by adding testing capabilities to the development workflow.
Build your stories with vite for fast startup times and near-instant HMR.
Requirements:
When installing Storybook, use the --builder=vite flag if you do not have a vite.config file at your project root (if you do, the vite builder is chosen automatically).
The builder supports both development mode in Storybook and building a static production version.
Your vite.config file will be used by Storybook. If you need to customize the Vite config for Storybook, you have two choices:
vite.config conditionally, based on an environment variable, for example.viteFinal config to your .storybook/main.js file. See Customize Vite config for details.See https://vitejs.dev/guide/#scaffolding-your-first-vite-project,
npm create vite@latest # follow the prompts
npx storybook@latest init --builder vite && npm run storybook
vite and @storybook/builder-vitewebpack, react-scripts, and any other Webpack plugins or loaders.@storybook/manager-webpack5, you can remove it. Also remove @storybook/builder-webpack5 or @storybook/builder-webpack4 if they are installed.framework option of your .storybook/main.js file.rm -rf node_modules/.cache)/public/index.html file for Vite (be sure there are no %PUBLIC_URL% inside it, which is a CRA variable).jsx or .tsx file extension, which Vite requires. This includes .storybook/preview.jsx if it contains JSX syntax.@storybook/addon-interactions, for now you'll need to add a workaround for jest-mock relying on the node global variable by creating a .storybook/preview-head.html file containing the following:<script>
window.global = window;
</script>
yarn storybook or npm run storybook commands you are used to.For other details about the differences between Vite and Webpack projects, be sure to read through the Vite documentation.
The builder will read your vite.config.js file, though it may change some of the options in order to work correctly.
It looks for the Vite config in the CWD. If your config is located elsewhere, specify the path using the viteConfigPath builder option:
// .storybook/main.mjs
const config = {
framework: {
name: '@storybook/react-vite', // Your framework name here.
options: {
builder: {
viteConfigPath: '.storybook/customViteConfig.js',
},
},
},
};
export default config;
You can also override the merged Vite config:
// use `mergeConfig` to recursively merge Vite options
import { mergeConfig } from 'vite';
const config = {
async viteFinal(config, { configType }) {
// Be sure to return the customized config
return mergeConfig(config, {
// Customize the Vite config for Storybook
resolve: {
alias: { foo: 'bar' },
},
});
},
};
export default config;
The viteFinal function will give you config which is the combination of your project's Vite config and the builder's own Vite config.
You can tweak this as you want, for example to set up aliases, add new plugins etc.
The configType variable will be either "DEVELOPMENT" or "PRODUCTION".
The function should return the updated Vite configuration.
Configure your .storybook/main.ts to use TypeScript:
import type { StorybookConfig } from '@storybook/react-vite'; // (or whatever framework you are using)
const config: StorybookConfig = {
// other storybook options...,
async viteFinal(config, options) {
// modify and return config
},
};
export default config;
See Customize Vite config for details about using viteFinal.
Docgen is used in Storybook to populate the props table in docs view, the controls panel, and for several other addons. Docgen is supported in Svelte, Vue 3, and React. React docgen is configurable via the typescript.reactDocgen setting in .storybook/main.js.
export default {
typescript: {
reactDocgen: 'react-docgen`
}
}
If you're using TypeScript, we encourage you to experiment and see which option works better for your project.
The builder will by default enable Vite's server.fs.strict
option, for increased security. The default project root is set to the parent directory of the
Storybook configuration directory. This can be overridden in viteFinal.
The Vite builder cannot build itself.
Are you willing to contribute? We are especially looking for Vue and Svelte experts, as the current maintainers are React users.
Have a look at the GitHub issues with the vite label for known bugs. If you find any new bugs,
feel free to create an issue or send a pull request!
Please read the How to contribute guide.
8.2.0
Hold onto your hats! Storybook 8.2 has dropped, packed with a treasure trove of new features and bug fixes:
beforeAllplay functiontocbot - #28318, thanks @shilman!--no-dev option to init - #26918, thanks @fastfrwrd!--dev and --no-dev options to storybook init CLI - #26918, thanks @fastfrwrd!@storybook/addon-svelte-csf when initializing new projects - #27070, thanks @benmccann!beforeAll hook - #28255, thanks @ghengeveld!pkg-dir to fd-package-json - #28270, thanks @43081j!loading -> rendering -> playing - #28431, thanks @kasperpeulen!.stories.mdx handling - #25973, thanks @JReinhold!CJS for core/components - #28440, thanks @ndelangen!preview.js globals to initialGlobals - #27517, thanks @shilman!markdown-to-jsx to v7.4.5 - #26694, thanks @xyy94813!webpack-virtual-modules to 0.6.0 - #27102, thanks @fyodorovandrei!read-pkg-up to fd-package-json - #28272, thanks @43081j!doctrine with jsdoc-type-pratt-parser - #26305, thanks @43081j!Stories block, error when referenced in MDX - #28434, thanks @kasperpeulen!Typeset Doc block fontSizes type - #26475, thanks @noranda!env.bugfixes in SWC so destructuring is never transpiled - #28363, thanks @kasperpeulen!mount in react, svelte, and vue renderers - #28385, thanks @kasperpeulen!CompatibleString - #27180, thanks @sni-J!FAQs
A plugin to run and build Storybooks with Vite
The npm package @storybook/builder-vite receives a total of 1,665,794 weekly downloads. As such, @storybook/builder-vite popularity was classified as popular.
We found that @storybook/builder-vite demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare is expanding Node.js compatibility for Workers and Pages, enabling developers to use more npm packages through a hybrid approach that combines native code and polyfills for Node.js APIs.
Security News
The Python Software Foundation has expanded its CNA scope to include the Pallets Projects, enabling faster, more reliable CVE tracking for critical frameworks used in Python applications.
Security News
Elastic’s return to open source with the AGPL license has been met with skepticism, as many developers see it as a strategic move rather than a genuine effort to restore user trust and freedoms.