cover

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


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

Efectos secundarios con useEffect

Checa este otro Post

meta cover

Cómo Publicar tu proyecto Vite en Github Pages con el método más fácil

Checa este otro Post

¡Nuevo curso!

Animaciones web con React + Motion 🧙🏻