CÓMO USAR VARIABLES DE ENTORNO EN VANILLAJS

October 16, 2025

Introducción a las variables de entorno en JavaScript

Las variables de entorno son un componente esencial en el desarrollo de aplicaciones modernas, ya que permiten configurar el comportamiento de un software en diferentes contextos, como entornos de desarrollo y producción. En este tutorial, exploraremos cómo utilizar variables de entorno en VanillaJS, un enfoque que puede parecer desafiante debido a las limitaciones del JavaScript del lado del cliente. Además, aprenderás a integrar claves API de forma segura en aplicaciones web utilizando herramientas como Netlify para la implementación. Este artículo está diseñado para desarrolladores que buscan gestionar configuraciones sensibles, como claves API, sin comprometer la seguridad ni la funcionalidad de sus proyectos.

Las variables de entorno son comunes en frameworks como React o Vue, así como en entornos de servidor como Node.js. Sin embargo, en VanillaJS, que se ejecuta principalmente en el navegador, el acceso a estas variables no es directo, ya que no se dispone del objeto global process.env proporcionado por Node.js. A lo largo de este tutorial, abordaremos cómo superar estas limitaciones y cómo configurar un flujo de trabajo eficiente para manejar claves API en proyectos VanillaJS, con un enfoque especial en la integración con Netlify.

¿Qué son las variables de entorno?

Las variables de entorno son valores configurables que permiten definir el comportamiento de una aplicación en función del entorno en el que se ejecuta. Por ejemplo, una aplicación puede comportarse de manera diferente en desarrollo (donde se prioriza la depuración) y en producción (donde la seguridad es crítica). Estas variables suelen almacenar información sensible, como claves API, que se utilizan para autenticar solicitudes a servicios externos.

En un escenario típico, al realizar una solicitud a una API, es necesario incluir una clave de autorización en el encabezado de la solicitud. A continuación, se muestra un ejemplo de una solicitud fetch que incluye un encabezado de autorización con una clave API:

const realizarLlamadaApi = () => {
    fetch("https://api.ejemplo.com/datos", {
        headers: {
            Authorization: `Bearer ${claveApiPrivada}`,
        },
    })
        .then((res) => res.json())
        .then((data) => console.log(data))
        .catch((err) => console.error(JSON.stringify(err)));
};

En este caso, claveApiPrivada es una variable que contiene la clave API, la cual debe mantenerse segura y no exponerse en el código fuente público. Las variables de entorno permiten almacenar estas claves de forma segura, evitando que se incluyan directamente en el código.

Creación de un archivo .env

Para gestionar variables de entorno, el primer paso es crear un archivo .env en la raíz del proyecto. Este archivo contendrá las claves y configuraciones sensibles que no deben ser expuestas. Un ejemplo de un archivo .env podría verse así:

API_KEY=abc123xyz789
TOPIC_ID=def456uvw012

El archivo .env debe incluirse en el archivo .gitignore para evitar que se suba al repositorio de control de versiones, como GitHub. Esto garantiza que las claves sensibles no queden expuestas en el repositorio público. Un ejemplo de un archivo .gitignore sería:

node_modules/
.env

En entornos como Node.js, el acceso a las variables definidas en el archivo .env se realiza mediante el objeto process.env. Por ejemplo:

console.log(process.env.API_KEY); // Imprime: abc123xyz789

Sin embargo, en VanillaJS en el navegador, este enfoque no es viable directamente, ya que el navegador no tiene acceso al objeto process.env. Esto plantea un desafío para los desarrolladores que trabajan en aplicaciones del lado del cliente.

Limitaciones de VanillaJS con variables de entorno

En VanillaJS, que se ejecuta en el navegador, no se puede acceder al objeto process.env porque este es exclusivo de entornos Node.js. Esto significa que las variables definidas en un archivo .env no están disponibles de forma nativa en el lado del cliente. Una solución común para trabajar con variables de entorno en Node.js es utilizar el paquete dotenv, que carga las variables del archivo .env en el objeto process.env. Sin embargo, intentar usar dotenv en el navegador genera un error, ya que el método require no está definido en el entorno del cliente.

Por ejemplo, el siguiente código fallaría en un entorno de navegador:

require("dotenv").config();

const realizarLlamadaApi = () => {
    fetch("https://api.ejemplo.com/datos", {
        headers: {
            Authorization: `Bearer ${process.env.API_KEY}`,
        },
    })
        .then((res) => res.json())
        .then((data) => console.log(data))
        .catch((err) => console.error(JSON.stringify(err)));
};

El error ocurre porque require es una función de Node.js, no del navegador. Una solución alternativa sería usar RequireJS para habilitar require en el navegador, pero esto añade complejidad innecesaria al proyecto, especialmente para aplicaciones pequeñas o experimentales.

¿Por qué usar variables de entorno en VanillaJS?

A pesar de las limitaciones, hay escenarios en los que las variables de entorno son esenciales, incluso en VanillaJS. Por ejemplo, al trabajar con APIs como la de GitHub o Twitter, que requieren claves de acceso para autenticar solicitudes. Estas claves no deben incluirse directamente en el código fuente, ya que hacerlo podría exponerlas si el código se sube a un repositorio público.

Por ejemplo, la API GraphQL de GitHub requiere un token de acceso personal para realizar solicitudes. Este token tiene limitaciones, como un máximo de 5000 solicitudes por hora, y debe manejarse con cuidado. Si el token se incluye directamente en el código y se sube a GitHub, el servicio detectará la clave y la invalidará por motivos de seguridad. Esto provoca que la aplicación funcione correctamente en desarrollo, pero falle en producción, especialmente al implementar en plataformas como Netlify.

