From f5e65ecf4e3d41e1ce7dca05a112b8bae1c49a5e Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Tue, 3 Mar 2026 16:27:31 +0100 Subject: [PATCH 1/2] Docs: Add configuration snippets and documentation for allowedHosts in Storybook core settings --- .../main-config-core-allowed-hosts.md | 25 +++++++++++++++++++ docs/api/main-config/main-config-core.mdx | 15 +++++++++++ 2 files changed, 40 insertions(+) create mode 100644 docs/_snippets/main-config-core-allowed-hosts.md diff --git a/docs/_snippets/main-config-core-allowed-hosts.md b/docs/_snippets/main-config-core-allowed-hosts.md new file mode 100644 index 000000000000..027c4ab929b6 --- /dev/null +++ b/docs/_snippets/main-config-core-allowed-hosts.md @@ -0,0 +1,25 @@ +```js filename=".storybook/main.js" renderer="common" language="js" +export default { + // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc. + framework: '@storybook/your-framework', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + core: { + allowedHosts: ['storybook.example.local'], + }, +}; +``` + +```ts filename=".storybook/main.ts" renderer="common" language="ts" +// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc. +import type { StorybookConfig } from '@storybook/your-framework'; + +const config: StorybookConfig = { + framework: '@storybook/your-framework', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + core: { + allowedHosts: ['storybook.example.local'], + }, +}; + +export default config; +``` diff --git a/docs/api/main-config/main-config-core.mdx b/docs/api/main-config/main-config-core.mdx index 880af2a6a782..718e83c55454 100644 --- a/docs/api/main-config/main-config-core.mdx +++ b/docs/api/main-config/main-config-core.mdx @@ -11,6 +11,7 @@ Type: ```ts { + allowedHosts?: string[] | true; builder?: string | { name: string; options?: BuilderOptions }; channelOptions?: ChannelOptions; crossOriginIsolated?: boolean; @@ -25,6 +26,20 @@ Type: 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). + +{/* prettier-ignore-start */} + + + +{/* prettier-ignore-end */} + ## `builder` Type: From 506c0cd4d50543228430310ad6c9b48957c779f1 Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Tue, 3 Mar 2026 14:35:59 -0700 Subject: [PATCH 2/2] Tweaks - Add CSF Next examples to snippet - Prose improvements --- .../main-config-core-allowed-hosts.md | 96 ++++++++++++++++++- docs/api/main-config/main-config-core.mdx | 2 +- 2 files changed, 95 insertions(+), 3 deletions(-) diff --git a/docs/_snippets/main-config-core-allowed-hosts.md b/docs/_snippets/main-config-core-allowed-hosts.md index 027c4ab929b6..987a90b0eee5 100644 --- a/docs/_snippets/main-config-core-allowed-hosts.md +++ b/docs/_snippets/main-config-core-allowed-hosts.md @@ -1,4 +1,4 @@ -```js filename=".storybook/main.js" renderer="common" language="js" +```js filename=".storybook/main.js" renderer="common" language="js" tabTitle="CSF 3" export default { // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc. framework: '@storybook/your-framework', @@ -9,7 +9,7 @@ export default { }; ``` -```ts filename=".storybook/main.ts" renderer="common" language="ts" +```ts filename=".storybook/main.ts" renderer="common" language="ts" tabTitle="CSF 3" // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc. import type { StorybookConfig } from '@storybook/your-framework'; @@ -23,3 +23,95 @@ const config: StorybookConfig = { export default config; ``` + +```ts filename=".storybook/main.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪" +// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite) +import { defineMain } from '@storybook/your-framework/node'; + +export default defineMain({ + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + framework: '@storybook/your-framework', + core: { + allowedHosts: ['storybook.example.local'], + }, +}); +``` + + + +```js filename=".storybook/main.js" renderer="react" language="js" tabTitle="CSF Next 🧪" +// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite) +import { defineMain } from '@storybook/your-framework/node'; + +export default defineMain({ + framework: '@storybook/your-framework', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + core: { + allowedHosts: ['storybook.example.local'], + }, +}); +``` + +```ts filename=".storybook/main.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪" +import { defineMain } from '@storybook/vue3-vite/node'; + +export default defineMain({ + framework: '@storybook/vue3-vite', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + core: { + allowedHosts: ['storybook.example.local'], + }, +}); +``` + + + +```js filename=".storybook/main.js" renderer="vue" language="js" tabTitle="CSF Next 🧪" +import { defineMain } from '@storybook/vue3-vite/node'; + +export default defineMain({ + framework: '@storybook/vue3-vite', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + core: { + allowedHosts: ['storybook.example.local'], + }, +}); +``` + +```ts filename=".storybook/main.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪" +import { defineMain } from '@storybook/angular/node'; + +export default defineMain({ + framework: '@storybook/angular', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + core: { + allowedHosts: ['storybook.example.local'], + }, +}); +``` + +```ts filename=".storybook/main.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪" +import { defineMain } from '@storybook/web-components-vite/node'; + +export default defineMain({ + framework: '@storybook/web-components-vite', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + core: { + allowedHosts: ['storybook.example.local'], + }, +}); +``` + + + +```js filename=".storybook/main.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪" +import { defineMain } from '@storybook/web-components-vite/node'; + +export default defineMain({ + framework: '@storybook/web-components-vite', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + core: { + allowedHosts: ['storybook.example.local'], + }, +}); +``` diff --git a/docs/api/main-config/main-config-core.mdx b/docs/api/main-config/main-config-core.mdx index 718e83c55454..e2531467af84 100644 --- a/docs/api/main-config/main-config-core.mdx +++ b/docs/api/main-config/main-config-core.mdx @@ -32,7 +32,7 @@ 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). +Configures the allowed hosts for the Storybook dev server, used for Origin and Host header validation. Storybook's localhost and local network (or [`--host`](../cli-options.mdx#dev)) 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). {/* prettier-ignore-start */}