From daa1b338db65ef8b97aab37a67da976fdd92faa0 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Tue, 25 Jul 2023 17:06:41 +0100 Subject: [PATCH 1/3] Minor updates to the Environment variables docs --- docs/configure/environment-variables.md | 67 +++++++++++++++---- .../my-component-vite-env-variables.js.mdx} | 3 +- ...y-component-vite-env-variables.ts-4-9.mdx} | 8 ++- .../my-component-vite-env-variables.ts.mdx | 22 ++++++ .../my-component-with-env-variables.js.mdx | 0 ...my-component-with-env-variables.ts-4-9.mdx | 5 +- .../my-component-with-env-variables.ts.mdx | 5 +- ...ok-main-pnpm-with-module-resolution.js.mdx | 8 +-- ...ok-main-pnpm-with-module-resolution.ts.mdx | 8 +-- ...ead-environment-variables.node-env.js.mdx} | 0 ...read-environment-variables.vite-env.js.mdx | 4 ++ .../my-component-with-env-variables.ts.mdx | 20 ------ .../my-component-with-env-variables.js.mdx | 19 ------ .../my-component-with-env-variables.js.mdx | 15 ----- ...my-component-with-env-variables.ts-4-9.mdx | 21 ------ .../my-component-with-env-variables.ts.mdx | 21 ------ .../my-component-vite-env-variables.js.mdx | 14 ++++ .../my-component-vite-env-variables.ts.mdx | 19 ++++++ 18 files changed, 134 insertions(+), 125 deletions(-) rename docs/snippets/{solid/my-component-with-env-variables.js.mdx => common/my-component-vite-env-variables.js.mdx} (64%) rename docs/snippets/{solid/my-component-with-env-variables.ts-4-9.mdx => common/my-component-vite-env-variables.ts-4-9.mdx} (50%) create mode 100644 docs/snippets/common/my-component-vite-env-variables.ts.mdx rename docs/snippets/{react => common}/my-component-with-env-variables.js.mdx (100%) rename docs/snippets/{react => common}/my-component-with-env-variables.ts-4-9.mdx (66%) rename docs/snippets/{react => common}/my-component-with-env-variables.ts.mdx (65%) rename docs/snippets/common/{storybook-read-environment-variables.js.mdx => storybook-read-environment-variables.node-env.js.mdx} (100%) create mode 100644 docs/snippets/common/storybook-read-environment-variables.vite-env.js.mdx delete mode 100644 docs/snippets/solid/my-component-with-env-variables.ts.mdx delete mode 100644 docs/snippets/svelte/my-component-with-env-variables.js.mdx delete mode 100644 docs/snippets/vue/my-component-with-env-variables.js.mdx delete mode 100644 docs/snippets/vue/my-component-with-env-variables.ts-4-9.mdx delete mode 100644 docs/snippets/vue/my-component-with-env-variables.ts.mdx create mode 100644 docs/snippets/web-components/my-component-vite-env-variables.js.mdx create mode 100644 docs/snippets/web-components/my-component-vite-env-variables.ts.mdx diff --git a/docs/configure/environment-variables.md b/docs/configure/environment-variables.md index 8cafa0e0eeae..c471051c721e 100644 --- a/docs/configure/environment-variables.md +++ b/docs/configure/environment-variables.md @@ -3,7 +3,7 @@ title: 'Environment variables' --- You can use environment variables in Storybook to change its behavior in different β€œmodes”. -If you supply an environment variable prefixed with `STORYBOOK_`, it will be available in `process.env` when using webpack, or `import.meta.env` when using the vite builder: +If you supply an environment variable prefixed with `STORYBOOK_`, it will be available in `process.env` when using Webpack, or `import.meta.env` when using the Vite builder: ```shell STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook @@ -17,14 +17,33 @@ STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook Then we can access these environment variables anywhere inside our preview JavaScript code like below: + + + + + + + + + + + + + + You can also access these variables in your custom ``/`` using the substitution `%STORYBOOK_X%`, for example: `%STORYBOOK_THEME%` will become `red`. @@ -49,25 +68,41 @@ Then you can access this environment variable anywhere, even within your stories + + + + + +#### With Vite + +Out of the box, Storybook provides a [Vite builder](../builders/vite.md), so using environment variables here will be quite different from using environment variables in other frameworks that use other build tools. To access environment variables in Storybook (e.g., `STORYBOOK_`, `VITE_`), you can use the `import.meta.env`, which is specific to Vite. For example: + + + + + +
-You can also use specific files for specific modes. Add a .env.development or .env.production to apply different values to your environment variables. + +You can also use specific files for specific modes. Add a `.env.development` or `.env.production` to apply different values to your environment variables. +
You can also pass these environment variables when you are [building your Storybook](../sharing/publish-storybook.md) with `build-storybook`. @@ -76,7 +111,7 @@ Then they'll be hardcoded to the static version of your Storybook. ### Using Storybook configuration -Additionally, you can extend your Storybook configuration file (i.e., [`.storybook/main.js`](../configure/overview.md#configure-story-rendering)) and provide a configuration field that you can use to define specific variables (e.g., API URLs). For example: +Additionally, you can extend your Storybook configuration file (i.e., [`.storybook/main.js|.ts`](../configure/overview.md#configure-story-rendering)) and provide a configuration field that you can use to define specific variables (e.g., API URLs). For example: @@ -122,3 +157,9 @@ The table below lists the available options:
πŸ’‘ By default, Storybook will open a new Chrome window as part of its startup process. If you don't have Chrome installed, make sure to include one of the following options, or set your default browser accordingly.
+ +## Troubleshooting + +### Environment variables are not working + +If you're trying to use framework-specific environment variables (e.g.,`VUE_APP_`), you may run into issues primarily due to the fact that Storybook and your framework may have specific configurations and may not be able to recognize and use those environment variables. If you run into a similar situation and are interested in helping us improving support for this feature, we encourage you to reach out to the maintainers using the default communication channels (e.g., [Discord server](https://discord.com/channels/486522875931656193/570426522528382976), [GitHub issues](https://github.com/storybookjs/storybook/issues)). diff --git a/docs/snippets/solid/my-component-with-env-variables.js.mdx b/docs/snippets/common/my-component-vite-env-variables.js.mdx similarity index 64% rename from docs/snippets/solid/my-component-with-env-variables.js.mdx rename to docs/snippets/common/my-component-vite-env-variables.js.mdx index 50eaf6c05e2c..08fe0cef60e6 100644 --- a/docs/snippets/solid/my-component-with-env-variables.js.mdx +++ b/docs/snippets/common/my-component-vite-env-variables.js.mdx @@ -9,7 +9,8 @@ export default { export const ExampleStory = { args: { - propertyA: process.env.STORYBOOK_DATA_KEY, + propertyA: import.meta.env.STORYBOOK_DATA_KEY, + propertyB: import.meta.env.VITE_CUSTOM_VAR, }, }; ``` diff --git a/docs/snippets/solid/my-component-with-env-variables.ts-4-9.mdx b/docs/snippets/common/my-component-vite-env-variables.ts-4-9.mdx similarity index 50% rename from docs/snippets/solid/my-component-with-env-variables.ts-4-9.mdx rename to docs/snippets/common/my-component-vite-env-variables.ts-4-9.mdx index 8f583cb3f2b5..77f63ce7ce00 100644 --- a/docs/snippets/solid/my-component-with-env-variables.ts-4-9.mdx +++ b/docs/snippets/common/my-component-vite-env-variables.ts-4-9.mdx @@ -1,7 +1,8 @@ ```tsx -// MyComponent.stories.ts| tsx +// MyComponent.stories.ts|tsx -import type { Meta, StoryObj } from 'storybook-solidjs'; +// Replace your-framework with the name of your framework +import type { Meta, StoryObj } from '@storybook/your-framework'; import { MyComponent } from './MyComponent'; @@ -14,7 +15,8 @@ type Story = StoryObj; export const ExampleStory: Story = { args: { - propertyA: process.env.STORYBOOK_DATA_KEY, + propertyA: import.meta.env.STORYBOOK_DATA_KEY, + propertyB: import.meta.env.VITE_CUSTOM_VAR, }, }; ``` diff --git a/docs/snippets/common/my-component-vite-env-variables.ts.mdx b/docs/snippets/common/my-component-vite-env-variables.ts.mdx new file mode 100644 index 000000000000..63873e873ece --- /dev/null +++ b/docs/snippets/common/my-component-vite-env-variables.ts.mdx @@ -0,0 +1,22 @@ +```tsx +// MyComponent.stories.ts|tsx + +// Replace your-framework with the name of your framework +import type { Meta, StoryObj } from '@storybook/your-framework'; + +import { MyComponent } from './MyComponent'; + +const meta: Meta = { + component: MyComponent, +}; + +export default meta; +type Story = StoryObj; + +export const ExampleStory: Story = { + args: { + propertyA: import.meta.env.STORYBOOK_DATA_KEY, + propertyB: import.meta.env.VITE_CUSTOM_VAR, + }, +}; +``` diff --git a/docs/snippets/react/my-component-with-env-variables.js.mdx b/docs/snippets/common/my-component-with-env-variables.js.mdx similarity index 100% rename from docs/snippets/react/my-component-with-env-variables.js.mdx rename to docs/snippets/common/my-component-with-env-variables.js.mdx diff --git a/docs/snippets/react/my-component-with-env-variables.ts-4-9.mdx b/docs/snippets/common/my-component-with-env-variables.ts-4-9.mdx similarity index 66% rename from docs/snippets/react/my-component-with-env-variables.ts-4-9.mdx rename to docs/snippets/common/my-component-with-env-variables.ts-4-9.mdx index c2e9166f3c27..27f2b085bac5 100644 --- a/docs/snippets/react/my-component-with-env-variables.ts-4-9.mdx +++ b/docs/snippets/common/my-component-with-env-variables.ts-4-9.mdx @@ -1,7 +1,8 @@ ```ts -// MyComponent.stories.ts| tsx +// MyComponent.stories.ts|tsx -import type { Meta, StoryObj } from '@storybook/react'; +// Replace your-framework with the name of your framework +import type { Meta, StoryObj } from '@storybook/your-framework'; import { MyComponent } from './MyComponent'; diff --git a/docs/snippets/react/my-component-with-env-variables.ts.mdx b/docs/snippets/common/my-component-with-env-variables.ts.mdx similarity index 65% rename from docs/snippets/react/my-component-with-env-variables.ts.mdx rename to docs/snippets/common/my-component-with-env-variables.ts.mdx index 6dbc64f0fbc0..d765be75bb29 100644 --- a/docs/snippets/react/my-component-with-env-variables.ts.mdx +++ b/docs/snippets/common/my-component-with-env-variables.ts.mdx @@ -1,7 +1,8 @@ ```ts -// MyComponent.stories.ts| tsx +// MyComponent.stories.ts|tsx -import type { Meta, StoryObj } from '@storybook/react'; +// Replace your-framework with the name of your framework +import type { Meta, StoryObj } from '@storybook/your-framework'; import { MyComponent } from './MyComponent'; diff --git a/docs/snippets/common/storybook-main-pnpm-with-module-resolution.js.mdx b/docs/snippets/common/storybook-main-pnpm-with-module-resolution.js.mdx index 4ffa05ad3ff6..7b70439e066a 100644 --- a/docs/snippets/common/storybook-main-pnpm-with-module-resolution.js.mdx +++ b/docs/snippets/common/storybook-main-pnpm-with-module-resolution.js.mdx @@ -3,19 +3,19 @@ import path from 'path'; -const getAbsolutePath = (packageName) => +const wrapForPnp = (packageName) => path.dirname(require.resolve(path.join(packageName, 'package.json'))); export default { framework: { // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - name: getAbsolutePath('@storybook/your-framework'), + name: wrapForPnp('@storybook/your-framework'), options: {}, }, stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], addons: [ - //πŸ‘‡ Use getAbsolutePath when referencing Storybook's addons and frameworks - getAbsolutePath('@storybook/addon-essentials'), + //πŸ‘‡ Use wrapForPnp when referencing Storybook's addons and frameworks + wrapForPnp('@storybook/addon-essentials'), ], }; ``` diff --git a/docs/snippets/common/storybook-main-pnpm-with-module-resolution.ts.mdx b/docs/snippets/common/storybook-main-pnpm-with-module-resolution.ts.mdx index a7e750975b3d..9dfedba3d0c1 100644 --- a/docs/snippets/common/storybook-main-pnpm-with-module-resolution.ts.mdx +++ b/docs/snippets/common/storybook-main-pnpm-with-module-resolution.ts.mdx @@ -6,19 +6,19 @@ import type { StorybookConfig } from '@storybook/your-framework'; import path from 'path'; -const getAbsolutePath = (packageName: string): any => +const wrapForPnp = (packageName: string) => path.dirname(require.resolve(path.join(packageName, 'package.json'))); const config: StorybookConfig = { framework: { // Replace your-framework with the same one you've imported above. - name: getAbsolutePath('@storybook/your-framework'), + name: wrapForPnp('@storybook/your-framework'), options: {}, }, stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], addons: [ - //πŸ‘‡ Use getAbsolutePath when referencing Storybook's addons and frameworks - getAbsolutePath('@storybook/addon-essentials'), + //πŸ‘‡ Use wrapForPnp when referencing Storybook's addons and frameworks + wrapForPnp('@storybook/addon-essentials'), ], }; diff --git a/docs/snippets/common/storybook-read-environment-variables.js.mdx b/docs/snippets/common/storybook-read-environment-variables.node-env.js.mdx similarity index 100% rename from docs/snippets/common/storybook-read-environment-variables.js.mdx rename to docs/snippets/common/storybook-read-environment-variables.node-env.js.mdx diff --git a/docs/snippets/common/storybook-read-environment-variables.vite-env.js.mdx b/docs/snippets/common/storybook-read-environment-variables.vite-env.js.mdx new file mode 100644 index 000000000000..6f99f3972ce9 --- /dev/null +++ b/docs/snippets/common/storybook-read-environment-variables.vite-env.js.mdx @@ -0,0 +1,4 @@ +```js +console.log(import.meta.env.STORYBOOK_THEME); +console.log(import.meta.env.STORYBOOK_DATA_KEY); +``` diff --git a/docs/snippets/solid/my-component-with-env-variables.ts.mdx b/docs/snippets/solid/my-component-with-env-variables.ts.mdx deleted file mode 100644 index 5f567cbee044..000000000000 --- a/docs/snippets/solid/my-component-with-env-variables.ts.mdx +++ /dev/null @@ -1,20 +0,0 @@ -```tsx -// MyComponent.stories.ts| tsx - -import type { Meta, StoryObj } from 'storybook-solidjs'; - -import { MyComponent } from './MyComponent'; - -const meta: Meta = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj; - -export const ExampleStory: Story = { - args: { - propertyA: process.env.STORYBOOK_DATA_KEY, - }, -}; -``` diff --git a/docs/snippets/svelte/my-component-with-env-variables.js.mdx b/docs/snippets/svelte/my-component-with-env-variables.js.mdx deleted file mode 100644 index 3ff738d90593..000000000000 --- a/docs/snippets/svelte/my-component-with-env-variables.js.mdx +++ /dev/null @@ -1,19 +0,0 @@ -```js -// MyComponent.stories.js - -import MyComponent from './MyComponent.svelte'; - -export default { - component: MyComponent, -}; - -export const ExampleStory = { - render: (args) => ({ - Component: MyComponent, - props: args, - }), - args: { - propertyA: process.env.STORYBOOK_DATA_KEY, - }, -}; -``` diff --git a/docs/snippets/vue/my-component-with-env-variables.js.mdx b/docs/snippets/vue/my-component-with-env-variables.js.mdx deleted file mode 100644 index 85ef62917371..000000000000 --- a/docs/snippets/vue/my-component-with-env-variables.js.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```js -// MyComponent.stories.js - -import MyComponent from './MyComponent.vue'; - -export default { - component: MyComponent, -}; - -export const ExampleStory = { - args: { - propertyA: process.env.STORYBOOK_DATA_KEY, - }, -}; -``` diff --git a/docs/snippets/vue/my-component-with-env-variables.ts-4-9.mdx b/docs/snippets/vue/my-component-with-env-variables.ts-4-9.mdx deleted file mode 100644 index 16f26529953c..000000000000 --- a/docs/snippets/vue/my-component-with-env-variables.ts-4-9.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// MyComponent.stories.ts - -// Replace vue3 with vue if you are using Storybook for Vue 2 -import type { Meta, StoryObj } from '@storybook/vue3'; - -import MyComponent from './YourPage.vue'; - -const meta = { - component: MyComponent, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const ExampleStory: Story = { - args: { - propertyA: process.env.STORYBOOK_DATA_KEY, - }, -}; -``` diff --git a/docs/snippets/vue/my-component-with-env-variables.ts.mdx b/docs/snippets/vue/my-component-with-env-variables.ts.mdx deleted file mode 100644 index bf79e1d92de9..000000000000 --- a/docs/snippets/vue/my-component-with-env-variables.ts.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```ts -// MyComponent.stories.ts - -// Replace vue3 with vue if you are using Storybook for Vue 2 -import type { Meta, StoryObj } from '@storybook/vue3'; - -import MyComponent from './YourPage.vue'; - -const meta: Meta = { - component: MyComponent, -}; - -export default meta; -type Story = StoryObj; - -export const ExampleStory: Story = { - args: { - propertyA: process.env.STORYBOOK_DATA_KEY, - }, -}; -``` diff --git a/docs/snippets/web-components/my-component-vite-env-variables.js.mdx b/docs/snippets/web-components/my-component-vite-env-variables.js.mdx new file mode 100644 index 000000000000..381d34ac9b89 --- /dev/null +++ b/docs/snippets/web-components/my-component-vite-env-variables.js.mdx @@ -0,0 +1,14 @@ +```js +// MyComponent.stories.js + +export default { + component: 'my-component', +}; + +export const ExampleStory = { + args: { + propertyA: import.meta.env.STORYBOOK_DATA_KEY, + propertyB: import.meta.env.VITE_CUSTOM_VAR, + }, +}; +``` diff --git a/docs/snippets/web-components/my-component-vite-env-variables.ts.mdx b/docs/snippets/web-components/my-component-vite-env-variables.ts.mdx new file mode 100644 index 000000000000..5a35c7a8ae24 --- /dev/null +++ b/docs/snippets/web-components/my-component-vite-env-variables.ts.mdx @@ -0,0 +1,19 @@ +```ts +// MyComponent.stories.ts + +import type { Meta, StoryObj } from '@storybook/web-components'; + +const meta: Meta = { + component: 'my-component', +}; + +export default meta; +type Story = StoryObj; + +export const ExampleStory: Story = { + args: { + propertyA: import.meta.env.STORYBOOK_DATA_KEY, + propertyB: import.meta.env.VITE_CUSTOM_VAR, + }, +}; +``` From d2711ed78df6976428579272327b34ca74918c01 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Tue, 25 Jul 2023 17:29:49 +0100 Subject: [PATCH 2/3] Adjusts pnpm snippets to prevent regression --- .../storybook-main-pnpm-with-module-resolution.js.mdx | 8 ++++---- .../storybook-main-pnpm-with-module-resolution.ts.mdx | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/snippets/common/storybook-main-pnpm-with-module-resolution.js.mdx b/docs/snippets/common/storybook-main-pnpm-with-module-resolution.js.mdx index 7b70439e066a..4ffa05ad3ff6 100644 --- a/docs/snippets/common/storybook-main-pnpm-with-module-resolution.js.mdx +++ b/docs/snippets/common/storybook-main-pnpm-with-module-resolution.js.mdx @@ -3,19 +3,19 @@ import path from 'path'; -const wrapForPnp = (packageName) => +const getAbsolutePath = (packageName) => path.dirname(require.resolve(path.join(packageName, 'package.json'))); export default { framework: { // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) - name: wrapForPnp('@storybook/your-framework'), + name: getAbsolutePath('@storybook/your-framework'), options: {}, }, stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], addons: [ - //πŸ‘‡ Use wrapForPnp when referencing Storybook's addons and frameworks - wrapForPnp('@storybook/addon-essentials'), + //πŸ‘‡ Use getAbsolutePath when referencing Storybook's addons and frameworks + getAbsolutePath('@storybook/addon-essentials'), ], }; ``` diff --git a/docs/snippets/common/storybook-main-pnpm-with-module-resolution.ts.mdx b/docs/snippets/common/storybook-main-pnpm-with-module-resolution.ts.mdx index 9dfedba3d0c1..a7e750975b3d 100644 --- a/docs/snippets/common/storybook-main-pnpm-with-module-resolution.ts.mdx +++ b/docs/snippets/common/storybook-main-pnpm-with-module-resolution.ts.mdx @@ -6,19 +6,19 @@ import type { StorybookConfig } from '@storybook/your-framework'; import path from 'path'; -const wrapForPnp = (packageName: string) => +const getAbsolutePath = (packageName: string): any => path.dirname(require.resolve(path.join(packageName, 'package.json'))); const config: StorybookConfig = { framework: { // Replace your-framework with the same one you've imported above. - name: wrapForPnp('@storybook/your-framework'), + name: getAbsolutePath('@storybook/your-framework'), options: {}, }, stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], addons: [ - //πŸ‘‡ Use wrapForPnp when referencing Storybook's addons and frameworks - wrapForPnp('@storybook/addon-essentials'), + //πŸ‘‡ Use getAbsolutePath when referencing Storybook's addons and frameworks + getAbsolutePath('@storybook/addon-essentials'), ], }; From 5dd7feff155c2263ec49c8f247f22ff0fa1c8db5 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Tue, 25 Jul 2023 20:18:39 +0100 Subject: [PATCH 3/3] Tweaks per feedback --- docs/configure/environment-variables.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/configure/environment-variables.md b/docs/configure/environment-variables.md index c471051c721e..4f32cac6c51b 100644 --- a/docs/configure/environment-variables.md +++ b/docs/configure/environment-variables.md @@ -82,7 +82,7 @@ Then you can access this environment variable anywhere, even within your stories #### With Vite -Out of the box, Storybook provides a [Vite builder](../builders/vite.md), so using environment variables here will be quite different from using environment variables in other frameworks that use other build tools. To access environment variables in Storybook (e.g., `STORYBOOK_`, `VITE_`), you can use the `import.meta.env`, which is specific to Vite. For example: +Out of the box, Storybook provides a [Vite builder](../builders/vite.md), which does not output Node.js globals like `process.env`. To access environment variables in Storybook (e.g., `STORYBOOK_`, `VITE_`), you can use `import.meta.env`. For example: @@ -162,4 +162,4 @@ The table below lists the available options: ### Environment variables are not working -If you're trying to use framework-specific environment variables (e.g.,`VUE_APP_`), you may run into issues primarily due to the fact that Storybook and your framework may have specific configurations and may not be able to recognize and use those environment variables. If you run into a similar situation and are interested in helping us improving support for this feature, we encourage you to reach out to the maintainers using the default communication channels (e.g., [Discord server](https://discord.com/channels/486522875931656193/570426522528382976), [GitHub issues](https://github.com/storybookjs/storybook/issues)). +If you're trying to use framework-specific environment variables (e.g.,`VUE_APP_`), you may run into issues primarily due to the fact that Storybook and your framework may have specific configurations and may not be able to recognize and use those environment variables. If you run into a similar situation, you may need to adjust your framework configuration to make sure that it can recognize and use those environment variables. For example, if you're working with a Vite-based framework, you can extend the configuration file and enable the [`envPrefix`](https://vitejs.dev/config/shared-options.html#envprefix) option. Other frameworks may require a similar approach.