En el desarrollo web moderno, es esencial administrar datos confidenciales, como claves API, credenciales de bases de datos y diversas configuraciones para diferentes entornos. Almacenar estas variables directamente en el código puede plantear riesgos de seguridad y complicar la implementación. Vite, una moderna herramienta de compilación de front-end, proporciona una manera sencilla de administrar variables de entorno a través de archivos .env.

¿Qué es un archivo .env?

Un archivo .env es un archivo de configuración simple que se utiliza para definir variables específicas del entorno. Se puede acceder a estas variables dentro de su aplicación mientras permanecen separadas del código fuente. Esta práctica permite una fácil gestión de diferentes entornos (desarrollo, puesta en escena y producción) sin codificar datos confidenciales.

Variables de entorno en Vite:

Vite viene con soporte integrado para variables de entorno, lo que facilita la inyección de diferentes valores según el entorno actual. Así es como Vite maneja las variables de entorno:

Variables globales: Vite inyecta variables de entorno en el momento de la compilación.
Variables con prefijo: Solo las variables con el prefijo VITE_ están expuestas al código JavaScript del lado del cliente por razones de seguridad. Cualquier variable que no tenga este prefijo no será accesible en el navegador.

Ejemplo de una variable de entorno de Vite:

VITE_API_URL=https://api.example.com

Configuración de archivos .env en Vite
Vite admite múltiples archivos .env, lo que le permite definir variables de entorno para entornos específicos. Esta es una configuración típica:

.env: archivo predeterminado para variables de entorno compartido en todos los entornos.
.env.development: Variables específicas del entorno de desarrollo.
.env.production: Variables específicas del entorno de producción.

Ejemplo de archivo .env:

VITE_API_URL=https://api.example.com
VITE_APP_NAME=MyViteApp

Ejemplo de archivo .env.development:

VITE_API_URL=http://localhost:3000
VITE_DEBUG_MODE=true

Ejemplo de archivo .env.production:

VITE_API_URL=https://api.production.com
VITE_DEBUG_MODE=false

Acceso a variables de entorno en Vite

Para acceder a las variables de entorno dentro de su proyecto Vite, utilice el objeto import.meta.env.

console.log(import.meta.env.VITE_API_URL); // Outputs the value of VITE_API_URL

Vite reemplaza automáticamente los valores de import.meta.env durante el proceso de compilación según el entorno actual.

Administración de múltiples entornos:

Los archivos .env de Vite se pueden personalizar para diferentes entornos como desarrollo, puesta en escena y producción. Dependiendo del entorno en el que te encuentres, Vite cargará el archivo .env apropiado:

Al ejecutar vite se carga el archivo .env.development.
Al ejecutar vite build se carga el archivo .env.production.
Ejecutando en un entorno específico:

vite --mode staging

Variables de entorno de depuración:

Si tienes problemas con las variables de entorno que no funcionan como se esperaba, verifica lo siguiente:

• Prefijo de variable: asegúrese de que todas las variables del lado del cliente tengan el prefijo VITE_, ya que Vite ignora las variables sin este prefijo.
• Orden de carga de entornos: asegúrese de que los archivos .env y específicos del entorno estén en la raíz del proyecto y tengan el nombre correcto.
• Verificar el proceso de compilación: use console.log(import.meta.env) para ver todas las variables de entorno disponibles durante el desarrollo.

Conclusión::

El soporte integrado de Vite para variables de entorno a través de archivos .env facilita la gestión de configuraciones en diferentes entornos.