Solución: Integración con Netlify

Netlify ofrece una solución práctica para manejar claves API en aplicaciones VanillaJS al permitir inyectar variables de entorno durante el proceso de construcción. En la configuración de construcción y despliegue de Netlify, puedes definir un comando de construcción personalizado que genera un archivo de configuración con las claves necesarias. Esto evita exponer las claves en el repositorio y permite que Netlify las utilice en producción.

Configuración del comando de construcción en Netlify

En el panel de administración de Netlify, en la sección de “Build & Deploy”, puedes especificar un comando de construcción. Por ejemplo, para inyectar una clave API en un archivo config.js, puedes usar el siguiente comando:

echo -e "const TOKEN = 'abc123xyz789';\n\nexport default TOKEN;" > config.js

Este comando crea un archivo config.js en la raíz del proyecto durante el proceso de construcción. Si las fuentes JavaScript están en una carpeta específica, como js, el comando sería:

cd js && echo -e "const TOKEN = 'abc123xyz789';\n\nexport default TOKEN;" > config.js

El archivo generado config.js tendría el siguiente contenido:

const TOKEN = "abc123xyz789";

export default TOKEN;

Uso del archivo de configuración en el código

Para utilizar el token en tu aplicación VanillaJS, importa el archivo config.js utilizando la sintaxis de módulos ES6. Asegúrate de que el archivo HTML que incluye el script tenga el atributo type="module":

<script src="./index.js" type="module"></script>

En el archivo index.js, puedes importar y usar el token de la siguiente manera:

import TOKEN from "./config.js";

const realizarLlamadaApi = () => {
    fetch("https://api.github.com/graphql", {
        headers: {
            Authorization: `Bearer ${TOKEN}`,
        },
    })
        .then((res) => res.json())
        .then((data) => console.log(data))
        .catch((err) => console.error(JSON.stringify(err)));
};

Este enfoque asegura que el token esté disponible en producción sin exponerlo en el repositorio.

Mejores prácticas para la seguridad

Aunque el método anterior permite usar claves API en VanillaJS, no es completamente seguro, ya que el archivo config.js generado estará disponible en el navegador, y cualquier usuario con acceso a las herramientas de desarrollo del navegador podría verlo. Por lo tanto, este enfoque es adecuado solo para APIs públicas o claves con un impacto limitado si se exponen.

Para mejorar la seguridad, considera las siguientes prácticas:

Usar APIs públicas cuando sea posible: Si estás desarrollando un proyecto personal o experimental, opta por APIs que no requieran autenticación estricta o que ofrezcan claves con permisos limitados.
Limitar el alcance de las claves: Por ejemplo, en GitHub, configura tokens con permisos mínimos para reducir riesgos en caso de exposición.
Implementar un backend proxy: En lugar de exponer la clave en el cliente, utiliza un servidor intermedio que realice las solicitudes a la API y mantenga las claves seguras.
Rotar claves regularmente: Cambia las claves API periódicamente para minimizar el impacto de una posible filtración.

Configuración adicional en Netlify

Además del comando de construcción, Netlify permite definir variables de entorno directamente en su panel de administración. En la sección “Environment variables”, puedes agregar claves como API_KEY y acceder a ellas en el comando de construcción. Por ejemplo:

echo -e "const TOKEN = '$API_KEY';\n\nexport default TOKEN;" > config.js

Aquí, $API_KEY es la variable definida en Netlify, lo que evita incluir la clave directamente en el comando de construcción. Este enfoque es más seguro, ya que la clave no aparece en el código fuente ni en los archivos generados.

Ejemplo completo de implementación

A continuación, se muestra un ejemplo completo de cómo estructurar un proyecto VanillaJS con Netlify para manejar una clave API:

Estructura del proyecto:

mi-proyecto/
├── index.html
├── index.js
├── .gitignore
└── .env

Archivo .env (no incluido en el repositorio):

API_KEY=abc123xyz789

Archivo .gitignore:

.env
node_modules/

Archivo index.html:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8" />
        <title>Ejemplo VanillaJS</title>
    </head>
    <body>
        <h1>Prueba de API</h1>
        <script src="./index.js" type="module"></script>
    </body>
</html>

Archivo index.js:

import TOKEN from "./config.js";

const realizarLlamadaApi = () => {
    fetch("https://api.ejemplo.com/datos", {
        headers: {
            Authorization: `Bearer ${TOKEN}`,
        },
    })
        .then((res) => res.json())
        .then((data) => console.log(data))
        .catch((err) => console.error(JSON.stringify(err)));
};

realizarLlamadaApi();

Comando de construcción en Netlify:

echo -e "const TOKEN = '$API_KEY';\n\nexport default TOKEN;" > config.js

Configuración de variables en Netlify:

En el panel de Netlify, en “Environment variables”, agrega:

Clave: API_KEY
Valor: abc123xyz789

Con esta configuración, la aplicación puede realizar solicitudes a la API en producción sin exponer la clave en el repositorio.

Conclusiones

El uso de variables de entorno en VanillaJS presenta desafíos debido a las limitaciones del entorno del navegador, pero herramientas como Netlify ofrecen soluciones prácticas para gestionar claves API de forma eficiente. Al inyectar claves durante el proceso de construcción y usar módulos ES6, puedes mantener la funcionalidad de tu aplicación en producción sin comprometer la seguridad básica. Sin embargo, es fundamental evaluar el nivel de sensibilidad de las claves utilizadas y considerar enfoques más seguros, como servidores proxy, para aplicaciones críticas. Con las técnicas descritas, puedes implementar aplicaciones VanillaJS robustas y funcionales, aprovechando al máximo las capacidades de integración de Netlify.