Cuidemos el .ENVironment

En esté último tiempo me propuse de alguna manera empezar a generar algo mas de contenido para la comunidad, ya sea técnico o no, pero la idea es empezar a llenar de posts mis redes con la idea de compartir pequeños consejos o experiencias que aprendí o viví y que creo pueden contribuir al desarrollo de otra persona.

Es por esto que hoy decidí escribir sobre algo que de alguna manera veo olvidado o ignorado si se quiere dentro del ámbito del desarrollo frontend.

Si bien hoy lo voy a llevar exclusivamente a la tecnología que me interesa (React ⚛️), sepan que se puede aplicar a cualquier otro framework sin problema y que recomiendo hacerlo.

El tema en cuestión son las variables de entorno o environment variables en inglés. Si alguna vez hicieron backend o estuvieron involucrados en algo de infraestructura, seguramente escucharon hablar de ellas o incluso trabajaron con las mismas. Si no es así, no te preocupes, ahora te cuento mejor de que se trata todo esto.

Qué es una variable de entorno?

Una variable de entorno es en pocas palabras (con las mías) una variable global generalmente usada para almacenar configuraciones cómo por ejemplo: api keys, urls, datos sensibles, etc.

Estas se declaran en un archivo nombrado .env, de esta manera, pueden ser llamadas dentro del código con process.env.NOMBRE_VARIABLE y el compilador va a entender que eso es una variable de entorno y que tiene que buscarla en el archivo .env que ya definimos previamente.

Un ejemplo de un .env sería:

API_KEY="MI_API_KEY_SECRETA"
API_URL="http://apiurl.any"

Hay varias cosas para tener en cuenta:

• No es un objeto, es decir que no DEBEMOS separar nada por comas o punto y comas.
• Si bien yo use comillas, no es necesario
• Los nombres de variables se usan en mayúsculas
• No es necesario hacer exports de nada

Parece mágico no?
Pero la mejor parte de esto es que podemos declarar un .env para probar configuraciones de cada entorno en particular, ya sea dev, staging o producción e ir alternando entre ellos.

Una buena práctica que puedo recomendar es generar un .env.template con la idea de dejar un documento de como debería ser configurado el entorno para que funcione, ya que los .env NO se suben a los repositorios, no nos olvidemos que se suelen usar datos sensibles en los mismos.

Lo probé y no funcionó. Por qué?

Si leíste esto y automáticamente fuiste a probarlo a tu app en React, no te funcionó y probablemente hayas vuelto a seguir leyendo el post para decirme que estoy equivocado y es que en realidad no te conte lo mas importante.

En React, para hacerlo funcionar necesitamos que todas nuestras variables de entorno empiecen con el prefijo REACT_APP, de esta manera el compilador las interpreta y las traduce, caso contrario, necesitariamos una libreria o tool externa para hacerlo.

Entonces nuestro .env previo quedaría:

REACT_APP_API_KEY="MI_API_KEY_SECRETA"
REACT_APP_API_URL="http://apiurl.any"

Si fuiste ansioso y lo probaste de nuevo, tampoco te tiene que haber funcionado (y ya a este punto debes odiarme con bastantes ganas jaja), pero la realidad es que las variables de entorno se procesan SOLO cuando hacemos el build inicial, si la agregamos una vez que ya corrimos nuestro npm start o yarn start no se va a tomar el cambio y por ende, vas a recibir un error por una variable no definida.

Entonces, la segunda práctica que nos llevamos de acá es:

Siempre reiniciar el entorno cuando agregamos / cambiamos variables.

Y ahora? Qué sigue?

Si fuiste siguiendo la lectura y probando, entonces ahora sí deberías ya tener alguna que otra variable de entorno configurada en tu proyecto local y por si no te quedó claro como hacemos para hacer uso de la misma, te lo explico.

Como ya lo comente antes, podemos hacer uso de nuestro amigo process.env para acceder a todas las variables que hayamos configurado en nuestro .env, para esto imaginemos que estamos conectando nuestro proyecto con firebase y tenemos que setear la configuración inicial, la forma sin variables de entorno seria tener un archivo de config en algún punto del código con las variables de firebase:

apiKey: "apiKeyValue",
authDomain: "authDomainValue",
databaseURL: "databaseURLValue",
projectId: "projectIdValue",
storageBucket: "storageBucketValue",
messagingSenderId: "messagingSenderIdValue",
appId: "appIdValue",
measurementId: "measurementIdValue",

Y exportarlas e importarlas en cualquier punto donde queramos usarlas, algo como:

import config from "environment/configs";

firebase.initiliazeApp(config);

No nos olvidemos que la idea es usar esto para todo tipo de configuraciones y no solo para firebase, por ende tendríamos nuestro código lleno de import config from "environment/configs" lo cuál es tedioso, molesto y "ensucia" un poco en mi opinión.

Sin embargo, podriamos haber configurado nuestro .env con lo siguiente:

REACT_APP_FIREBASE_API_KEY="apiKeyValue"
REACT_APP_FIREBASE_AUTH_DOMAIN="authDomainValue"
REACT_APP_FIREBASE_DATABASE_URL="databaseURLValue"
REACT_APP_FIREBASE_PROJECT_ID="projectIdValue"
REACT_APP_FIREBASE_STORAGE_BUCKET="storageBucketValue"
REACT_APP_FIREBASE_MESSAGING_SENDER_ID="messagingSenderIdValue"
REACT_APP_FIREBASE_APP_ID="appIdValue"
REACT_APP_FIREBASE_MEASUREMENT_ID="measurementIdValue"

Y lo usaríamos de la siguiente manera:

apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_FIREBASE_APP_ID,
measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,

De esta manera, no necesitamos importar absolutamente nada. Si nuestras variables están bien configuradas y nos acordamos de reiniciar el entorno, todo debería funcionar y ya podrias correr tu aplicación sin problema conectada a firebase.

Mis dos últimos comentario respecto a esto son:

• No te olvides de actualizar siempre los entornos que uses con las variables, y siempre mantené actualizado tu template para que siempre sea posible iniciar el proyecto sin drama (este sí se sube al repo).
• El .env siempre esta en el root del proyecto, caso contrario el compilador no lo va a encontrar y no vas a tener tus variables disponibles.

Conclusión

No hay obligación de usar variables de entorno, y tampoco esta mal usar archivos de configuración como los que mencione antes, de hecho, angular usa algo muy similar para sus environments, así que si estas usando algo del estilo, no te preocupes, no es una mala práctica.

En mi opinión personal yo siempre me encontre más cómodo usando variables de entorno, por ende es algo que recomiendo desde mi punto de vista, pero no hay un estandar en el frontend sobre que usar para configuraciones globales.

Por otro lado, si no estas usando esto y/o tenés determinada data, expuesta en el código y súbida a un repo, es un buen momento para empezar a pensar en alguna de estas soluciones, te vas a ahorrar tiempo y dolores de cabeza.

Si llegaste hasta acá, gracias por leer 💜 y si querés charlar del tema o de otro tema, escribime!