diff --git a/docs/configure/environment-variables.md b/docs/configure/environment-variables.md index 8cafa0e0eeae..4f32cac6c51b 100644 --- a/docs/configure/environment-variables.md +++ b/docs/configure/environment-variables.md @@ -3,7 +3,7 @@ title: 'Environment variables' --- You can use environment variables in Storybook to change its behavior in different “modes”. -If you supply an environment variable prefixed with `STORYBOOK_`, it will be available in `process.env` when using webpack, or `import.meta.env` when using the vite builder: +If you supply an environment variable prefixed with `STORYBOOK_`, it will be available in `process.env` when using Webpack, or `import.meta.env` when using the Vite builder: ```shell STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook @@ -17,14 +17,33 @@ STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook Then we can access these environment variables anywhere inside our preview JavaScript code like below: + + + + + + + + + + + + + + You can also access these variables in your custom ``/`` using the substitution `%STORYBOOK_X%`, for example: `%STORYBOOK_THEME%` will become `red`. @@ -49,25 +68,41 @@ Then you can access this environment variable anywhere, even within your stories + + + + + +#### With Vite + +Out of the box, Storybook provides a [Vite builder](../builders/vite.md), which does not output Node.js globals like `process.env`. To access environment variables in Storybook (e.g., `STORYBOOK_`, `VITE_`), you can use `import.meta.env`. For example: + + + + + +
-You can also use specific files for specific modes. Add a .env.development or .env.production to apply different values to your environment variables. + +You can also use specific files for specific modes. Add a `.env.development` or `.env.production` to apply different values to your environment variables. +
You can also pass these environment variables when you are [building your Storybook](../sharing/publish-storybook.md) with `build-storybook`. @@ -76,7 +111,7 @@ Then they'll be hardcoded to the static version of your Storybook. ### Using Storybook configuration -Additionally, you can extend your Storybook configuration file (i.e., [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)) and provide a configuration field that you can use to define specific variables (e.g., API URLs). For example: +Additionally, you can extend your Storybook configuration file (i.e., [`.storybook/main.js|.ts`](../configure/overview.md#configure-story-rendering)) and provide a configuration field that you can use to define specific variables (e.g., API URLs). For example: @@ -122,3 +157,9 @@ The table below lists the available options:
💡 By default, Storybook will open a new Chrome window as part of its startup process. If you don't have Chrome installed, make sure to include one of the following options, or set your default browser accordingly.
+ +## Troubleshooting + +### Environment variables are not working + +If you're trying to use framework-specific environment variables (e.g.,`VUE_APP_`), you may run into issues primarily due to the fact that Storybook and your framework may have specific configurations and may not be able to recognize and use those environment variables. If you run into a similar situation, you may need to adjust your framework configuration to make sure that it can recognize and use those environment variables. For example, if you're working with a Vite-based framework, you can extend the configuration file and enable the [`envPrefix`](https://vitejs.dev/config/shared-options.html#envprefix) option. Other frameworks may require a similar approach. diff --git a/docs/snippets/solid/my-component-with-env-variables.js.mdx b/docs/snippets/common/my-component-vite-env-variables.js.mdx similarity index 64% rename from docs/snippets/solid/my-component-with-env-variables.js.mdx rename to docs/snippets/common/my-component-vite-env-variables.js.mdx index 50eaf6c05e2c..08fe0cef60e6 100644 --- a/docs/snippets/solid/my-component-with-env-variables.js.mdx +++ b/docs/snippets/common/my-component-vite-env-variables.js.mdx @@ -9,7 +9,8 @@ export default { export const ExampleStory = { args: { - propertyA: process.env.STORYBOOK_DATA_KEY, + propertyA: import.meta.env.STORYBOOK_DATA_KEY, + propertyB: import.meta.env.VITE_CUSTOM_VAR, }, }; ``` diff --git a/docs/snippets/solid/my-component-with-env-variables.ts-4-9.mdx b/docs/snippets/common/my-component-vite-env-variables.ts-4-9.mdx similarity index 50% rename from docs/snippets/solid/my-component-with-env-variables.ts-4-9.mdx rename to docs/snippets/common/my-component-vite-env-variables.ts-4-9.mdx index 8f583cb3f2b5..77f63ce7ce00 100644 --- a/docs/snippets/solid/my-component-with-env-variables.ts-4-9.mdx +++ b/docs/snippets/common/my-component-vite-env-variables.ts-4-9.mdx @@ -1,7 +1,8 @@ ```tsx -// MyComponent.stories.ts| tsx +// MyComponent.stories.ts|tsx -import type { Meta, StoryObj } from 'storybook-solidjs'; +// Replace your-framework with the name of your framework +import type { Meta, StoryObj } from '@storybook/your-framework'; import { MyComponent } from './MyComponent'; @@ -14,7 +15,8 @@ type Story = StoryObj; export const ExampleStory: Story = { args: { - propertyA: process.env.STORYBOOK_DATA_KEY, + propertyA: import.meta.env.STORYBOOK_DATA_KEY, + propertyB: import.meta.env.VITE_CUSTOM_VAR, }, }; ``` diff --git a/docs/snippets/common/my-component-vite-env-variables.ts.mdx b/docs/snippets/common/my-component-vite-env-variables.ts.mdx new file mode 100644 index 000000000000..63873e873ece --- /dev/null +++ b/docs/snippets/common/my-component-vite-env-variables.ts.mdx @@ -0,0 +1,22 @@ +```tsx +// MyComponent.stories.ts|tsx + +// Replace your-framework with the name of your framework +import type { Meta, StoryObj } from '@storybook/your-framework'; + +import { MyComponent } from './MyComponent'; + +const meta: Meta = { + component: MyComponent, +}; + +export default meta; +type Story = StoryObj; + +export const ExampleStory: Story = { + args: { + propertyA: import.meta.env.STORYBOOK_DATA_KEY, + propertyB: import.meta.env.VITE_CUSTOM_VAR, + }, +}; +``` diff --git a/docs/snippets/react/my-component-with-env-variables.js.mdx b/docs/snippets/common/my-component-with-env-variables.js.mdx similarity index 100% rename from docs/snippets/react/my-component-with-env-variables.js.mdx rename to docs/snippets/common/my-component-with-env-variables.js.mdx diff --git a/docs/snippets/react/my-component-with-env-variables.ts-4-9.mdx b/docs/snippets/common/my-component-with-env-variables.ts-4-9.mdx similarity index 66% rename from docs/snippets/react/my-component-with-env-variables.ts-4-9.mdx rename to docs/snippets/common/my-component-with-env-variables.ts-4-9.mdx index c2e9166f3c27..27f2b085bac5 100644 --- a/docs/snippets/react/my-component-with-env-variables.ts-4-9.mdx +++ b/docs/snippets/common/my-component-with-env-variables.ts-4-9.mdx @@ -1,7 +1,8 @@ ```ts -// MyComponent.stories.ts| tsx +// MyComponent.stories.ts|tsx -import type { Meta, StoryObj } from '@storybook/react'; +// Replace your-framework with the name of your framework +import type { Meta, StoryObj } from '@storybook/your-framework'; import { MyComponent } from './MyComponent'; diff --git a/docs/snippets/react/my-component-with-env-variables.ts.mdx b/docs/snippets/common/my-component-with-env-variables.ts.mdx similarity index 65% rename from docs/snippets/react/my-component-with-env-variables.ts.mdx rename to docs/snippets/common/my-component-with-env-variables.ts.mdx index 6dbc64f0fbc0..d765be75bb29 100644 --- a/docs/snippets/react/my-component-with-env-variables.ts.mdx +++ b/docs/snippets/common/my-component-with-env-variables.ts.mdx @@ -1,7 +1,8 @@ ```ts -// MyComponent.stories.ts| tsx +// MyComponent.stories.ts|tsx -import type { Meta, StoryObj } from '@storybook/react'; +// Replace your-framework with the name of your framework +import type { Meta, StoryObj } from '@storybook/your-framework'; import { MyComponent } from './MyComponent'; diff --git a/docs/snippets/common/storybook-read-environment-variables.js.mdx b/docs/snippets/common/storybook-read-environment-variables.node-env.js.mdx similarity index 100% rename from docs/snippets/common/storybook-read-environment-variables.js.mdx rename to docs/snippets/common/storybook-read-environment-variables.node-env.js.mdx diff --git a/docs/snippets/common/storybook-read-environment-variables.vite-env.js.mdx b/docs/snippets/common/storybook-read-environment-variables.vite-env.js.mdx new file mode 100644 index 000000000000..6f99f3972ce9 --- /dev/null +++ b/docs/snippets/common/storybook-read-environment-variables.vite-env.js.mdx @@ -0,0 +1,4 @@ +```js +console.log(import.meta.env.STORYBOOK_THEME); +console.log(import.meta.env.STORYBOOK_DATA_KEY); +``` diff --git a/docs/snippets/solid/my-component-with-env-variables.ts.mdx b/docs/snippets/solid/my-component-with-env-variables.ts.mdx deleted file mode 100644 index 5f567cbee044..000000000000 --- a/docs/snippets/solid/my-component-with-env-variables.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```tsx -// MyComponent.stories.ts| tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { MyComponent } from './MyComponent'; - -const meta: Meta = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj; - -export const ExampleStory: Story = { - args: { - propertyA: process.env.STORYBOOK_DATA_KEY, - }, -}; -``` diff --git a/docs/snippets/svelte/my-component-with-env-variables.js.mdx b/docs/snippets/svelte/my-component-with-env-variables.js.mdx deleted file mode 100644 index 3ff738d90593..000000000000 --- a/docs/snippets/svelte/my-component-with-env-variables.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// MyComponent.stories.js - -import MyComponent from './MyComponent.svelte'; - -export default { - component: MyComponent, -}; - -export const ExampleStory = { - render: (args) => ({ - Component: MyComponent, - props: args, - }), - args: { - propertyA: process.env.STORYBOOK_DATA_KEY, - }, -}; -``` diff --git a/docs/snippets/vue/my-component-with-env-variables.js.mdx b/docs/snippets/vue/my-component-with-env-variables.js.mdx deleted file mode 100644 index 85ef62917371..000000000000 --- a/docs/snippets/vue/my-component-with-env-variables.js.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```js -// MyComponent.stories.js - -import MyComponent from './MyComponent.vue'; - -export default { - component: MyComponent, -}; - -export const ExampleStory = { - args: { - propertyA: process.env.STORYBOOK_DATA_KEY, - }, -}; -``` diff --git a/docs/snippets/vue/my-component-with-env-variables.ts-4-9.mdx b/docs/snippets/vue/my-component-with-env-variables.ts-4-9.mdx deleted file mode 100644 index 16f26529953c..000000000000 --- a/docs/snippets/vue/my-component-with-env-variables.ts-4-9.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// MyComponent.stories.ts - -// Replace vue3 with vue if you are using Storybook for Vue 2 -import type { Meta, StoryObj } from '@storybook/vue3'; - -import MyComponent from './YourPage.vue'; - -const meta = { - component: MyComponent, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const ExampleStory: Story = { - args: { - propertyA: process.env.STORYBOOK_DATA_KEY, - }, -}; -``` diff --git a/docs/snippets/vue/my-component-with-env-variables.ts.mdx b/docs/snippets/vue/my-component-with-env-variables.ts.mdx deleted file mode 100644 index bf79e1d92de9..000000000000 --- a/docs/snippets/vue/my-component-with-env-variables.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// MyComponent.stories.ts - -// Replace vue3 with vue if you are using Storybook for Vue 2 -import type { Meta, StoryObj } from '@storybook/vue3'; - -import MyComponent from './YourPage.vue'; - -const meta: Meta = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj; - -export const ExampleStory: Story = { - args: { - propertyA: process.env.STORYBOOK_DATA_KEY, - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-vite-env-variables.js.mdx b/docs/snippets/web-components/my-component-vite-env-variables.js.mdx new file mode 100644 index 000000000000..381d34ac9b89 --- /dev/null +++ b/docs/snippets/web-components/my-component-vite-env-variables.js.mdx @@ -0,0 +1,14 @@ +```js +// MyComponent.stories.js + +export default { + component: 'my-component', +}; + +export const ExampleStory = { + args: { + propertyA: import.meta.env.STORYBOOK_DATA_KEY, + propertyB: import.meta.env.VITE_CUSTOM_VAR, + }, +}; +``` diff --git a/docs/snippets/web-components/my-component-vite-env-variables.ts.mdx b/docs/snippets/web-components/my-component-vite-env-variables.ts.mdx new file mode 100644 index 000000000000..5a35c7a8ae24 --- /dev/null +++ b/docs/snippets/web-components/my-component-vite-env-variables.ts.mdx @@ -0,0 +1,19 @@ +```ts +// MyComponent.stories.ts + +import type { Meta, StoryObj } from '@storybook/web-components'; + +const meta: Meta = { + component: 'my-component', +}; + +export default meta; +type Story = StoryObj; + +export const ExampleStory: Story = { + args: { + propertyA: import.meta.env.STORYBOOK_DATA_KEY, + propertyB: import.meta.env.VITE_CUSTOM_VAR, + }, +}; +```