Sometimes, we may use configuration items inside Storybook. It might be a theme color, some client secret, or a JSON string. So, we usually tend to hard code them.

But you can expose those configurations via “environment variables.” For that, you need to prefix your environment variables with STORYBOOK_ prefix.

For an example, let’s expose two environment variables like this:

STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook

Then we can access these environment variables anywhere inside our JS code like below:

const out = console;

out.log(process.env.STORYBOOK_THEME);
out.log(process.env.STORYBOOK_DATA_KEY);

Even though we can access these env variables anywhere in the client side JS code, it’s better to use them only inside stories and inside the main Storybook config file.

Build time environment variables

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.

NODE_ENV env variable

In addition to the above prefixed environment variables, you can also pass the NODE_ENV variable to Storybook. But, you normally don’t need to do that since we set a reasonable default value for it.

• When running npm run storybook, we set NODE_ENV to ‘development’
• When building storybook, we set NODE_ENV to ‘production’