Create React App (https://github.com/facebook/create-react-app) ha revolucionado la construcción de aplicaciones ReactJS. Esta herramienta nos permite levantar un esqueleto para una SPA en ReactJS eliminando las complejidades de las configuraciones de compilación, las herramientas y mantiene todo actualizado.
Sin embargo, la construcción de estas aplicaciones utiliza la configuración en tiempo de compilación y no en tiempo de ejecución o runtime. Esto se trata de un inconveniente cuando tratamos de automatizar la integración continua en búsqueda de generar artefactos potenciales para desplegar.
Separar la configuración de nuestras aplicaciones
Generalmente, las aplicaciones almacenan la configuración en constantes del código, pero esto no es una buena práctica si tratamos de seguir la metodología de los 12 factores (https://12factor.net/es/). Uno de los puntos que trata esta metodología es la de tratar de separar la configuración del aplicativo del propio código. Una manera de identificar si estamos cumpliendo con este principio es la siguiente: la prueba consiste en si podríamos publicar nuestra base de código de manera pública sin comprometer ninguna credencial sensible.
Las aplicaciones modernas almacenan la configuración de tal manera que puedan leerse desde variables de entorno (a menudo abreviadas como env vars o env). Probablemente habrás visto muchos ficheros .env en los repositorios actuales, ya que muchos frameworks han tratado de estandarizar este formato de inyección de variables. La ventaja del uso de variables de entorno es que son sencillas de cambiar sin tocar el código base y sobre todo, si se pueden realizar en tiempo de ejecución. Esto es debido a que un mismo artefacto nos puede valer para distintos entornos, simplemente configurando las variables de la manera adecuada.
Como hemos comentado Create React App, utiliza esta estrategia de ficheros .env únicamente en tiempo de compilación. Siempre se puede buildear una nueva versión utilizando las variables de entorno que consideremos, pero requiere de la reconstrucción de nuestra aplicación, aumentando los requisitos del servidor y sus recursos. Si estamos en un pipeline de integración continua, también implicaría hacer un build por cada entorno de despliegue. Es por ello que necesitamos buscar una solución para poder generar un build/artefacto que permita desplegarlos en varios entornos sin utilizar más computación.
Solución
Existen, varias soluciones implementadas para poder cambiar el comportamiento de Create React App, pero la que más me ha gustado y me ha servido de utilidad es React-env (https://github.com/beam-australia/react-env)
Esta librería, ayuda a generar variables que pueden cambiarse en tiempo de ejecución leyendo e inyectándose cuando la aplicación se inicia. Es totalmente compatible con Create React App y con NextJS utilizando la misma precedencia de ficheros .env que usa por defecto Create React App.
Esta librería básicamente, recoge nuestro .env y en el momento de nuestra compilación del build se genera un fichero .env.js estático que contiene las variables con el prefijo REACT_APP. Este archivo puede ser servido estáticamente durante el desarrollo o en runtime. La configuración del entorno estará disponible a través del objeto window._env pudiendo reemplazar nuestras variables en cualquier momento
Ejemplo de Uso
Lo primero de todo es incluir la siguiente línea a nuestro index.html dentro de la carpeta public:
|
1 |
<span class="pl-kos"><</span><span class="pl-ent">script</span> <span class="pl-c1">src</span>="<span class="pl-s">%PUBLIC_URL%/env.js</span>"<span class="pl-kos">></span><span class="pl-kos"></</span><span class="pl-ent">script</span><span class="pl-kos">></span> |
Esta linea debe de incluirse dentro del <head> lo más arriba posible. El orden es importante ya que cargara este javascript para recoger las variables que se definan. Este fichero contendrá una estructura parecida a la siguiente:
|
1 2 3 4 5 6 |
window._env = { NODE_ENV: 'production', REACT_APP_API_BASE_URL: '__REACT_APP_API_BASE_URL__', REACT_APP_API_ENTRYPOINT: '__REACT_APP_API_ENTRYPOINT__', REACT_APP_GOOGLE_MAP_KEY: '__REACT_APP_GOOGLE_MAP_KEY__' } |
Dentro de nuestro código, cuando queramos usar una de estas variables, tenemos que hacerlo a través del wrapper que nos expone la librería:
|
1 2 3 |
import env from '@beam-australia/react-env' export const GOOGLE_MAP_KEY = env('GOOGLE_MAP_KEY') |
Como puedes ver, es importante no incluir en esta lectura de variables el prefijo REACT_APP.
Para mas detalles puedes leer la documentación y el ejemplo que establece la Liberia: https://github.com/beam-australia/react-env/blob/master/examples/create-react-app/README.md
Conclusión
Como hemos visto, esta solución nos ayuda a cumplir un factor esencial en nuestras aplicaciones y nos facilita la construcción de nuestras SPA dentro de nuestros flujos de despliegue.
Y tú ¿Cómo despliegas tus aplicaciones ReactJS?
