Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Easily share environment variables with Create React App

See original GitHub issue

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

Issue Analytics

State:
Created 5 years ago
Reactions:7
Comments:16 (10 by maintainers)

Top GitHub Comments

9reactions

bryikcommented, Feb 3, 2020

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.

2reactions

montogeekcommented, Sep 25, 2019

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?

Top Results From Across the Web

Create-react-app environments - Medium

Environment variables. React imports environment variables that are defined in a .env file at the root of the project. Skip to Environment Configuration...

Adding Custom Environment Variables | Create React App

Your project can consume variables declared in your environment as if they were declared locally in your JS files.

Is it possible to share environment variables between two ...

Is it possible to share environment variables between two react app running along with? · It depends on how you embed it ·...

How To Correctly Build a Multi-Environment React App?

React accepts environment variables defined in a.env file located at the project's root. If you're already familiar with the details, skip to ...

Handling runtime environment variables in create-react-apps

A new package called runtime-env-cra allows you to handle environment variables in quick and easy way with create-react-apps.