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.