runtime-env-vite-plugin

This skill ensures that environment variables are handled correctly in Vite projects by distinguishing between build-time (static) variables and runtime (dynamic) variables.

When to apply

Reference these guidelines when:

• Setting up a Vite project that requires environment variables.
• Writing code that accesses environment variables in a Vite project.
• Configuring index.html that uses environment variables.
• Refactoring existing Vite projects to properly use runtime environment variables.
• Reviewing code for proper environment variable usage in Vite projects.
• Optimizing CI/CD pipelines

Overview

Use this skill when working on a Vite-based project that uses @runtime-env/vite-plugin. It provides guidance on configuration, usage in code, and usage in index.html.

Rules

• Setup runtime-env plugin: How to configure Vite, index.html, and the schema.
• Use runtime public env in JS/TS: How to access dynamic variables in your code.
• Use runtime public env in index.html: How to use interpolation in your HTML.
• Add new environment variables: How to add new variables with proper types and validation.