Configurar variables de entorno en React utilizando Vite

Introducción

En algunas ocasiones, necesitamos utilizar variables de entorno en nuestras aplicaciones para centralizar valores y evitar escribir esos valores directamente en nuestro código. Esto nos proporciona un acceso sencillo y una forma fácil de modificar esos valores sin tener que hacerlo en todos los lugares donde se usan.

Archivo .env

Vite utiliza dotenv en segundo plano para el manejo de las variables de entorno. Por lo tanto, es necesario escribirlas en el archivo .env para que puedan ser servidas.

Utilizar las variables de entorno

Para utilizar las variables de entorno en el cliente, es necesario utilizar el objeto import.meta.env seguido de la variable que se desea utilizar. Es importante tener en cuenta que solo se pueden utilizar las variables que tengan el prefijo VITE_ en el código procesado por Vite que llega al cliente.

VITE_NAME=Tomás
NAME=Tomás

Únicamente VITE_NAME podrá ser usado en él código fuente del cliente.

console.log(import.meta.env.VITE_NAME); // Tomás
console.log(import.meta.env.NAME); // undefined

Optimizar la forma de obtener nuestras variables

En la hipotética situación en la que sea necesario utilizar varias variables de entorno, o incluso la misma variable, en un mismo archivo, puede resultar molesto tener que instanciar import.meta.env varias veces, como en el siguiente ejemplo:

VITE_NAME=Tomás
VITE_LASTNAME=Cuevas
VITE_SECRET_PASSWORD=ABC123

App.jsx

export const App = () => {
  return (
    <div>
      <p>
        user: {import.meta.env.VITE_NAME} {import.meta.env.VITE_LASTNAME}
      </p>
      <p>password: {import.meta.env.VITE_SECRET_PASSWORD}</p>
    </div>
  );
};

Podríamos crear una función que nos devuelva todas las variables de entorno que configuremos en un solo lugar. Esto nos ahorraría tener que escribir import.meta.env repetidamente en toda nuestra aplicación. En su lugar, simplemente llamaríamos a la función para obtener la variable que necesitamos.

La función que cumpliría esta tarea podría tener el siguiente aspecto:

getEnvironments.js

export const getEnvironments = () => {
  return {
    name: import.meta.env.VITE_NAME,
    lastname: import.meta.env.VITE_LASTNAME,
    secret_password: import.meta.env.SECRET_PASSWORD,
  };
};

Y en nuestro componente, podríamos obtener las variables que esta exporte de las siguientes formas:

Ejecutando la funcion donde queramos utilizar una variable de entorno

App.jsx

import { getEnvironments } from "./helpers/getEnvironments";

export const App = () => {
  return (
    <div>
      <p>
        user: {getEnvironments().name} {getEnvironments().lastname}
      </p>
      <p>password: {getEnvironments().secret_password}</p>
    </div>
  );
};

En este caso, se importa la función getEnvironments en el archivo donde se encuentra nuestro componente y luego se llama a esta función, utilizando la notación de punto para acceder a la variable que se desea utilizar.

Es importante señalar que esta forma de importar no es tan eficiente, ya que simplemente se está reemplazando import.meta.env por getEnvironments. Por esta razón, se recomienda considerar la siguiente alternativa, que en mi opinión resulta más óptima.

Desestructuración de variables de entorno

App.jsx

import { getEnvironments } from "./helpers/getEnvironments";

export const App = () => {
  const { lastname, name, secret_password } = getEnvironments();

  return (
    <div>
      <p>
        user: {name} {lastname}
      </p>
      <p>password: {secret_password}</p>
    </div>
  );
};

Primero importamos la función y luego aplicamos la técnica de desestructuración para obtener únicamente las variables que necesitamos utilizar. De esta forma, evitamos tener que llamar la función cada vez que queremos obtener una variable, así como también reducimos la cantidad de veces que necesitamos escribir import.meta.env.

Conclusión

En resumen, configurar variables de entorno en React utilizando Vite nos brinda una forma sencilla y eficiente de centralizar valores y evitar escribirlos directamente en el código. Esto nos permite acceder y modificar fácilmente esos valores sin tener que buscarlos en todos los lugares donde se utilizan.

Al utilizar el objeto import.meta.env y crear funciones o aplicar la desestructuración, podemos optimizar la forma de obtener y utilizar estas variables. En definitiva, el uso de variables de entorno en React con Vite mejora la configuración, la seguridad y la legibilidad de nuestro código.