Cómo construir y publicar aplicaciones con Expo Application Services

Lauren Steven
NicaSource
Published in
7 min readOct 28, 2022

EAS es el acrónimo de Expo Application Services, este es un servicio en la nube que provee una forma fácil y rápida de llevar su aplicación Expo o React Native desde el desarrollo hasta las tiendas de aplicaciones.
Expo ofrece este servicio a través de 3 planes, uno gratuito y 2 de pago. Puedes encontrar más detalles sobre las diferencias entre los mismos en este enlace https://expo.dev/pricing.

Por otra parte, EAS cuenta con 2 características principales:

  • EAS Build: para construir las aplicaciones, tanto para iOS como Android.
  • EAS submit: para enviar las apps construidas hacia las tiendas de aplicaciones.

En este artículo me centraré en mostrarte cómo se realiza el proceso para iOS, sin embargo los pasos para hacerlo para Android no varían demasiado.

Creando nuestro primer build

Antes de que empecemos a utilizar EAS debemos tener una cuenta de Expo. Si aún no la tienes visita https://expo.dev/signup y crea una.

Asimismo, es bueno que conozcas un par de limitaciones del servicio. Actualmente, el soporte para proyectos Managed Expo solo está disponible para SDK 41 y superior. Por otra parte, debes tener en cuenta que los builds que tarden más de 2 horas en ejecutarse, se cancelarán.

Instalación

Para poder interactuar con los servicios en la nube de EAS desde nuestra máquina local, debemos hacer uso de EAS CLI. Ejecuta el siguiente comando para instalarlo de forma global:

npm install -g eas-cli

Adicionalmente, debes iniciar sesión en tu cuenta de Expo. Ejecuta eas login e ingresa las credenciales. Deberías ver lo siguiente en la terminal:

Si ingresaste tu email o password de forma incorrecta recibirás el siguiente error: Your username, email, or password was incorrect.De lo contrario, ejecuta eas whoami y deberías ver tu username en la terminal.

Configuración

Para configurar tu proyecto iOS y/o Android y que sea compatible con EAS Build debes ejecutar el siguiente comando desde el directorio de tu proyecto:

eas build:configure

Una vez elijas una plataforma, el cligenerará el archivo eas.json con lo siguiente:

Build

Luego de realizar la instalación y configuración de EAS en nuestro proyecto estamos listos para hacer build para iOS.

Sin embargo, antes de iniciar el build para las tiendas de aplicaciones, debes tener una cuenta de desarrollador de la tienda y generar o proporcionar credenciales para firmar las aplicaciones.

Si tu objetivo es crear aplicaciones para App Store, necesitas acceso a una cuenta con una membresía del Programa de desarrolladores de Apple. Puedes encontrar más información el siguiente enlace: Apple Developer Program

Para iniciar con el build ejecuta el siguiente comando:

eas build --platform ios

Como en todos los pasos previos, eas cli te mostrará algunas preguntas con respuesta sugeridas que puedes seleccionar presionando enter.

Asimismo, te pedirá que inicies sesión con tu cuenta de Apple Developer y si tienes activado Two-factor Authentication te pedirá que ingreses el código enviado al dispositivo asociado a tu cuenta.

Configurar credenciales

Si alguna vez has tenido que publicar una aplicación en App Store, sabrás que es necesario crear crear las credenciales de iOS (distribution certificate, provisioning profile, y push notifications key) de forma manual la primera vez y que, incluso, puede llegar a ser un quebradero de cabeza.

En consecuencia, se te pedirá que generes credenciales si aún no lo has hecho. EAS es genial en este sentido, ya que ofrece una forma de generar estas la primera vez, solo debes responder a las preguntas Generate a new Apple Distribution Certificate? Y/n, Would you like to set up Push Notifications for your project? Y/n.

Una vez creados, estos se almacenarán en los servidores EAS y en builds posteriores se reutilizarán a menos que se especifique lo contrario.

