Cómo gestionar las variables de entornos en ReactJS

La evolución de la tecnología en la actualidad es más rápida que la luz. Lo que hoy es blanco, mañana es negro. Hace unos años no pensábamos tener aplicaciones fuera de nuestras infraestructuras y ahora mismo la tendencia es que casi todas las aplicaciones están en el cloud y/o bien consumen servicios del mismo.

Si trasladamos esto a nuestro día a día, lo que hace unos años parecía una utopía (tener los desarrollos alojados en sistemas NO Microsoft), hoy  es una realidad. Con la llegada de .NET Core junto con la fiebre por los Microservicios (Kubernetes, Docker, etc..) cada vez es más normal tener un separación del BackEnd y del FrontEnd a nivel físico o tener un alojamiento diferente (contenedor/web app). Partiendo de este contexto, lo que anteriormente utilizábamos para pasar los parámetros  a la aplicación,  ya no es valido y tenemos que buscar la forma de hacerlo.

Crear aplicación en ReactJS

Para crear una aplicación ReactJS la mejor forma de hacerlo es utilizando la herramienta «Create-react-app«. Se trata de un paquete NPM creado por Facebook, que crea un proyecto  ReactJS y que genera un fichero de configuración con las últimas versiones compatibles. Una de sus grandes ventajas es que tiene una serie de utilidades out-of-the-box para simplificar el desarrollo. Entre estas utilidades viene configurado un servidor de desarrollo, una serie de reglas de sintaxis (jslint/tslint) y la generación de un bundle para producción.  En caso de que necesitemos modificar alguna de estas utilidades, no hay ningún problema, por lo que no estamos atados en caso de necesitar alguna modificación al mismo.

Con el siguiente código tenemos arrancado un «Hello World» de React en el tiempo en el que se descargan los paquetes npm necesarios.

npx create-react-app my-app --typescript
npm install 
npm run start

En la creación de dicha solución hay un fichero «.env». La utilidad que tiene dicho fichero es la de tener todas las variables de entorno que tendrá la aplicación. Por ejemplo, si vamos a tener una variable en la que tengamos la url de la API que vamos a consumir, hace falta este fichero:

REACT_APP_API_URL=https://demoblog.encamina.com/api

A la hora de definir la variables debemos considerar  que nuestra aplicación solo va a sustituir las variables que comiencen por REACT_APP. Este funcionamiento es para evitar reemplazar valores que puedan estar en el servidor NodeJS.
Ahora bien, como lo consumimos desde el código, la solución es tan fácil como  poner el siguiente código donde se utilice ese valor:

const baseURL = process.env.REACT_APP_API

Gestionando entornos out-of-the-box
Este fichero está muy bien siempre y cuando estamos en entornos de desarrollo, pero ¿cómo los gestionamos si estas variables son diferentes en los distintos entornos que tenemos? Si nosotros creamos un fichero con la estructura .env.{nombre_de_entorno} podemos utilizarlo siempre que indiquemos el entorno en el que esta.

¿Pero cómo podemos indicar en que entorno estamos?
Cuando vamos a arrancar la aplicación, bien con el comando npm run start o bien cuando compilamos npm run build, lo que tenemos que hacer es añadir el nombre del entorno. Por ejemplo si queremos arrancar nuestra aplicación haciendo uso de las variables del entorno de producción, pondríamos la siguiente instrucción:

npm run start .env.produccion

Otra forma de cambiar estas variables es estableciéndolas en el propio entorno del servidor de NodeJS. Por ejemplo:

 set "REACT_APP_API_URL=https://demoblog.encamina.com/api" 

¿Cómo podemos mejorar esta gestión de entornos?

El comportamiento out-of-the-box que trae de serie Create React puede cumplir bastante bien esta gestión de entornos y es válido en la mayoria de casos.

No obstante, hay determinados proyectos en los que se hecha de menos una herramienta un poco más friendly que nos permita ver las variables de todos los entornos a primera vista. Por este motivo empezamos a utilizar el paquete env-cmd . Es un simple paquete npm que se encarga de cargar los variables de entorno en nuestra aplicación. En lugar de tener un fichero por entorno, tenemos un único fichero en el que están todas las variables definidas. Este fichero, se llama env.cmdrc. Para el caso tendríamos un fichero como el siguiente:

{
   "LOCAL": {
    "REACT_APP_API_URL":"https://localhost:44382/"
  },
  "INT": {
    "REACT_APP_API_URL":"https://blogs-dev-webapp.azurewebsites.net/"
  },
  "PRE": {
    "REACT_APP_API_URL":"/"
  },
  "PRO": {
    "REACT_APP_API_URL":"/"
  }
}

Ahora bien ¿cómo hacemos uso de cada variable en cada entorno? Pues haciendo uso la instrucción «env-cmd» {nombre del entorno} antes de ejecutar la aplicación de una forma como la siguiente:

env-cmd PRO npm run build

Con la finalidad de tener las instrucciones ya escritas y agilizar el proceso de compilación, o bien preparar los ficheros/bundles para los entornos donde se despliega, en el package.json de la solución añadiremos las instrucciones necesarias para ello. Un ejemplo de los scripts que hacemos uso seria el siguiente:

"scripts": {
"start": "react-scripts start",
"start:local": "env-cmd LOCAL npm run start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build:int": "env-cmd INT npm run build",
"build:pro": "env-cmd PRO npm run build"
}

Conclusión

En este artículo hemos visto cómo podemos utilizar en nuestros desarrollos en ReactJS diferentes valores dependiendo del entorno en el que vayamos a desplegar dicho contenido. El tener grabadas «a fuego» las variables independientemente del lenguaje de programación no es una buena práctica y por este motivo hay que buscar cómo optimizar esta gestión. En futuros artículos veremos cómo podemos desplegar estos desarrollos en diferentes entornos haciendo uso de Azure Devop 🙂
Happy codding 🙂