Al estar creando mi aplicación en React, tuve el problema de estar cambiando la dirección de la API manualmente cuando lo pasaba a modo producción. Honestamente es un poco incómodo, así que busqué una forma rápida de solucionar este problema sin tener que descargar una librería. Aclarando un punto, este tutorial se enfoca en el uso de React con el CLI “create-react-app”.

Usando process.env.NODE_ENV

El CLI establece la variable global process.env.NODE_ENV a development cuando se usa el comando npm start, test al usar npm run test, o production al usar npm run build. Sacando ventaja de esto, dentro de nuestro proyecto podemos crear un simple archivo llamado environment.js y ponemos una simple configuración como la siguiente:

https://gist.github.com/Asner/6eb0e1ba043dae51c44071f1f1f52d4d#file-environment-js

Ahora desde cualquier archivo se puede mandar a llamar desde cualquier archivo de la siguiente manera:

https://gist.github.com/Asner/d374683dd6ee29347aaa2fb879501bec

Ahora al usar npm start, la variable API_URL será http://127.0.0.1:8000/v1, en npm run build será https://api.production.com/v1. Fácil, ¿no? Sin embargo, esto pudiese llegar a ser tedioso cuando tienes más de diez archivos de servicios que tenga su propio endpoint al api.

Método usando dotenv.

Para importar variables de entorno, react-scripts usa la librería “dotenv” el cual busca un archivo .env y .env.local en la raíz del proyecto. Para ello creamos estos dos archivos. En el archivo “.env.local” ponemos el siguiente contenido:

https://gist.github.com/Asner/4a9381f5440008a6e3f976e1191e9259

Y en el “.env” ponemos:

https://gist.github.com/Asner/20f594822d728a132119245df764d093

¿Por qué las variables inician en REACT_APP_? Esto es porque React solo importa aquellas variables que empiezan por ese prefijo. Ahora simplemente en un archivo (en nuestras llamadas a una api) podemos utilizar el objeto process.env la siguiente variable para acceder a ella, por ejemplo:

https://gist.github.com/Asner/d9d6b4662f62a1c86b4afacaddabf9de

La diferencia entre .env y .env.local es que una se utiliza con los comandos de npm start y npm run build. También, se pueden usar estos dos archivos al mismo tiempo, solamente .env.local sobrescribiría las variables establecidas en el .env que tengan el mismo nombre, está el caso de “REACT_APP_VARIABLE_IN_PROD” que se puede acceder desde modo local.

El orden de prioridad de las variables de entorno es la siguiente:

1. Shell o consola
2. .env.local
3. .env

Resumen

• La variable NODE_ENV dentro process.env se define automáticamente a development, test, o production dependiendo del comando que se utilice para iniciar React (npm start, npm run test o npm run build)
• Las variables de entorno se pueden definir desde la consola o en un archivo .env en la raíz del proyecto.
• Las variables de entorno dentro del archivo .env solo se importarán las que inicien con el prefijo REACT_APP_.
• Las variables de entorno definidas en consola tienen más prioridad que las definidas en archivo.