runtime-env-vite-plugin

To separate runtime environment variables in Vite, install the runtime-env plugin, add runtimeEnv() to your Vite config, and define a .runtimeenvschema.json file at the project root to distinguish runtime from build-time configuration.

Schema-driven type generation works by running npx runtime-env gen-ts --output-file src/runtime-env.d.ts, which reads your .runtimeenvschema.json file to produce TypeScript typings that ensure type safety for runtime environment variables.

You can refactor existing Vite projects by following a structured migration workflow that uses sequential steps for setup and discovery, allowing safe adoption of the runtime-env plugin across projects of varying sizes without requiring an immediate full rewrite.

Using the runtime-env plugin instead of standard Vite build-time environment variables prevents brittle code and misconfigurations by leveraging typed schemas and HTML startup scripts to safely inject variables at runtime rather than embedding them during the build.

Yes, you can generate TypeScript typings automatically after updating your runtime environment schema by executing npx runtime-env gen-ts, which outputs a declaration file to maintain type safety for your environment variables.

The best way to configure runtime-env in a new Vite project is to install dev dependencies, update the Vite configuration to include runtimeEnv(), add a .runtimeenvschema.json at the project root, and generate TypeScript typings with npx runtime-env gen-ts.