SocraTips – Guía sobre el uso de variables de entorno en Vite por SocraTech

En este tutorial aprenderás cómo usar variables de entorno en Vite, un bundler de JavaScript moderno y rápido. Las variables de entorno son útiles cuando quieres configurar tu aplicación de una manera flexible, sin tener que cambiar tu código fuente cada vez que necesitas modificar alguna configuración específica para cada entorno.

Vite es un bundler que utiliza esencialmente el soporte de módulos de JavaScript para la carga de dependencias, lo que hace que sea extremadamente rápido y ligero. Soporta tanto JavaScript como TypeScript, y añade soporte para diferentes entornos de desarrollo.

Para empezar a utilizar variables de entorno en Vite, sigue estos pasos:

Paso 1: Instala Vite
Lo primero que necesitas hacer es instalar Vite en tu proyecto. Puedes hacerlo a través de npm o yarn. Ejecuta alguno de los siguientes comandos en tu terminal:

npm install vite –save-dev
o

yarn add vite –dev

Paso 2: Crear un archivo .env
Crea un nuevo archivo llamado .env en la raíz de tu proyecto. En este archivo, puedes definir tus variables de entorno en el formato clave=valor. Por ejemplo:

API_URL=https://api.miservicio.com
API_KEY=123456789

Paso 3: Configurar Vite para cargar las variables de entorno
Vite tiene soporte nativo para cargar variables de entorno desde un archivo .env. Para hacerlo, necesitas agregar un plugin a tu configuración de Vite.

Crea un archivo vite.config.js en la raíz de tu proyecto si no lo tienes ya, y agrega el siguiente código:

import { defineConfig } from 'vite'
import dotenv from 'dotenv'

export default defineConfig({
  plugins: [
    {
      name: 'load-env',
      config: () => {
        return {
          env: dotenv.config().parsed
        }
      }
    }
  ]
})

Este código importa el módulo dotenv para cargar las variables de entorno desde el archivo .env, y las pone a disposición en tu configuración de Vite a través de la propiedad env.

Paso 4: Acceder a las variables de entorno en tu código
Ahora que has configurado Vite para cargar las variables de entorno, puedes acceder a ellas en tu código JavaScript o TypeScript. Por ejemplo, si quieres acceder a la variable API_URL en tu código, puedes hacerlo de la siguiente manera:

console.log(import.meta.env.API_URL)

Esto imprimirá en la consola el valor de la variable API_URL que definiste en tu archivo .env.

¡Y eso es todo! Ahora sabes cómo usar variables de entorno en Vite para configurar tu aplicación de una manera más flexible y adaptativa a diferentes entornos. ¡Espero que este tutorial te haya sido útil! Si tienes alguna pregunta o sugerencia, no dudes en dejar un comentario. ¡Gracias por leer!