Back to Storybook

core

docs/api/main-config/main-config-core.mdx

10.3.63.7 KB
Original Source

Parent: main.js|ts configuration

Type:

ts
{
  allowedHosts?: string[] | true;
  builder?: string | { name: string; options?: BuilderOptions };
  channelOptions?: ChannelOptions;
  crossOriginIsolated?: boolean;
  disableProjectJson?: boolean;
  disableTelemetry?: boolean;
  disableWebpackDefaults?: boolean;
  disableWhatsNewNotifications?: boolean;
  enableCrashReports?: boolean;
  renderer?: RendererName;
}

Configures Storybook's internal features.

allowedHosts

Type: string[] | true

Default: []

Configures the allowed hosts for the Storybook dev server, used for Origin and Host header validation. Storybook's localhost and local network (or --host) addresses are always allowed. Use this when accessing your local Storybook instance through a reverse proxy (e.g. your webapp dev server). Set to true to disable hostname validation (insecure).

<CodeSnippets path="main-config-core-allowed-hosts.md" />

builder

Type:

ts
| '@storybook/builder-vite' | '@storybook/builder-webpack5'
| {
    name: '@storybook/builder-vite' | '@storybook/builder-webpack5';
    options?: BuilderOptions;
  }

Configures Storybook's builder, Vite or Webpack.

<Callout variant="info" icon="💡"> With the new [Framework API](../new-frameworks.mdx), [`framework.options.builder`](./main-config-framework.mdx#optionsbuilder) is now the preferred way to configure the builder.

You should only use core.builder.options if you need to configure a builder that is not part of a framework. </Callout>

<CodeSnippets path="main-config-core-builder.md" />

channelOptions

Type: ChannelOptions

ts
{
  allowDate: boolean;
  allowRegExp: boolean;
  allowSymbol: boolean;
  allowUndefined: boolean;
  maxDepth: number;
  space: number | undefined;
}

Configures the channel used by Storybook to communicate between the manager and preview.

Only two properties are likely to be used:

channelOptions.maxDepth

Type: number

Default: 3

The maximum depth of nested objects to serialize across the channel. Larger values will be slower.

crossOriginIsolated

Type: boolean

Enable CORS headings to run document in a "secure context". See SharedArrayBuffer security requirements

This enables these headers in development-mode:

  • Cross-Origin-Opener-Policy: same-origin
  • Cross-Origin-Embedder-Policy: require-corp
<CodeSnippets path="main-config-core-cross-origin-isolated.md" />

disableProjectJson

Type: boolean

Disables the generation of project.json, a file containing Storybook metadata

<CodeSnippets path="main-config-core-disable-project-json.md" />

disableTelemetry

Type: boolean

Disables Storybook's telemetry collection.

<CodeSnippets path="main-config-core-disable-telemetry.md" />

disableWebpackDefaults

Type: boolean

Disables Storybook's default Webpack configuration.

<CodeSnippets path="main-config-core-disable-webpack-defaults.md" />

disableWhatsNewNotifications

Type: boolean

Disables the "What's New" notifications in the UI for new Storybook versions and ecosystem updates (e.g., addons, content, etc.).

<CodeSnippets path="main-config-core-disable-update-notifications.md" />

enableCrashReports

Type: boolean

Enable crash reports to be sent to Storybook telemetry.

<CodeSnippets path="main-config-core-enable-crash-reports.md" />

renderer

Type: RendererName