runtime-env-vite-plugin

Name: runtime-env-vite-plugin
Availability: InStock
Author: runtime-env

Separate runtime environment variables from build-time configuration in Vite projects.

47|2|Updated Oct 30, 2023

Search Tags:#runtime #plugin #vite #type-safety #environment-variables #build-time

Ready to run

npx skills add https://github.com/runtime-env/runtime-env --skill runtime-env-vite-plugin

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: runtime-env-vite-plugin
Source: https://github.com/runtime-env/runtime-env/tree/main/skills/runtime-env-vite-plugin
Command: npx skills add https://github.com/runtime-env/runtime-env --skill runtime-env-vite-plugin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill guides Vite users to correctly separate runtime environment variables from build-time configuration, preventing misconfigurations and brittle code by leveraging the runtime-env plugin and typed schemas.

Core Features & Use Cases

Clear separation of runtime vs build-time variables using the runtime-env plugin.
Sequential workflows for setup, discovery, and migration to ensure safe adoption.
Works across Vite projects of varying sizes and supports automatic type generation after schema updates.

Quick Start

Install dev dependencies, update Vite config to include runtimeEnv(), add a .runtimeenvschema.json at the project root, and generate TypeScript typings with npx runtime-env gen-ts --output-file src/runtime-env.d.ts.

Frequently Asked Questions about runtime-env-vite-plugin

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I separate runtime environment variables from build-time config in Vite?▼

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.

How does schema-driven type generation work for Vite environment variables?▼

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.

Do I need to refactor my existing Vite project to use runtime-env?▼

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.

Why use a runtime-env plugin instead of standard Vite build-time environment variables?▼

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.

Can I generate TypeScript typings automatically after updating my runtime environment schema?▼

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.

What is the best way to configure runtime-env in a new Vite project?▼

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.