Práctica: Configurar un proyecto Expo con variables de entorno

Tipo de lección: Video

Concepto clave

Las variables de entorno son valores externos a tu código que configuran cómo se comporta tu aplicación en diferentes entornos (desarrollo, staging, producción). Piensa en ellas como los ajustes de una máquina de café: la misma máquina puede preparar espresso o americano dependiendo de cómo configures los botones, sin necesidad de modificar su hardware interno.

En desarrollo con Expo, gestionar variables de entorno correctamente es crucial para separar configuraciones sensibles (como API keys, URLs de servidores, o flags de funcionalidad) de tu código fuente. Esto evita que información crítica se suba a repositorios públicos y permite que tu aplicación se adapte automáticamente al entorno donde se ejecuta, similar a cómo un traje se ajusta automáticamente al clima sin que tengas que cambiarlo manualmente.

Cómo funciona en la práctica

Expo maneja variables de entorno a través de archivos de configuración específicos para cada entorno. El proceso típico involucra:

1. Crear archivos .env.development, .env.staging, y .env.production en la raíz de tu proyecto
2. Instalar y configurar el paquete expo-constants para acceder a estas variables desde tu código JavaScript
3. Utilizar un sistema de build para inyectar las variables correctas según el entorno de compilación
4. Validar que las variables requeridas estén presentes antes de ejecutar la aplicación

Un ejemplo práctico: imagina que tu aplicación necesita conectarse a diferentes bases de datos. En desarrollo usas una local, en staging una de pruebas, y en producción la real. Con variables de entorno, solo cambias un valor en el archivo correspondiente y Expo se encarga del resto.

Código en acción

Configuración básica de variables de entorno en un proyecto Expo:

// app.json - Configuración de variables por entorno
{
  "expo": {
    "name": "MiApp",
    "slug": "miapp",
    "extra": {
      "apiUrl": "${API_URL}",
      "apiKey": "${API_KEY}",
      "debugMode": "${DEBUG_MODE}"
    }
  }
}

Acceso a las variables desde tu código:

// App.js - Uso de variables de entorno
import Constants from 'expo-constants';

const App = () => {
  // Acceso a todas las variables configuradas
  const { apiUrl, apiKey, debugMode } = Constants.expoConfig.extra;
  
  // Ejemplo de uso en una llamada API
  const fetchData = async () => {
    try {
      const response = await fetch(`${apiUrl}/data`, {
        headers: {
          'Authorization': `Bearer ${apiKey}`
        }
      });
      
      if (debugMode === 'true') {
        console.log('API Response:', response);
      }
      
      return response.json();
    } catch (error) {
      console.error('Fetch error:', error);
    }
  };
  
  return (
    // Tu componente aquí
  );
};

export default App;

Errores comunes

• Exponer claves secretas en el repositorio: Nunca subas archivos .env con información sensible a Git. Usa .gitignore y proporciona un archivo .env.example con la estructura pero sin valores reales.
• No validar variables requeridas: Si tu aplicación depende de ciertas variables, valida que existan al iniciar. Un patrón común es crear un módulo que verifique todas las variables necesarias y lance un error claro si faltan.
• Confiar en variables en tiempo de ejecución: En Expo, las variables de entorno se inyectan en tiempo de build, no en tiempo de ejecución. No puedes cambiarlas después de compilar la aplicación sin hacer un nuevo build.
• Usar el mismo valor para todos los entornos: Asegúrate de que variables como URLs de API o flags de debug tengan valores diferentes por entorno. Un error común es usar la URL de producción en desarrollo.
• No manejar fallbacks: Siempre proporciona valores por defecto para variables opcionales para evitar que tu aplicación falle silenciosamente.

Checklist de dominio

1. He configurado archivos .env separados para desarrollo, staging y producción
2. He agregado todos los archivos .env a .gitignore para evitar commits accidentales
3. He creado un archivo .env.example con la estructura de variables para el equipo
4. He configurado app.json para exponer las variables a través de expo-constants
5. He implementado validación de variables requeridas al iniciar la aplicación
6. He establecido valores por defecto para todas las variables opcionales
7. He probado que las variables cambian correctamente entre entornos al hacer builds diferentes

Configuración de un sistema de variables de entorno para una aplicación de comercio electrónico

En este ejercicio, configurarás un sistema completo de variables de entorno para una aplicación de comercio electrónico que necesita diferentes configuraciones para desarrollo, staging y producción.

1. Configuración inicial: Crea un nuevo proyecto Expo o usa uno existente. Instala expo-constants si no lo tienes: npx expo install expo-constants
2. Archivos de entorno: Crea tres archivos en la raíz de tu proyecto:
   • .env.development con: API_URL=http://localhost:3000, STRIPE_KEY=pk_test_xxx, DEBUG=true
   • .env.staging con: API_URL=https://staging-api.tienda.com, STRIPE_KEY=pk_test_yyy, DEBUG=true
   • .env.production con: API_URL=https://api.tienda.com, STRIPE_KEY=pk_live_zzz, DEBUG=false
3. Configuración de Expo: Modifica tu app.json para exponer estas variables en el objeto extra
4. Implementación: Crea un módulo config.js que:
   • Importe expo-constants
   • Extraiga y valide que las variables API_URL y STRIPE_KEY existan
   • Exporte un objeto con las variables validadas y valores por defecto para las opcionales
5. Uso en la aplicación: Implementa un componente que muestre en pantalla qué entorno está activo (basado en API_URL) y si el modo debug está activado
6. Pruebas: Ejecuta la aplicación con diferentes perfiles de build para verificar que las variables cambian correctamente

Pistas

• Recuerda que en Expo las variables se inyectan en tiempo de build, necesitarás hacer eject o usar eas build para probar diferentes entornos completamente
• Para validar variables, considera usar una función que lance un error descriptivo si una variable requerida está ausente o es inválida
• Puedes usar process.env.NODE_ENV en tus scripts de package.json para automatizar la selección del archivo .env correcto

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.