This doc covers the and how to use the presets mechanism for advanced configuration.

A preset is a set of hooks that is called by Storybook on initialization and can override configurations for babel, webpack, addons, and entries.

Each configuration has a similar signature, accepting a base configuration object and options, as in this webpack example:

The babel functions babel, babelDefault, and managerBabel all configure babel in different ways.

All functions take a as their argument and can modify it or return a new object.

export function babelDefault(config) {
return {
  ...config,
  presets: [...config.presets, require.resolve('babel-preset-vue')],
};

• is applied to the preview config, after it has been initialized by storybook
• babelDefault is applied to the preview config before any user presets have been applied
• managerBabel is applied to the manager.

The webpack functions webpack, webpackFinal, and managerWebpack configure webpack.

All functions take a webpack4 configuration object.

For example, here is how Storybook automatically adopts create-react-app’s configuration if it’s installed, where applyCRAWebpackConfig is a set of smart heuristics for modifying the input config.

• webpack is applied to the preview config after it has been initialized by storybook
• webpackFinal is applied to the preview config after all user presets have been applied
• webpackManager is applied to the manager config

The addon config addons allows you to add addons to Storybook from within a preset. For addons that require custom webpack/babel configuration, it is easier to simply install the preset, and it will take care of everything.

For example, the Storysource preset contains the following code:

export function addons(entry = []) {
return [...entry, require.resolve('@storybook/addon-storysource/register')];
}

Entries are the place to register entry points for the preview. For example it could be used to make a basic configure-storybook preset that loads all the files into SB, instead of forcing people to copy-paste the same thing everywhere.

The presets API is also more powerful than the available in Storybook, so it’s also possible to use presets for more advanced configuration without actually publishing a preset yourself.

For example, some users want to configure the webpack for Storybook’s UI and addons (issue), but this is not possible using (it used to be possible before SB4.1). However, you can achieve this with a private preset.

First, create a file my-preset.js in your storybook folder:

export async function managerWebpack(config, options) {
// update config here
}
export async function managerBabel(config, options) {
// update config here
return config;
}
export async function webpack(config, options) {
return config;
}
export async function babel(config, options) {
return config;
}

Then, load that preset in your file: