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!

Instalar self-signed certificados de Valet en los simuladores para iOS

Con el siguiente truco podeis instalar certificados dentro del simulador de ios de forma rápida y fácil, tan solo has de tener el certificado generado por Valet creado por el mismo que hizo laravel.

Cona el repositorio siguiente a tu equipo:
git clone https://github.com/ADVTOOLS/ADVTrustStore.git
entra dentro del repositorio recien descargado
cd ADVTrustStore/
copia dentro de esta carpeta tu certificado, (tendremos comandos mas cortos)
cp somewhere/something.crt my.crt
convertimos el certifado al formato que le gusta a ios, .pem
openssl x509 -in my.crt -out my.pem -outform PEM
Ahora instalamos los certificados en los simuladores
./iosCertTrustManager.py -a my.pem

Pro Tip: aquí va un bash con todo el proceso automatizado.

certToSimulator.sh

voilá, super sencillo!