DEV Community

Cover image for Generar APK con EAS ⚛️ React Native
Jorge Vega
Jorge Vega

Posted on

Generar APK con EAS ⚛️ React Native

✍️ En este post veremos como crear un proyecto de React Native usando expo y como generar fácilmente un APK de nuestra aplicación.

Este procedimiento de generar APK puede resultar muy útil para compartir el progreso con compañeros o clientes y que puedan ver rápidamente el progreso sin necesidad tener una cuenta operativa en Google Play Console

1. Iniciar el proyecto con Expo

En primer lugar creamos nuestro proyecto de ejemplo con el siguiente comando:

npx create-expo-app@latest
Enter fullscreen mode Exit fullscreen mode

2. Expo Prebuild

Una vez tenemos nuestra app de ejemplo, ahora tenemos que generar los directorios ./ios & ./android con el código nativo para poder generar el apk de android.

Para ello debemos usar el siguiente comando:

npx expo prebuild
Enter fullscreen mode Exit fullscreen mode

La primera vez nos pedirá un bundleId para nuestra app, podemos dejar el nombre por defecto o simplemente poner com.<tu-usuario>.<tu-app>

3. EAS (Expo Application Services)

EAS es un servicio en la nube que ofrece Expo y que nos permite generar hasta 30 builds gratuitas al mes.

3.1 Expo dev

Completa el registro en expo.dev y ten a mano usuario y contraseña para usarla en el siguiente apartado.

3.2 EAS CLI

Ahora tenemos que instalar el CLI de EAS para poder interactuar con los servicios en la nube que nos ofrece EAS.

Instalamos con el siguiente comando:

npm install --global eas-cli
Enter fullscreen mode Exit fullscreen mode

Ahora iniciamos sesión en nuestra terminal con las credenciales que usamos en el registro de expo.dev:

eas login
Enter fullscreen mode Exit fullscreen mode

4. Crear esquema para EAS

A continuación tenemos que crear en la raíz del proyecto un archivo llamado eas.json con el siguiente contenido:

{
    "cli": {
      "version": ">= 7.3.0"
    },
    "build": {
      "development": {
        "developmentClient": true,
        "distribution": "internal"
      },
      "preview": {
        "distribution": "internal",
        "android": {
          "buildType": "apk"
        }
      },
      "production": {}
    },
    "submit": {
      "production": {}
    }
  }
Enter fullscreen mode Exit fullscreen mode

Esto es básicamente el esquema que usa eas para generar el APK de nuestra aplicación

5. EAS Build

Ahora vamos a actualizar nuestro package.json con el script que usaremos para lanzar la build con el servicio de eas

Recuerda estar logeado en el terminal con tu cuenta de expo.dev como se describe en el paso 3.2

Actualizar package.json:

  "scripts": {
    [...]
    "eas:android": "eas build -p android --profile preview"
  },
Enter fullscreen mode Exit fullscreen mode

6. Generar build

Ahora ya simplemente tenemos que lanzar el comando yarn eas:android o npm run eas:android y comenzará la build.

El terminal nos lanzará 2 preguntas, ambas responderemos yes

✔ Would you like to automatically create an EAS project for @jvegax/whatsapp? … yes

✔ Generate a new Android Keystore? … yes

Image description

Una vez hecho esto, ya solo queda irnos al enlace que aparece en el terminal con los detalles de la build, o directamente irnos a nuestro perfil de expo.dev y en dashboard > recent activity nos aparecerá los detalles de la build.
Si hacemos clic nos llevará a los detalles de la build y podremos ver en tiempo real como se genera nuestra aplicación, la cual suele tardar en torno a 15 minutos en terminar.

Si todo ha salido correctamente nos aparecerá un desplegable para descargar el APK de la aplicación (Download build) y ya podremos usarlo en cualquier dispositivo Android:

Image description

Top comments (0)