1.1 KiB
| title |
|---|
| Environment variables |
You can use environment variables in Storybook to change its behaviour 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:
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%" />
You can also pass these environment variables when you are building your Storybook with build-storybook.
Then they'll be hard coded to the static version of your Storybook.