Ahora bien, probablemente te estás preguntando cuan seguro es almacenar estas credenciales en los servidores de Expo. La mayoría de los datos almacenados por los servidores de Expo (credenciales o de otro tipo) están encriptados en Google Cloud, las credenciales solo están sin cifrar mientras se usan en memoria cuando se genera un nuevo build o se envían push notifications.

Si aún así no te convence, siempre tienes la opción de crear las credenciales de forma manual desde Apple Developer Portal, descargarlas y moverlas a un directorio apropiado y apuntar a ellas desde el archivo credentials.json en el directorio raíz de tu proyecto.

Continuando con el proceso y habiendo generado los certificados, tu proyecto se subirá a los servidores de EAS y posteriormente te mostrará una URL desde donde puedes ver el estado del build si es que deseas cerrar la terminal. Es bueno que sepas que si usas el plan gratuito, en dependencia de la hora a la que hagas el build puede tomar mayor o menor tiempo.

Enviar la aplicación a App Store

Una vez finalizado nuestro build, estamos listos para enviarlo a App Store Connect. Para hacer esto ejecuta el comando:
eas submit --platform ios

Deberías de ver lo siguiente en tu terminal.

Selecciona la primera opción para ver la lista de build creados, con información asociada (versión, número de build, hora de finalización).

Cuando lo selecciones, el siguiente paso es proveer, o un App Store Connect API Key (el API de App Store Connect requiere un JSON Web Token para autorizar cada request que haces) o un App Specific Password.

Puedes generar un token desde App Store Connect o crear un App Specific Password desde este sitio https://appleid.apple.com y luego pegarlo en la terminal según corresponda y presionar enter para enviarlo.

Al finalizar, debería mostrarte el siguiente mensaje:

Automatizando el proceso

Hasta ahora hemos visto cómo realizar este proceso de forma manual, sin embargo luego de un par de veces de construir y enviar las aplicaciones desde tu máquina se vuelve una pérdida de tiempo.

Por consiguiente, Expo creó un GitHub action para automatizar este proceso directamente desde el repositorio de tu proyecto en GitHub.

Crear un workflow

Para automatizar el proceso de creación vamos a proceder a crear el archivo de configuración de nuestro workflow. Primero debemos crear el directorio que lo contendrá y que obligatoriamente debe llamarse .github/workflows/.

Dentro de esta crearemos el archivo ios-build.yaml (Github Actions utiliza la sintaxis de YAML para especificar la configuración de todo el workflow) y agregamos el contenido siguiente:

Básicamente lo que indicamos en nuestro workflow es lo siguiente:

on: especifica el evento que automáticamente ejecutará nuestro workflow. En nuestro caso, lo ejecuta cuando se realiza un push o merge sobre el branch main.
jobs:
es el conjunto de pasos que se ejecutaran en nuestro workflow.
steps: acá especificamos las tareas individuales que se llevarán a cabo.

  • Setup repo:actions/checkout@v2 prepara el repositorio y lo descarga en nuestra instanci apara ejecutar el resto de acciones sobre el mismo.
  • Setup Node: actions/setup-node@v2 establece la versión de node y mantiene en cache las dependencias de nuestro proyecto
  • Setup Expo and EAS: expo/expo-github-action@v7 permite instalar Expo CLI y EAS CLI.
  • Build and submit: acá utilizamos el comando para construir la aplicación y agregamos --auto-submit para enviarlo de forma automática después de que el build esté completo. Asimismo, agregamos los valoresEXPO_APPLE_ID y EXPO_APP_SPECIFIC_PASSSWORD a través de github secrets que son requeridos por EAS para enviar la app a App Store Connect.

Conclusión

En resumen, hemos estudiado en detalle la configuración necesaria para que puedas construir y publicar tus aplicaciones fácil y rápido utilizando EAS, también las consideraciones de seguridad que debes tener al usar el servicio. Adicionalmente, hemos realizado la configuración de GitHub actions para realizar todo el proceso de forma automática en cada pull request.

Espero que este artículo te haya sido de utilidad. Si tienes alguna duda o comentario, no dudes en dejarlo en la sección correspondiente; estaré encantado de responder.

--

--

Lauren Steven
NicaSource

Mobile Developer | ReactJS, React Native, GraphQL