Read an environment variable from Storybook deployed on Vercel

Let's say you are working on a NextJS app with Storybook

If want to read an environment from a storybook that is deployed on Vercel learn how to configure storybook to be able to read that variable and avoid getting that variable as undefined.

1. Code to read the environment variable:

Supposing that we have a MAPBOX variable in the .env file that we want to read from the storybook story

ExampleStory.args = {
  MAPBOX: process.env.MAPBOX,
};

2. Configure Storybook

This will not suffice if you deploy the storybook on Vercel.

That variable will return as undefined. So you have to configure storybook

On the main.js file from the .storybook folder add the following code

module.exports = {
  "stories": [
    "../components-ui-legacy/**/*.stories.mdx",
    "../components-ui-legacy/**/*.stories.@(js|jsx|ts|tsx)"
  ],
...
,
 /* 
   * 👇 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,
      MAPBOX: process.env.MAPBOX,
  }),
}

3. Deploy storybook to Vercel

Add a new project to Vercel with the following configuration