Storybook: Add .env file support

[Lehakos]

Do you have a plan to add support of .env file? With CRA we can add NODE_PATH variable to .env, but storybook does not support it.

[ndelangen]

Sounds like a great idea, good feature we can support!

Would you be able to open a PR adding this @Lehakos ?

[canercandan]

@Lehakos https://www.npmjs.com/package/dotenv could be a good candidate to approach this

[ndelangen]

Good suggestion @canercandan if you have experience with this package, maybe you could open that PR 🙇 ?

[canercandan]

@ndelangen I will need this feature too so will probably provide a PR soon, though in the meantime if someone wants to keep up on this you can use https://github.com/mrsteele/dotenv-webpack to enable dotenv through webpack this will require to setup a custom webpack setup that includes the webpack plugin Dotenv.

[ndelangen]

@canercandan That might be a valid permanent solution too?
To include this in our internal webpack configs?

[bsr203]

had the same issue. Meanwhile you can also set simple conf like

    "storybook": "NODE_PATH=. start-storybook -p 9009 -s public",

[Luchanso]

@bsr203 thank you a lot of, it's work for me

[agarrharr]

@canercandan I can't figure out how to add dotenv-webpack to my storybook's custom webpack setup.

@bsr203 Can you explain more about your workaround? I'm not sure where to put that config or what it does.

[bsr203]

@agarrharr Not sure what is your purpose, but for me, I wanted to avoid using relative path in my imports. So, instead of importing something like

import { path } from '../../services/menu';

I want to import like

import { path } from 'src/common/services/menu';

so only thing I have to do is to add NODE_PATH=. in my package.json storybook script as shown above.

I you do NODE_PATH=./src, you can import like import { path } from 'common/services/menu';

hope other variable also can set here, but my requirement is simple and happy with the workaround.
HTH.

[agarrharr]

@bsr203 That doesn't sound like what I'm trying to do. I want to have access to environment variables, which are stored in a .env file.

According to the Storybook docs, you can use environment variables that start with STORYBOOK_: https://storybook.js.org/configurations/env-vars/

So, I can do something like this in my scripts in packages.json:

"storybook": "cross-env STORYBOOK_SOME_API_KEY=asdf1234adsf start-storybook -p 9001 -c .storybook -s ./public/mr_assets"

But I don't want to put my API key in package.json. I would rather leave it in .env.

[RWOverdijk]

CRA and others have support for .env files. This supports needs to be available when using storybook one way or another.

So I solved it like this:

.storybook/webpack.config.js:

const Dotenv           = require('dotenv-webpack');
const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');

module.exports = (baseConfig, env) => {
  const config = genDefaultConfig(baseConfig, env);

  config.plugins.push(new Dotenv());

  return config;
};

Uses the default webpack, and just adds support for the env files.

[ndelangen]

@RWOverdijk If you can add this to our default webpack config(s) I'd be happy to merge that!

Provided it works if there's no dotfile.

[RWOverdijk]

If there's no dotfile, nothing happens. I'd be glad to add it for the react one, I think that's the only place it should be added anyway. Otherwise this workaround is just fine as long as it's documented.

Your call! :)

[agarrharr]

@RWOverdijk This workaround works great! I would love to see this either added to the default webpack config, or to the Storybook documentation: https://storybook.js.org/configurations/env-vars/

[ndelangen]

@RWOverdijk Why wouldn't it work for Vue? Just curious really, I'd ♥️ a PR adding it to the default webpack config and docs!

[RWOverdijk]

@ndelangen Will do. I'm guessing dist is generated, where can I find the webpack config to make a PR?

[ndelangen]

Here:
https://github.com/storybooks/storybook/blob/master/app/react/src/server/config/webpack.config.js

Also a prod version, and version per app:
https://github.com/storybooks/storybook/blob/master/app/vue/src/server/config/webpack.config.js

[RWOverdijk]

@ndelangen Alright. Final question, where do I add dotenv-webpack as a dependency then? If this is default behavior, it might break apps if they removed it (ejected for instance). Shouldn't it be optional then?

[ndelangen]

@RWOverdijk when a user ejects CRA, that is of no concequence to storybook I think.
Please tell me what problems you see that could happen.

The place to add the dependency is in the package.json of the app/* as a regular dependency.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 days. Thanks!

[ndelangen]

This has been added with 3.3.0

[christopher-francisco]

where is the documentation for this?

My components can't read the environment variables I have defined on my .env.development so it's not working?

[shilman]

@chris-fran it's possible that this regressed in 5.0. do you have a repro?

[christopher-francisco]

@shilman I'll have to make some time to put up a repro.

However, just incase the problem is me doing something wrong, my project goes like this:

 |-- .storybook/
 |-- src/
 |-- .env.development  // I got `REACT_APP_` env variables that are not loaded by storybook, so my components don't work properly

Maybe I am supposed to setup something to make it work?

Also, I'm on Storybook 3.7

[jayarjo]

How to make this work?

[DylanCulfogienis]

Can we get some documentation for this?

[DavidLozzi]

is this supported, if so how? I see you @ndelangen mentioned it v3

[JMo911]

Any luck with this?

[jme-s]

Also very keen to see this fixed.
We have recently moved to a white labelled solution which is predominantly defined by process.env variables.

[federicom-scale]

Currently struggling with this

[jonniebigodes]

@federicom-scale take a look here for a bare-bones example of a Storybook with env file support. Inside you'll find the components, storys and a test example. The .env files are split into environments (development, prod, test). The deployed version is here. The documentation is rather "slim" (pardon the bad pun) regarding this topic. I've been tackling other documentation aspects, but this one did not not go unnoticed. A pull request with a more comprehensive approach will be up shortly.

Hope the repo i shared helps you get unblocked.

Stay safe