3.9 KiB
| 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:
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:
<CodeSnippets paths={[ 'common/storybook-read-environment-variables.js.mdx', ]} />
You can also access these variables in your custom <head>/<body> using the substitution %STORYBOOK_X%, for example: %STORYBOOK_THEME% will become red.
💡 If using the environment variables as attributes or values in JavaScript, you may need to add quotes, as the value will be inserted directly. e.g. <link rel="stylesheet" href="%STORYBOOK_STYLE_URL%" />
Using .env files
You can also use .env files to change Storybook's behavior in different modes. For example, if you add a .env file to your project with the following:
STORYBOOK_DATA_KEY=12345
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', 'react/my-component-with-env-variables.mdx.mdx', 'vue/my-component-with-env-variables.2.js.mdx', 'vue/my-component-with-env-variables.mdx-2.mdx.mdx', 'vue/my-component-with-env-variables.3.js.mdx', 'vue/my-component-with-env-variables.mdx-3.mdx.mdx', 'angular/my-component-with-env-variables.ts.mdx', 'angular/my-component-with-env-variables.mdx.mdx', 'web-components/my-component-with-env-variables.js.mdx', 'svelte/my-component-with-env-variables.js.mdx', 'svelte/my-component-with-env-variables.native-format.mdx', 'svelte/my-component-with-env-variables.mdx.mdx', ]} />
.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 with build-storybook.
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) and provide a configuration field that you can use to define specific variables (e.g., API URLs). For example:
<CodeSnippets paths={[ 'common/storybook-main-env-field-config.js.mdx', ]} />
When Storybook loads, it will enable you to access them in your stories similar as you would do if you were working with an env file:
<CodeSnippets paths={[ 'common/my-component-env-var-config.js.mdx', 'common/my-component-env-var-config.mdx.mdx', ]} />
Using environment variables to choose the browser
Storybook allows you to choose the browser you want to preview your stories. Either through a .env file entry or directly in your storybook script.
The table below lists the available options:
| Browser | Example |
|---|---|
| Safari | BROWSER="safari" |
| Firefox | BROWSER="firefox" |
| Chromium | BROWSER="chromium" |