Variables de Entorno
Las variables de entorno te permiten configurar tu frontend sin hardcodear valores en el código. Úsalas para URLs de API, claves públicas (Stripe publishable, Google Maps, etc.), feature flags y cualquier cosa que cambie entre proyectos o entornos.
Las variables del cliente son públicas
Las env vars del frontend se incluyen en tu build y se envían al navegador. Nunca pongas secretos aquí — ni claves privadas de API, ni credenciales de base de datos, ni secretos JWT. Para secretos usa credenciales del backend en tus endpoints.
Añadir variables
Abre la pestaña Variables de Entorno
En el dashboard de tu proyecto ve a Frontend → Variables de Entorno.
Añade pares clave-valor
Haz clic en Añadir variable. Introduce la clave (por ejemplo VITE_STRIPE_KEY) y el valor. La mayoría de frameworks requieren un prefijo específico — consulta la tabla de abajo.
Redespliega
Las env vars se integran en tiempo de build. Haz clic en Redeploy (o lanza un nuevo deploy desde tu IDE) para aplicar los cambios.
Prefijo requerido por framework
Tu framework solo expone al navegador las env vars con un prefijo concreto. Esto evita filtrar accidentalmente variables del backend.
| Parameter | Type | Description |
|---|---|---|
Vite / Vue / SvelteKit | VITE_* | Se acceden como import.meta.env.VITE_MI_CLAVE en tu código |
Create React App | REACT_APP_* | Se acceden como process.env.REACT_APP_MI_CLAVE |
Next.js (cliente) | NEXT_PUBLIC_* | Se acceden como process.env.NEXT_PUBLIC_MI_CLAVE |
Astro | PUBLIC_* | Se acceden como import.meta.env.PUBLIC_MI_CLAVE |
Las variables sin el prefijo correcto no se incluyen en el build — serán undefined en el navegador.
Variables automáticas
DYPAI configura algunas variables por ti automáticamente. No hace falta añadirlas manualmente:
| Variable | Valor |
|---|---|
VITE_DYPAI_URL | La URL base de la API de tu proyecto |
VITE_DYPAI_PROJECT_ID | El UUID de tu proyecto |
El @dypai-ai/client-sdk las lee automáticamente cuando llamas a createClient().
Configuración típica
# Endpoints de API y claves públicas
VITE_STRIPE_PUBLISHABLE_KEY=pk_live_...
VITE_GOOGLE_MAPS_KEY=AIza...
VITE_POSTHOG_KEY=phc_...
# Feature flags
VITE_ENABLE_BETA_DASHBOARD=true
# URLs de terceros
VITE_SUPPORT_URL=https://help.tuapp.com
Luego en tu código:
const stripeKey = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY
const mapsKey = import.meta.env.VITE_GOOGLE_MAPS_KEY
Editar o eliminar variables
- Editar: Haz clic en el icono de lápiz junto a la variable, cambia el valor, guarda. Redespliega para aplicar.
- Eliminar: Haz clic en el icono de papelera. La variable se elimina en el siguiente deploy.
Límites
- Hasta 50 variables de entorno por proyecto
- Las claves deben ser
UPPER_SNAKE_CASE - Los valores se guardan cifrados en reposo pero se exponen en el bundle del cliente en tiempo de build
Dónde NO usar env vars
| Tipo de valor | Guárdalo en… |
|---|---|
| Clave pública de API (Stripe pk_, Google Maps, PostHog) | ✅ Env var del frontend |
| URL base de API | ✅ Env var del frontend |
| Feature flag | ✅ Env var del frontend |
| Clave secreta de Stripe (sk_) | ❌ Credenciales del backend |
| Contraseña de base de datos | ❌ Nunca la necesitas — DYPAI se encarga |
| Clave de API de OpenAI | ❌ Credenciales del backend (usadas por los nodos Agent) |
| Secreto de firma JWT | ❌ Nunca lo necesitas — DYPAI se encarga |