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!

Añade fuentes en iOS y Android con React-native – modo fáci

OS muestro la forma más sencilla para hacer que React-nativo sea capaz de instalar nuestras fuentes dentro de los proyectos de forma automática en aplicaciones iOS y Android.

  1. Primer paso

Elige una carpeta dentro de tu proyecto y copia ahí las fuentes, en nuestro caso
vamos a usar el directorio ./src/assets/fonts/

  1. Paso segundo

añade este trozo de código dentro de tu proyecto, en el archivo de configuración en la raíz del proyecto package.json:

  "rnpm": {
    "assets": ["./src/assets/fonts"]
  },

solo tienes que reemplazar tu directorio por ./src/assets/fonts.

  1. Paso final

corre el siguiente comando en tu terminal.

$ react-native link

Ahora, cada vez que quieras instalar una fuente en tu aplicación móvil, solo tienes que dejar caer la fuente y correr el último comando, i voailá ya puedes usar la fuente.

Pro Tip: Cada vez que corres el comando react-native link deberas recompliar el proyecto para que carge las nuevas librerías.

Configurar Atom para React-native y flow

1) Instalar Atom

Descarga la ultima versión de Atom desde la página oficial, Si usas mac y tienes Hombrew y Cas, puedes instalaro con el siguente comando:

$ brew cask install atom
2) Instalar Nuclide para Atom

Nuclide es un conjunto de herramientas de código abierto perfecto para trabajar con React.

Busca el plugin en el buscador de paquetes en las preferencias de atom o usando el siguente comando:

$ apm install nuclide
3) Configuramos nuclide

Abre Atom,
Busca “Ajustes > Paquetes instalados” o con el shortcut CMD + SHIFT + P y busca “paquetes instalados”:

Busca “Nuclide” y dale a “Ajustes”:

Busca la opción “Instalar paquetes recomendados al arrancar”, la activamos.

En la sección de “Nuclide-flow” activa la opción de usar flow de manera local en cada proyecto, esto requerira que instales flow-bin en cada proyecto de React, es lo que nos recomiendan hacer la gente de facebook.

4) Instalar Prettier para Atom

Prettier es tu mejor amigo, se encarga de hacer que tu código sea bonito y agradable de leer. Además es capaz de seguir una reglas que tu le marques en los archivos de configuración que tengas.
Para instalarlo desde la ventana de comandos:

$ apm install prettier-atom
5) Configuramos Prettier

Como en la sección anterior, buscamos el plugin instalado y nos vamos a editar sus preferencias:

Tenemos que asegurarnos que la opción de “Integrarse con ESlint” esté activada.

Reiniciamos Atom.

6) Listos!

Ya estamos lístos para trabajar como máquinas con un monton de herramientas creadas por los creadores de React.

— Así nos queda una instalación limpia con todos los plugins instalados —

Asi quedarían los paquetes instalados

Es hora de programar con mucho @flow.

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!