fix: make env var STORYBOOK public (fix #1724)

vikejs · Jul 2, 2024 · 51d612a · 51d612a
1 parent 97012a0
commit 51d612a
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/docs/pages/env/+Page.mdx b/docs/pages/env/+Page.mdx
@@ -1,4 +1,4 @@
-import { RepoLink, ImportMeta, Warning } from '@brillout/docpress'
+import { RepoLink, ImportMeta, Warning, Contribution } from '@brillout/docpress'
 
 Environment variables can be defined in `.env` and `.env.[mode]` files.
 
@@ -52,3 +52,19 @@ function data() {
      - Consider defining secrets with system environment variables (e.g. [`$ export DATABASE_PASSWORD=some-secret-password`](https://askubuntu.com/questions/730/how-do-i-set-environment-variables/731#731)).
      - Consider [defining secrets with `.env.local` files](https://vitejs.dev/guide/env-and-mode.html#env-files:~:text=.env.*.local%20files%20are%20local%2Donly) while adding `*.local` to your `.gitignore`.
 </Warning>
+
+
+## Public whitelist
+
+The following environment variables can be accessed from the client-side without having to prefix them with `PUBLIC_ENV__`:
+
+- `STORYBOOK`
+
+<Contribution>
+  Contribution welcome to [add further environment variables to the whitelist](https://github.com/vikejs/vike/blob/main/vike/node/plugin/plugins/envVars.ts).
+</Contribution>
+
+
+## See also
+
+- [#1726 Improve environment variables support](https://github.com/vikejs/vike/issues/1726)
diff --git a/vike/node/plugin/plugins/envVars.ts b/vike/node/plugin/plugins/envVars.ts
@@ -9,6 +9,12 @@ import { assert, assertPosixPath, assertUsage, assertWarning, escapeRegex, isArr
 import { sourceMapPassthrough } from '../shared/rollupSourceMap.js'
 import { getModuleFilePath } from '../shared/getFilePath.js'
 
+const PUBLIC_ENV_PREFIX = 'PUBLIC_ENV__'
+const PUBLIC_ENV_WHITELIST = [
+  // https://github.com/vikejs/vike/issues/1724
+  'STORYBOOK'
+]
+
 function envVarsPlugin(): Plugin {
   let envsAll: Record<string, string>
   let config: ResolvedConfig
@@ -42,13 +48,12 @@ function envVarsPlugin(): Plugin {
           // Security check
           {
             const envStatement = getEnvStatement(envName)
-            const publicPrefix = 'PUBLIC_ENV__'
-            const isPrivate = !envName.startsWith(publicPrefix)
+            const isPrivate = !envName.startsWith(PUBLIC_ENV_PREFIX) && !PUBLIC_ENV_WHITELIST.includes(envName)
             if (isPrivate && isClientSide) {
               if (!code.includes(envStatement)) return
               const modulePath = getModuleFilePath(id, config)
               const errMsgAddendum: string = isBuild ? '' : ' (Vike will prevent your app from building for production)'
-              const keyPublic = `${publicPrefix}${envName}` as const
+              const keyPublic = `${PUBLIC_ENV_PREFIX}${envName}` as const
               const errMsg =
                 `${envStatement} is used in client-side file ${modulePath} which means that the environment variable ${envName} will be included in client-side bundles and, therefore, ${envName} will be publicly exposed which can be a security leak${errMsgAddendum}. Use ${envStatement} only in server-side files, or rename ${envName} to ${keyPublic}, see https://vike.dev/env` as const
               if (isBuild) {