GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-09 00:19:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Minor updates to the Environment variables docs

Browse Source
This commit is contained in:
jonniebigodes 2023-07-25 17:06:41 +01:00
parent c06e18ac69
commit daa1b338db
18 changed files with 134 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
docs/configure/environment-variables.md
View File

@ -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:
<IfRenderer renderer={['angular', 'ember' ]}>
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'common/storybook-read-environment-variables.js.mdx',
'common/storybook-read-environment-variables.node-env.js.mdx',
]}
/>
</IfRenderer>
<!-- prettier-ignore-end -->
<IfRenderer renderer={['html', 'react', 'qwik', 'preact','svelte', 'solid', 'vue', 'web-components' ]}>
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'common/storybook-read-environment-variables.node-env.js.mdx',
'common/storybook-read-environment-variables.vite-env.js.mdx',
]}
/>
</IfRenderer>
<!-- prettier-ignore-end -->
You can also access these variables in your custom `<head>`/`<body>` 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
<CodeSnippets
paths={[
'react/my-component-with-env-variables.js.mdx',
'react/my-component-with-env-variables.ts.mdx',
'vue/my-component-with-env-variables.js.mdx',
'vue/my-component-with-env-variables.ts.mdx',
'angular/my-component-with-env-variables.ts.mdx',
'web-components/my-component-with-env-variables.js.mdx',
'web-components/my-component-with-env-variables.ts.mdx',
'svelte/my-component-with-env-variables.js.mdx',
'solid/my-component-with-env-variables.js.mdx',
'solid/my-component-with-env-variables.ts.mdx',
'common/my-component-with-env-variables.js.mdx',
'common/my-component-with-env-variables.ts.mdx',
]}
usesCsf3
csf2Path="configure/environment-variables#snippet-my-component-with-env-variables"
/>
<!-- prettier-ignore-end -->
<IfRenderer renderer={['html', 'react', 'qwik', 'preact','svelte', 'solid', 'vue', 'web-components' ]}>
#### With Vite
Out of the box, Storybook provides a [Vite builder](../builders/vite.md), so using environment variables here will be quite different from using environment variables in other frameworks that use other build tools. To access environment variables in Storybook (e.g., `STORYBOOK_`, `VITE_`), you can use the `import.meta.env`, which is specific to Vite. For example:
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'web-components/my-component-vite-env-variables.js.mdx',
'web-components/my-component-vite-env-variables.ts.mdx',
'common/my-component-vite-env-variables.js.mdx',
'common/my-component-vite-env-variables.ts.mdx',
]}
/>
<!-- prettier-ignore-end -->
</IfRenderer>
<div class="aside">
You can also use specific files for specific modes. Add a <code>.env.development</code> or <code>.env.production</code> 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.
</div>
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:
<!-- prettier-ignore-start -->
@ -122,3 +157,9 @@ The table below lists the available options:
<div class="aside">
💡 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.
</div>
## 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 and are interested in helping us improving support for this feature, we encourage you to reach out to the maintainers using the default communication channels (e.g., [Discord server](https://discord.com/channels/486522875931656193/570426522528382976), [GitHub issues](https://github.com/storybookjs/storybook/issues)).

3
docs/snippets/solid/my-component-with-env-variables.js.mdx → docs/snippets/common/my-component-vite-env-variables.js.mdx
View File

@ -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,
},
};
```

8
docs/snippets/solid/my-component-with-env-variables.ts-4-9.mdx → docs/snippets/common/my-component-vite-env-variables.ts-4-9.mdx
View File

@ -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<typeof meta>;
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,
},
};
```

22
docs/snippets/common/my-component-vite-env-variables.ts.mdx Normal file
View File

