Storybook: Easily share environment variables with Create React App

[chrbala]

Is your feature request related to a problem? Please describe.
React Storybook and Create React App both require a prefix in environment variables. This makes environment switches cumbersome because both prefixes have to be defined and checked.

For example

.env

STORYBOOK_ENDPOINT=/.netlify/functions/api
REACT_APP_ENDPOINT=/.netlify/functions/api

Then later you have to check both the STORYBOOK prefixed and the REACT_APP prefixed endpoints.

Describe the solution you'd like
Allow REACT_APP prefixed environment variables - it may be good to make it opt in, because it's otherwise possible to leak information that people did not intend to be in production storybook builds.

Describe alternatives you've considered
It's probably possible to do this manually with webpack overrides, but this seems like a common use case.

Are you able to assist bring the feature to reality?
Looks like it would be a one line change, though I'm not sure exactly how we'd make it opt-in.
https://github.com/storybooks/storybook/blob/4da246bbe9413510b48d1ab8b9faf4fae4656d92/lib/core/src/server/config/utils.js#L29

[shilman]

@igor-dv this is an interesting thing for presets / unified config

[shilman]

@chrbala this is a great feature. I'd like us to figure out a principled way to implement it so that we can easily do this for whatever framework we're integrating with. @igor-dv's been hard at work implementing the concept of "presets" for babel/webpack config which is a real painpoint. I think once that gets worked out (over the next month or so?) this would be a nice addition to storybook-preset-cra (or whatever we end up calling it). I'll make sure we circle back on this once we're a little further along there, sound ok?

[chrbala]

Sounds great, thank you!

[igor-dv]

Extending presets to the env loading sounds reasonable

[LaurenceRolandJames]

Any update on this? Thanks.

[mrmckeb]

@LaurenceRolandJames I can see that @shilman has added this to the next milestone, which is great.

@shilman would you like me to pick this one up?

[shilman]

@mrmckeb That would be awesome! 🙇

[mrmckeb]

I'll try to get this into #7221 as well. I think that's the best path forward here.

[montogeek]

This doesn't seem to be working with:

"@storybook/addon-actions": "5.2.1",
    "@storybook/addon-knobs": "5.2.1",
    "@storybook/addon-notes": "5.2.1",
    "@storybook/addon-storysource": "5.2.1",
    "@storybook/addon-viewport": "5.2.1",
    "@storybook/preset-create-react-app": "1.0.0-beta.2",
    "@storybook/react": "5.2.1"

The moment I add that preset, the build breaks because now webpack can't understand CSS files. It seems the loaders are loaded incorrectly.

[montogeek]

Why it is like this in the first place? Why only allow STORYBOOK variables and not the rest? But then still load a default .env file (https://github.com/storybookjs/storybook/blob/next/lib/core/src/server/config/utils.js#L39).

It seems this filtering could be removed and leave it to the developer.

When this was added there was no discussion about it, just accepted: https://github.com/storybookjs/storybook/pull/1474, It is possible to revisit this decision?

[mrmckeb]

Hi @montogeek, can you raise an issue here? https://github.com/storybookjs/presets

I'll then take a look at this alongside the preset. I can take a look this weekend ;)

[shilman]

Is this fixed? Closing and I'm sure somebody will holler if it's not 😁

[mrmckeb]

It definitely should be! Thanks @shilman!

[bryik]

Possible regression? I just added Storybook to a new CRA app with:

npx -p @storybook/cli sb init --type react_scripts

An environment variable process.env.REACT_APP_DEBUG is missing when the component renders in Storybook though the environment variable is present when running the CRA dev server.

Package.json has:

    "@storybook/addon-actions": "^5.3.10",
    "@storybook/addon-links": "^5.3.10",
    "@storybook/addons": "^5.3.10",
    "@storybook/preset-create-react-app": "^1.5.2",
    "@storybook/react": "^5.3.10",

I do not have this problem with an earlier version of Storybook:

    "@storybook/addon-actions": "^5.2.4",
    "@storybook/addon-links": "^5.2.4",
    "@storybook/addons": "^5.2.4",
    "@storybook/react": "^5.2.4",

It's entirely possible that I've misconfigured something, looks like Storybook has changed a bit since 5.2.4.