cover

¿Cómo cargar variables de entorno .env en Vite?

author photo

Héctorbliss

@hectorbliss

Podemos configurar Vite para que cargue todas las variables de entorno como usualmente. ✅

Vite no carga el archivo .env en automático, Vite evalúa primero la configuración, pues hay opciones que pueden afectar el comportamiento de la carga como root y envDir. ⚙️

Pero tenemos a la mano una herramienta (helper) que nos permite cargar archivos .env específicos:

import { defineConfig, loadEnv } from 'vite' export default defineConfig(({ command, mode }) => { // Se carga el archivo env usando `mode` en el directorio actual. // Al colocar el tercer parámetro como '' se cargarán todos los archivos env aunque no tengan el prefijo `VITE_` const env = loadEnv(mode, process.cwd(), '') // '' es el hack 😉 return { // vite config define: { __DATABASE_URL__: JSON.stringify(env.DATABASE_URL), }, } })

De esta forma cargamos variables de entorno en el más alto nivel.

Espero sea útil. Abrazo. Bliss. 🤓

Enlaces relacionados

process.cwd()

meta cover

Está bien ser un principiante, de hecho, ¡es genial!, te digo por qué.

Checa este otro Post

meta cover

2 maneras muy simples de mejorar tus entrevistas de trabajo.

Checa este otro Post

¡Nuevo curso!

Animaciones web con React + Motion 🧙🏻