Cambiando entre entornos con React Native — Storybook incluido

Photo by Tony Webster on Unsplash

En este artículo explicaré como cambiar entre entornos de una forma sencilla en React Native.

En algún momento te encontrarás que quieres probar tu app contra el servidor de desarrollo, contra el de producción o cambiar fácilmente entre storybook y la app en si misma.

Tras investigar un poco, no conseguía pasarle variables de entorno personalizadas a React Native para que las recogiera, y en función de eso hacer algo. Por ello he decidido implementar algo sencillo pero que realiza lo que quiero y me permite ampliarlo en un futuro en base a las necesidades que tenga para cada entorno.

Explicando el concepto

Primero definiré un archivo del cual se leerá la configuración de mi entorno actual. Lo haré en una carpeta llamada config y se llamara environment.js.

A continuación, lo que haré será definir una carpeta llamada environments dentro de la cual crearé un fichero por cada entorno que quiera probar.

En cada fichero declararé las constantes que variarán en función del entorno que quiera probar. En este caso serán la API y el modulo principal a cargar, aunque puedes añadir las que sean necesarias.

Luego definiré una serie de scripts en el package.json (uno por cada entorno) que reemplazará el contenido de config/environment.js por el de cada entorno.

Y por ultimo, en cada script que quiera reemplazar el entorno, le pre-concatenaré el script de entorno que quiera.

Manos a la obra!

Creamos las carpetas config y environments dentro de nuestro proyecto (en mi caso miproyecto/src/app/):

En environments, creamos un fichero por cada entorno que queramos:

Y dentro de cada uno exportamos tantas variables como queramos, variando los valores para cada caso. Dichas variables influyen en el comportamiento de nuestra app en distintos entornos.

Por ejemplo en mi caso he exportado la dirección de la API y el modulo principal a cargar (que puede ser App o StorybookUI).

production.js

export const API = ‘https://mi-production-api.com'
export const MAIN_MODULE_NAME = ‘App’

development.js

export const API = ‘https://mi-development-api.com'
export const MAIN_MODULE_NAME = ‘App’

storybook.js

export const API = ‘http://mi-development-api.com'
export const MAIN_MODULE_NAME = ‘Storybook’

A continuación, definiremos los scripts en el package.json para cada entorno. Estos scripts copiaran el contenido del fichero del entorno en cuestión y lo reemplazaran en config/environment.js:

“storybook-env”: “cp src/app/environments/storybook.js src/app/config/environment.js”,
“production-env”: “cp src/app/environments/production.js src/app/config/environment.js”,
“development-env”: “cp src/app/environments/development.js src/app/config/environment.js”

Y por último, modificamos los scripts que queramos para que antes de ejecutarse, modifique el entorno por el que queremos:

“android”: “npm run development-env && react-native run-android”,
“ios”: “npm run development-env && react-native run-ios”,
“ios-storybook”: “npm run storybook-env && react-native run-ios”,

A continuación, solo tenemos que importar las variables del archivo /config/environment.js en donde queramos que nuestra aplicación los use. Por ejemplo en los servicios importaría la direccion de la API y la reemplazaría en las URL:

Y en el caso de Storybook, lo que hago es que en el index.js de la aplicación exporto el modulo App o el módulo StorybookUI dependiendo de si estoy en el entorno storybook o si estoy en development/production:

Ahora si lanzamos la app en un entorno, por ejemplo en development:

npm run ios

Y queremos cambiar a storybook, solo necesitamos lanzar el script especifico del entorno y sin tener que parar el bundler tendremos storybook.

npm run storybook-env

Lo mismo para cambiar entre development y production. Los scripts a los que hemos añadido delante el script de entorno es por si queremos ejecutar directamente la app desde cero en ese entorno, por ejemplo si tengo el emulador de ios cerrado y ningun bundler arrancado y quiero lanzar la app directamente con storybook, ejecutaría:

npm run ios-storybook

Porque dicho script ejecuta la app de ios en el simulador de ios, pero previamente seteando el entorno a storybook.

“ios-storybook”: “npm run storybook-env && react-native run-ios”

Espero que este artículo te haya ayudado si tenias problemas con los entornos en React Native y en caso de tener una solución más adecuada, me gustaría que la comentaras en los comentarios al post.

Un saludo!