@ -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<typeof MyComponent> = {
component: MyComponent,
};
export default meta;
type Story = StoryObj<typeof MyComponent>;
export const ExampleStory: Story = {
args: {
propertyA: import.meta.env.STORYBOOK_DATA_KEY,
propertyB: import.meta.env.VITE_CUSTOM_VAR,
},
};
```

0
docs/snippets/react/my-component-with-env-variables.js.mdx → docs/snippets/common/my-component-with-env-variables.js.mdx
View File

5
docs/snippets/react/my-component-with-env-variables.ts-4-9.mdx → docs/snippets/common/my-component-with-env-variables.ts-4-9.mdx
View File

@ -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';

5
docs/snippets/react/my-component-with-env-variables.ts.mdx → docs/snippets/common/my-component-with-env-variables.ts.mdx
View File

@ -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';

8
docs/snippets/common/storybook-main-pnpm-with-module-resolution.js.mdx
View File

@ -3,19 +3,19 @@
import path from 'path';
const getAbsolutePath = (packageName) =>
const wrapForPnp = (packageName) =>
path.dirname(require.resolve(path.join(packageName, 'package.json')));
export default {
framework: {
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
name: getAbsolutePath('@storybook/your-framework'),
name: wrapForPnp('@storybook/your-framework'),
options: {},
},
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
//👇 Use getAbsolutePath when referencing Storybook's addons and frameworks
getAbsolutePath('@storybook/addon-essentials'),
//👇 Use wrapForPnp when referencing Storybook's addons and frameworks
wrapForPnp('@storybook/addon-essentials'),
],
};
```

8
docs/snippets/common/storybook-main-pnpm-with-module-resolution.ts.mdx
View File

@ -6,19 +6,19 @@ import type { StorybookConfig } from '@storybook/your-framework';
import path from 'path';
const getAbsolutePath = (packageName: string): any =>
const wrapForPnp = (packageName: string) =>
path.dirname(require.resolve(path.join(packageName, 'package.json')));
const config: StorybookConfig = {
framework: {
// Replace your-framework with the same one you've imported above.
name: getAbsolutePath('@storybook/your-framework'),
name: wrapForPnp('@storybook/your-framework'),
options: {},
},
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
//👇 Use getAbsolutePath when referencing Storybook's addons and frameworks
getAbsolutePath('@storybook/addon-essentials'),
//👇 Use wrapForPnp when referencing Storybook's addons and frameworks
wrapForPnp('@storybook/addon-essentials'),
],
};

0
docs/snippets/common/storybook-read-environment-variables.js.mdx → docs/snippets/common/storybook-read-environment-variables.node-env.js.mdx
View File

4
docs/snippets/common/storybook-read-environment-variables.vite-env.js.mdx Normal file
View File

@ -0,0 +1,4 @@
```js
console.log(import.meta.env.STORYBOOK_THEME);
console.log(import.meta.env.STORYBOOK_DATA_KEY);
```

20
docs/snippets/solid/my-component-with-env-variables.ts.mdx
View File

@ -1,20 +0,0 @@
```tsx
// MyComponent.stories.ts| tsx
import type { Meta, StoryObj } from 'storybook-solidjs';
import { MyComponent } from './MyComponent';
const meta: Meta<typeof MyComponent> = {
component: MyComponent,
};
export default meta;
type Story = StoryObj<typeof MyComponent>;
export const ExampleStory: Story = {
args: {
propertyA: process.env.STORYBOOK_DATA_KEY,
},
};
```

19
docs/snippets/svelte/my-component-with-env-variables.js.mdx
View File

@ -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,
},
};
```

15
docs/snippets/vue/my-component-with-env-variables.js.mdx
View File

@ -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,
},
};
```

21
docs/snippets/vue/my-component-with-env-variables.ts-4-9.mdx
View File

@ -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<typeof MyComponent>;
export default meta;
type Story = StoryObj<typeof meta>;
export const ExampleStory: Story = {
args: {
propertyA: process.env.STORYBOOK_DATA_KEY,
},
};
```

21
docs/snippets/vue/my-component-with-env-variables.ts.mdx
View File

@ -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<typeof MyComponent> = {
component: MyComponent,
};
export default meta;
type Story = StoryObj<typeof MyComponent>;
export const ExampleStory: Story = {
args: {
propertyA: process.env.STORYBOOK_DATA_KEY,
},
};
```

14
docs/snippets/web-components/my-component-vite-env-variables.js.mdx Normal file
View File

@ -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,
},
};
```

19
docs/snippets/web-components/my-component-vite-env-variables.ts.mdx Normal file
View File

@ -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,
},
};
```