Appearance

Return to top

Archivo .env

Este archivo es crucial para la gestión de las variables de entorno de tu aplicación. Contiene configuraciones que pueden variar entre los diferentes entornos (desarrollo, producción, testing) sin necesidad de modificar el código fuente.

  • Descripción: .env es un archivo de texto plano utilizado para almacenar variables de entorno específicas del proyecto. En un proyecto Vite, las variables que comienzan con VITE_ son expuestas al código del cliente (frontend) a través de import.meta.env.
  • Propósito:
    • Configuración por Entorno: Permite definir valores (como URLs de API, claves de servicios externos, etc.) que cambian dependiendo de si la aplicación está en desarrollo local, staging o producción, sin tener que modificar el código directamente.
    • Seguridad (para claves públicas): Aunque se debe tener cuidado, es el lugar habitual para almacenar variables públicas que son necesarias en el frontend. ¡Importante!: Las claves sensibles (secretos de API, credenciales de base de datos) NUNCA deben ir en archivos .env expuestos al frontend. Para el frontend, Vite solo expone variables que comienzan con VITE_ y las incrusta en el bundle de cliente.
    • Facilitar el Desarrollo: Simplifica la configuración para otros desarrolladores del equipo, ya que solo necesitan copiar el .env.example y rellenar sus valores locales.
  • Contenido Clave:
    • VITE_API_BASE_URL=http://localhost:3000: Esta línea define la URL base de tu API backend para el entorno de desarrollo local. Vite la hace accesible en tu código React a través de import.meta.env.VITE_API_BASE_URL. Durante el proceso de build de producción, este valor puede ser sobrescrito por variables de entorno del servidor de CI/CD.
  • Rol en el Proyecto: .env es fundamental para la flexibilidad y la adaptabilidad de tu aplicación a diferentes entornos. Permite gestionar configuraciones externas de manera eficiente y segura (para variables no secretas), facilitando tanto el desarrollo como el despliegue.
bash
# .env

# Variable de entorno para la URL base de la API.
# Las variables que comienzan con VITE_ son expuestas al código del cliente (frontend).
VITE_API_BASE_URL=http://localhost:3000