Cambiar React nativo a modo producción – iPhone iOS

Unos apuntes rápidos de los pasos a seguir para cambiar una app hecha con react de modo desarrollo al modo producción y poder publicar o llevar la app instalada para enseñarla al cliente.

Son muchas las cosas que pueden darnos problemas, empezando por cada librería que tengamos añadida.
El mejor consejo es leer los logs, yes, detenidamente, yes, buscando errores, por eso es mejor hacer el build por el terminal que darle al play en el xCode.

La mayoria de las veces el problema va a estar relacionado con problemas tipo: no has puesto el dominio del app, librerias mal linkeadas, etc..

Cambio desarrollo a producción

Estas son las indicaciones de React al día de hoy, tal cual.

Product → Scheme → Edit Scheme. cambiamos el schema al modo release.

vamos al archivo AppDelegate.m de nuestro proyecto en la carpeta ios y modificamos lo siguiente:

...
// DEVELOPMENT
// jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot: @"index" fallbackResource:nil];

// PRODUCTION
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension: @"jsbundle"];
...

Build Settings Header search path – los hacemos recursivos.

Pro Tip: para proyectos grandes de carga algo lenta, le metemos un loading…

// Loading "LaunchScreen"
UIView* launchScreenView = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0]UIView* launchScreenView = [[[NSBundle mainBundle] loadNibNamed:@"LaunchScreen" owner:self options:nil] objectAtIndex:0];

launchScreenView.frame = self.window.bounds;
rootView.loadingView = launchScreenView;

Luego tenemos que hacer un build, ⌘ + B o por el menú del xCode: Product → Build

Hacer el build por comando

Con este comando debemos poder hacer el build sin problemas una vez hayamos resuleto todos los problemas. Intenta primero con tu dispositivo móvil.

react-native run-ios --device --configuration Release

si todo va bien y eres capaz de correr la app sin problemas podrás hacer el build -> archive y publicar…, no entramos hoy en eso.

Bash limpiador

Os dejo aquí también un bash script para limpiar un poco y poder hacer las compilaciones.

#!/bin/bash
# Copyright 2018 Sunnyface.com.
#

rm -rf ios/build
rm -rf node_modules && npm install
node_modules/react-native/packager/packager.sh --reset-cache
watchman watch-del-all

Crea el fichero en ./scripts, ponle de nombre limpiador.sh y ejecuta cuando veas conveniente.

sh ./scripts/limpiador.sh

Programas fantasma

buscamos si hay programas enchufados a nuestro puerto

sudo lsof -i :8081

con esto lo matamos el proceso, pega el pid el recurso que veas.

kill -9 PID_DEL_RECURSO    

¿Qué más puedo hacer?

No hay mucho más que puedas hacer, a menos que tengas logs, si no puedes o sabes que hacer, busca ayuda en la red, google es tu mejor amigo y el este caso, el orden de tus palabras claves van a marcar la diferencia en la velocidad de las respuestas adecuadas. (hablar inglés ayuda mucho)

Usa github, en react-native la gente aporta sus trucos, pero mira bien las fechas y versiones, los hilos empiezan por el 2016.

Y si todo va bién, ponme dos estrellas.
a testear!