VUE_APP_ .env environment variables

Question

VUE_APP_ .env environment variables

Opened this issue 6 years ago · 11 comments

I have a .env.development file that contains:

VUE_APP_TOKEN=mysecrettoken

This does not come through to process.env within my stories or the components they are using. This same environment variable is passed through as expected when running vue-cli-service serve. Are we able to get these in storybook as well?

The only way I've been able to get some custom environment into my stories is with something like STORYBOOK_TOKEN=dfdsf vue-cli-service serve:storybook as described here. However, this would involve duplicating a bunch of environment variable declarations and force me to refer to both VUE_APP_ and STORYBOOK_ in my application code.

Thanks.

Answer 1 · 2018-09-03T09:47:41.000Z

Thanks for the report. I will look into fixing this ASAP.

Answer 2 · 2018-09-03T09:48:58.000Z

Do you think you could provide me with a sample vue-cli based project which I could test on? I have never used VUE_APP_* before.

Answer 3 · 2018-09-03T10:00:09.000Z

Thanks a lot for the quick response. Here is a repo that reproduces the problem: https://github.com/axwalker/vue-cli-plugin-storybook-env

You'll see the console contains the environment variable in the main app, but not in storybook.

Answer 4 · 2018-09-05T22:37:45.000Z

@axwalker Can you check with 0.4.7?

Answer 5 · 2018-09-05T22:41:06.000Z

Actually, I am not sure. I think none of VUE_APP_ and STORYBOOK_ might work now because they are conflicting with each other.

Answer 6 · 2018-09-06T09:36:41.000Z

@pksunkara still no VUE_APP_ variables coming through to storybook, unfortunately.

Answer 7 · 2018-09-06T20:29:23.000Z

Okay, figured out the issue. Needs to be fixed in storybook. Commented here. Once it's fixed, the following command should make the VUE_APP_ available in storybook builds

NODE_ENV=development npm run serve:storybook

Answer 8 · 2018-09-07T10:49:55.000Z

I think the plugin should also set STORYBOOK_ENV to vue

Answer 9 · 2018-09-25T11:54:24.000Z

Is there any workaround for this that doesn't need that storybook issue to be resolved? Even if it involves having to explicitly declare VUE_APP_* again in some configuration for this plugin?

Answer 10 · 2018-11-27T09:16:53.000Z

I guess I have a related issue. In my case .env variables for production mode aren't loaded into actual app, after adding storybook plugin.

Repo with this problem: https://github.com/romansp/vue-cli-plugin-storybook-env

After adding storybook plugin both yarn build and yarn serve --mode production commands stop injecting variables defined in .env.production.

Answer 11 · 2018-12-03T16:38:24.000Z

Running into the same issue as @romansp describes after adding storybook plugin.