{"id":1394,"date":"2021-11-16T08:40:11","date_gmt":"2021-11-16T08:40:11","guid":{"rendered":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/?p=1394"},"modified":"2021-11-16T08:41:43","modified_gmt":"2021-11-16T08:41:43","slug":"como-configurar-nuestro-proyecto-react-para-que-pueda-usar-variables-de-entorno","status":"publish","type":"post","link":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/como-configurar-nuestro-proyecto-react-para-que-pueda-usar-variables-de-entorno\/","title":{"rendered":"C\u00f3mo configurar nuestro proyecto React para que pueda usar variables de entorno"},"content":{"rendered":"

\"\"<\/p>\n

Al desarrollar un proyecto siempre es necesario disponer de diferentes entornos para poder desarrollar y testear antes de pasar a producci\u00f3n. As\u00ed, es habitual tener entornos de Desarrollo, Pre-Producci\u00f3n y Producci\u00f3n, aunque tambi\u00e9n podemos encontrarnos con escenarios con m\u00e1s (o menos) entornos. Por ello, es necesario disponer de variables de entorno que puedan ser configurables de forma autom\u00e1tica a la hora de compilar\/ejecutar nuestras aplicaciones react, tales como URLs de Apis, Client Ids, etc<\/p>\n

<\/p>\n

Escenario<\/h2>\n

Supongamos que tenemos 3 entornos de desarrollo, LOCAL, INTEGRATION y PRODUCTION y, en cada uno de ellos queremos configurar una URL para acceder a un servicio como podr\u00eda ser una api de Azure Cognitive Services. Veamos paso a paso c\u00f3mo configurar nuestro proyecto React para que pueda usar variables de entorno, desde el caso simple de un \u00fanico entorno, hasta el escenario propuesto con 3 entornos.<\/p>\n

Primera opci\u00f3n \u2013\u00a0Fichero .env<\/em><\/h2>\n

Como primera opci\u00f3n tenemos la\u00a0caracter\u00edstica que trae React.js<\/strong>\u00a0para poder\u00a0configurar variables de entorno haciendo uso del fichero .env<\/strong>\u00a0que, nos permitir\u00e1 disponer de sus valores en todo el proyecto de una forma sencilla.<\/p>\n

Para ello, declaramos las variables, una por l\u00ednea, y les asignamos el valor correspondiente.<\/p>\n

\n
\"\"\"\"<\/figure>\n<\/div>\n

Para probar que todo funciona, he modificado el fichero App.tsx para\u00a0mostrar el valor de esta variable<\/strong>\u00a0entre asteriscos, a\u00f1adiendo el acceso a las variables de entorno\u00a0tal y como se indica en la propia documentaci\u00f3n<\/strong>:<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n<\/td>\n
\n
\n
process.env.{ENVIRONMENT_VARIABLE_NAME}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n
\"\"\"\"<\/figure>\n
\n
\"\"<\/figure>\n<\/div>\n

Es importante tener en cuenta que el \u00abnaming convention<\/em>\u00bb para las variables de entorno en React.js nos obliga a usar el prefijo\u00a0REACT_APP_<\/strong><\/p>\n

Adding Custom Environment Variables | Create React App (create-react-app.dev)<\/a><\/cite><\/p><\/blockquote>\n

Segunda opci\u00f3n \u2013\u00a0Ficheros .env por entorno<\/em><\/h2>\n

Adentr\u00e1ndonos algo m\u00e1s en el uso del fichero .env, podremos\u00a0disponer de sobreescrituras por entorno de ejecuci\u00f3n<\/strong> pero, se har\u00e1 de una forma un tanto \u00abextra\u00f1a\u00bb y \u00abpoco intuitiva\u00bb, al menos para los que estamos acostumbrados a trabajar con .Net \ud83d\ude42<\/p>\n

Tal y como se especifica en la documentaci\u00f3n,\u00a0tendremos los entornos \u00abdefault\u00bb, \u00ablocal\u00bb, \u00abdevelopment\u00bb, \u00abtest\u00bb y \u00abproduction\u00bb<\/strong>. Podremos tener en nuestro proyecto los ficheros de cada entorno pero\u2026\u00a0\u00a1CUIDADO!<\/strong>\u00a0Hay que tener muy en cuenta el orden de carga de los mismos porque los valores se sobreescriben y no exactamente en el orden en el que se exponen en la documentaci\u00f3n<\/p>\n

.env<\/code>: Default.<\/em><\/p>\n

.env.local<\/code>: Local overrides.\u00a0This file is loaded for all environments except test.<\/strong><\/em><\/p>\n

.env.development<\/code>,\u00a0.env.test<\/code>,\u00a0.env.production<\/code>: Environment-specific settings.<\/em><\/p>\n

.env.development.local<\/code>,\u00a0.env.test.local<\/code>,\u00a0.env.production.local<\/code>: Local overrides of environment-specific settings.<\/em><\/p>\n

Adding Custom Environment Variables | Create React App (create-react-app.dev)<\/a>.<\/cite><\/p><\/blockquote>\n

Seg\u00fan mi experiencia (en local<\/em><\/strong>), el orden es el siguiente:<\/p>\n