Integrando CodePush con React Native

“white space shuttle indoors” by SpaceX on Unsplash

En esta entrada del blog voy a detallar el proceso de integrar CodePush con React Native. Primero vamos a introducirnos en qué es CodePush y qué ventajas nos va a aportar el integrarlo con React Native.

¿Que es CodePush?

CodePush es una herramienta de Microsoft que nos permite realizar analíticas de nuestras aplicaciones, segmentar los despliegues y las versiones de nuestra aplicación y desplegar código sin publicar una nueva version en los stores.

Este último punto es en el que se basará el artículo, aunque la integración será igualmente valida para todo lo demás.

¿Cómo funcionan los despliegues de CodePush en React Native?

El funcionamiento se basa en envolver nuestra aplicación en un HOC (Higher Order Component) de Codepush que se encarga de comprobar si hay nuevas actualizaciones de nuestro codigo en CodePush, y de recargar la aplicación con los nuevos cambios.

Es importante tener en cuenta que podemos utilizar CodePush para actualizar nuestra aplicación siempre y cuando modifiquemos javascript, estilos, etc y no añadamos o modifiquemos librerías nativas, es decir, siempre y cuando no requiera una re-compilación.

CodePush a grosso modo funciona como el hot reloading de React Native cuando estamos desarrollándola, solo que con la ventaja de poder hacerlo con las aplicaciones ya desplegadas y que utilizan nuestro clientes.

Instalación y configuración del SDK

Instalar la CLI

Lo primero que debemos hacer es instalar la cli de CodePush y de AppCenter ya que usaremos ambas.

npm install -g code-push-cli appcenter-cli

Creando una cuenta

Primero hay que crear una cuenta en AppCenter de Microsoft, para ello ejecutamos:

code-push register

Nos pedirá un token del navegador. Se nos abrirá una web en nuestro navegador y tendremos que foguearnos. En este caso nos loqueamos con nuestra cuenta de Google.

Una vez eliges tu nombre, te aparece un token. Debes copiarlo y pegarlo en la cli y una vez lo hagas, ya estarás registrado en CodePush.

Integrando con React Native

Primero nos loqueamos en https://www.appcenter.ms y creamos una app. Nos pedirá elegir el SO y la plataforma, en este caso elegiremos Android y React Native.

Es recomendable tener una app para cada plataforma en CodePush, es decir, si nuestra app va a ser desplegada en Google Play y en App Store, debemos crear dos aplicaciones en App Center, una para cada plataforma.

Una vez hayamos creado la aplicación para android/react-native, copiamos el código que nos da y lo apuntamos, hacemos lo mismo para ios/react-native y copiamos el código también.

Otra forma es crearlas desde la cli:

code-push app add blueskytechnologyeu/folloow-android android react-native
code-push app add blueskytechnologyeu/folloow-android android react-native

Ahora mismo debemos tener dos códigos app-secret, uno para android/react-native y otro para ios/react-native.

A continuación, instalamos react-native-code-push desde el root de nuestro proyecto react native.

npm install — save react-native-code-push

Una vez instalada, linkeamos el paquete:

react-native link react-native-code-push

Nos preguntara por la deployment key para Android, pegamos el código que apuntamos para android/react-native. A continuación nos pedirá lo mismo para la app en IOS.

Una vez los introduzcamos, ya tendremos la app configurada.

Configuración en Android

No es necesario configurar nada extra, el comando react-native link lo hace solo. Debemos verificar qué se ha añadido correctamente revisando paso a paso la documentación en la instalación manual:

https://github.com/Microsoft/react-native-code-push/blob/master/docs/setup-android.md

Configuración para IOS

En iOS, tras hacer react-native link react-native-code-push no me asoció la librería correctamente, tuve que realizar los siguientes pasos de forma manual:

Abrir el proyecto de la aplicación IOS con Xcode y buscar el fichero CodePush.xcodeproj en node_modules/react-native-code-push/ios y arrastrarlo a las Librerías del proyecto en XCode

Seleccionar el proyecto en XCode, seleccionar la pestaña Build Phases y en Link Binary With Libraries arrastrar la librería libCodePush.a

Posteriormente clickar en el + bajo Link Binary With Libraries, seleccionar libz.tbd y añadirlo.

Como usar Code Push en nuestro proyecto React Native

En nuestra app React Native, importamos CodePush en nuestro root component. A continuación definimos cómo queremos que se comporte CodePush, en este caso comprobará si hay nuevas actualizaciones cuándo la app inicie y si las hubiera, recarga la app. Por último, envolvemos el root component en el HOC de CodePush:

import CodePush from ‘react-native-code-push’
class App extends React.Component {
    …
}
const CODEPUSH_OPTIONS = { 
  checkFrequency: CodePush.CheckFrequency.ON_APP_START 
}
export default CodePush(CODEPUSH_OPTIONS)App)

Compilamos la aplicación y la instalamos en nuestro dispositivo de forma local (sin desplegar a ningún market aun).

Configurando los despliegues

A continuación debemos de añadir entornos en CodePush, por si queremos probar funcionalidades con determinados grupos de usuarios y no desplegar directamente a producción.

Añadimos Stagging y Production como entornos de despliegue tanto para la aplicación IOS como la de android. Los nombres son los que tenemos definidos en CodePush:

code-push deployment add appNameIOS Stagging
code-push deployment add appNameIOS Production
code-push deployment add appNameAndroid Stagging
code-push deployment add appNameAndroid Production

Para saber si nuestra aplicación va a recibir el cambio, debemos confirmar que la key de Production es la misma que esta referenciada en nuestros proyectos:

IOS: ios/appName/info.plist
ANDROID: android/app/build/src/main/res/values/strings.xml

Para ver las keys de nuestros entornos en CodePush ejecutamos:

code-push deployment list appName --displayKeys

Lo normal es que referenciemos las keys de production en cada uno de los proyectos.

Esta parte es importante ya que en mi caso cuando realicé la instalación, las claves asociadas no coincidían con ninguna de las de mis deployments y tuve que actualizarlas.

Una vez confirmado, hacemos un cambio y lo desplegamos a production:

appcenter codepush release-react -a appName -d Production -m — description “Testing change”

Tras cerrar y abrir la app, veremos los cambios reflejados. Si no los vieras es posible que tengas un error a la hora de copiar las keys de tus deployments en info.plist o strings.xml. Una forma fácil de comprobarlo es debugueando la aplicación en React Native y en la pestaña network, en el caso de que las claves estuvieran mal, verías un error en la petición de CodePush al servidor.

Conclusiones

A partir de ahora puedes actualizar toda la parte JS de tu aplicación sin tener que pasar por los markets. Tu siguiente paso es actualizar la aplicación en los markets solo una vez mas para desplegarlas a tus clientes con CodePush instalado y configurado.

Espero que el artículo te haya sido de utilidad!

Un saludo,