Saltar al contenido principal

Configuración Avanzada

Opciones de configuración técnica para tu sitio en Deployalo Sites.

Variables de Entorno​

Las variables de entorno te permiten configurar valores que se usan durante el proceso de build de tu aplicación. Son útiles para:

  • API Keys: Claves de acceso a servicios externos (Stripe, Firebase, etc.)
  • URLs de backends: Direcciones de APIs que tu frontend consume
  • Configuración de ambiente: Variables como NODE_ENV o VITE_API_URL

Cómo Agregar Variables​

  1. Ve a la pestaña Avanzado en el detalle de tu sitio
  2. En la sección "Variables de entorno", escribe el nombre y valor
  3. Click en el botón + para agregar
  4. Click en Guardar y reconstruir para aplicar los cambios

Formato de Variables​

  • Los nombres deben estar en MAYÚSCULAS
  • Solo pueden contener letras, números y guiones bajos (_)
  • Ejemplos válidos: VITE_API_URL, REACT_APP_KEY, API_TOKEN

Variables por Framework​

Cada framework tiene su propio prefijo para exponer variables al cliente:

FrameworkPrefijoEjemplo
ViteVITE_VITE_API_URL
Create React AppREACT_APP_REACT_APP_API_KEY
Next.jsNEXT_PUBLIC_NEXT_PUBLIC_BACKEND_URL
Vue CLIVUE_APP_VUE_APP_API_URL
Nuxt-Usa runtimeConfig en nuxt.config.js
AstroPUBLIC_PUBLIC_API_URL
Importante

Las variables sin prefijo solo están disponibles durante el build (server-side). Para acceder a ellas desde el navegador, usa el prefijo de tu framework.

Ejemplo: Configurar API URL en Vite​

# Nombre de variable
VITE_API_URL

# Valor
https://api.miempresa.com

Luego en tu código:

const apiUrl = import.meta.env.VITE_API_URL;
fetch(`${apiUrl}/users`);

Ejemplo: Configurar Firebase en React​

# Variables
REACT_APP_FIREBASE_API_KEY=AIzaSy...
REACT_APP_FIREBASE_AUTH_DOMAIN=miapp.firebaseapp.com
REACT_APP_FIREBASE_PROJECT_ID=miapp

En tu código:

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
};

Zona de Peligro​

En la parte inferior de la pestaña Avanzado encontrarás opciones que requieren confirmación:

Eliminar Sitio​

Esta acción:

  • Elimina permanentemente todos los archivos del sitio
  • Libera el subdominio para que otros puedan usarlo
  • Desconecta cualquier dominio personalizado
  • No se puede deshacer

Para confirmar, debes escribir el nombre exacto del sitio.

Troubleshooting​

Mis variables no funcionan​

  1. Verifica el prefijo: Asegúrate de usar el prefijo correcto para tu framework
  2. Reconstruye el sitio: Después de cambiar variables, haz click en "Guardar y reconstruir"
  3. Limpia cache: Prueba en modo incógnito o limpia el cache del navegador

Error al guardar variables​

  1. Caracteres inválidos: El nombre solo puede contener A-Z, 0-9 y _
  2. Nombre duplicado: No puedes tener dos variables con el mismo nombre
  3. Conexión: Verifica tu conexión a internet e intenta de nuevo

El build falla después de agregar variables​

  1. Revisa el valor: Algunos valores con caracteres especiales pueden causar problemas
  2. Comillas: No incluyas comillas en los valores, se agregan automáticamente
  3. Espacios: Evita espacios al inicio o final del valor