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:
STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook
Do not store any secrets (e.g., private API keys) or other types of sensitive information in your Storybook. Environment variables are embedded into the build, meaning anyone can view them by inspecting your files.
Then we can access these environment variables anywhere inside our preview JavaScript code like below:
console.log(process.env.STORYBOOK_THEME);
console.log(process.env.STORYBOOK_DATA_KEY);
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:
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { MyComponent } from './MyComponent';
export default {
/* π The title prop is optional.
* See https://storybook.js.org/docs/6/configure#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'MyComponent',
component: MyComponent,
} as ComponentMeta<typeof MyComponent>;
const Template: ComponentStory<typeof MyComponent> = (args) => <MyComponent {...args} />;
export const ExampleStory = Template.bind({});
ExampleStory.args = {
propertyA: process.env.STORYBOOK_DATA_KEY,
};
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 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:
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
],
/*
* π The `config` argument contains all the other existing environment variables.
* Either configured in an `.env` file or configured on the command line.
*/
env: (config) => ({
...config,
EXAMPLE_VAR: 'An environment variable configured in Storybook',
}),
};
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:
import { MyComponent } from './MyComponent';
export default {
/* π The title prop is optional.
* See https://storybook.js.org/docs/6/configure#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'MyComponent',
component: MyComponent,
};
const Template = (args) => ({
//π Your template goes here
});
export const Default = Template.bind({});
Default.args = {
exampleProp: process.env.EXAMPLE_VAR,
};
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" |
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.