new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Storybook · Setup · all subjects

environment-variables

17 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

STORYBOOK_ prefixed environment variables access in preview code

Environment variables prefixed with `STORYBOOK_` are available in `process.env` when using Webpack, or in `import.meta.env` when using the Vite builder.

Setting environment variables from command line in Storybook

Environment variables can be set from the command line when running Storybook. For example: `STORYBOOK_THEME=red STORYBOOK_DATA_KEY=12345 npm run storybook`

Do not store secrets in Storybook environment variables

Do not store any secrets such as private API keys or other sensitive information in Storybook environment variables. Environment variables are embedded into the build, meaning anyone can view them by inspecting your files.

Using .env files with Storybook

Environment variables can be defined in a `.env` file in the project root. For example, adding `STORYBOOK_DATA_KEY=12345` to a `.env` file makes it accessible anywhere in stories and preview code.

Using .env.development and .env.production files

Specific `.env` files can be used for different modes: `.env.development` for development mode and `.env.production` for production mode, allowing different environment variable values for each mode.

Vite builder environment variable access

When using the Vite builder, Storybook does not output Node.js globals like `process.env`. To access environment variables such as `STORYBOOK_` or `VITE_` prefixed variables, use `import.meta.env` instead.

Environment variables in custom head/body using substitution

Environment variables can be used in custom `<head>` and `<body>` HTML using the substitution syntax `%STORYBOOK_X%`. For example, `%STORYBOOK_THEME%` will be replaced with the value of the `STORYBOOK_THEME` environment variable. When using these as JavaScript attributes or values, you may need to add quotes since the value is inserted directly, for example: `<link rel="stylesheet" href="%STORYBOOK_STYLE_URL%" />`.

Passing environment variables to build-storybook

Environment variables can be passed when building Storybook with the `build-storybook` command, and they will be hardcoded into the static version of your Storybook.

Defining custom variables in Storybook configuration file

Custom variables can be defined in the Storybook configuration file (`.storybook/main.js|.ts`) using a configuration field. These variables can then be accessed in stories similar to environment variables from `.env` files.

Setting browser for Storybook preview with BROWSER environment variable

The browser used to preview stories can be chosen using the `BROWSER` environment variable. Available options are: `BROWSER="safari"` for Safari, `BROWSER="firefox"` for Firefox, and `BROWSER="chromium"` for Chromium. By default, Storybook opens Chrome.

Passing additional arguments to browser with BROWSER_ARGS

Additional arguments can be passed to the browser using the `BROWSER_ARGS` environment variable. For example, `BROWSER_ARGS="--incognito"` opens Chrome in incognito mode. This only works if the `BROWSER` environment variable is also explicitly set.

Troubleshooting: process variable not detected in Webpack frameworks

If using a Webpack-based framework and encountering a runtime error such as `Can't find variable: process` when referencing Storybook prefixed environment variables, ensure they are configured via `.env` files, injected via command-line arguments, and include default values in the Storybook configuration.

Troubleshooting: framework-specific environment variables not working

Framework-specific environment variables (e.g., `VUE_APP_`) may not work because Storybook and the framework may have different configurations. For Vite-based frameworks, extend the configuration file and enable the `envPrefix` option. Other frameworks may require similar adjustments to recognize and use those environment variables.

Telemetry opt-out via environment variable

Set the `STORYBOOK_DISABLE_TELEMETRY` environment variable to disable telemetry collection. This method is recommended if you want to prevent the initial `boot` event that occurs before the configuration file is evaluated.

Debug telemetry collection

Set the `STORYBOOK_TELEMETRY_DEBUG` environment variable to `1` to print out all information being collected by telemetry, allowing you to verify what data is being gathered.

Enable crash reports via environment variable

Set the `STORYBOOK_ENABLE_CRASH_REPORTS` environment variable to `1` to enable crash reporting.

Yarn v2 and v3 module resolution issues

Yarn v2 and v3 have different package resolution rules than Yarn v1.x. If you encounter errors like 'Can't resolve css-loader' or 'Can't resolve style-loader', install these packages directly as they are not being resolved properly.

Give your agent this brain