<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Jorge Vega</title>
    <description>The latest articles on DEV Community by Jorge Vega (@jvegax).</description>
    <link>https://dev.to/jvegax</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1046983%2F68b2acce-e63c-4a15-8855-b52d504b8399.jpg</url>
      <title>DEV Community: Jorge Vega</title>
      <link>https://dev.to/jvegax</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/jvegax"/>
    <language>en</language>
    <item>
      <title>Generar APK con EAS ⚛️ React Native</title>
      <dc:creator>Jorge Vega</dc:creator>
      <pubDate>Sun, 14 Jul 2024 12:57:17 +0000</pubDate>
      <link>https://dev.to/jvegax/generar-apk-con-eas-react-native-1eob</link>
      <guid>https://dev.to/jvegax/generar-apk-con-eas-react-native-1eob</guid>
      <description>&lt;p&gt;✍️ En este post veremos como crear un proyecto de &lt;code&gt;React Native&lt;/code&gt; usando expo y como generar fácilmente un &lt;code&gt;APK&lt;/code&gt; de nuestra aplicación.&lt;/p&gt;

&lt;p&gt;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 &lt;code&gt;Google Play Console&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Iniciar el proyecto con Expo
&lt;/h2&gt;

&lt;p&gt;En primer lugar creamos nuestro proyecto de ejemplo con el siguiente comando:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

npx create-expo-app@latest


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h2&gt;
  
  
  &lt;a href="https://docs.expo.dev/workflow/prebuild/" rel="noopener noreferrer"&gt;2. Expo Prebuild&lt;/a&gt;
&lt;/h2&gt;

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

&lt;p&gt;Para ello debemos usar el siguiente comando:&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

npx expo prebuild


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;La primera vez nos pedirá un &lt;code&gt;bundleId&lt;/code&gt; para nuestra app, podemos dejar el nombre por defecto o simplemente poner &lt;code&gt;com.&amp;lt;tu-usuario&amp;gt;.&amp;lt;tu-app&amp;gt;&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;a href="https://expo.dev/" rel="noopener noreferrer"&gt;3. EAS (Expo Application Services)&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;EAS es un servicio en la nube que ofrece Expo y que nos permite generar hasta 30 builds gratuitas al mes.&lt;/p&gt;

&lt;h3&gt;
  
  
  3.1 Expo dev
&lt;/h3&gt;

&lt;p&gt;Completa el registro en &lt;a href="https://expo.dev" rel="noopener noreferrer"&gt;expo.dev&lt;/a&gt; y ten a mano usuario y contraseña para usarla en el siguiente apartado.&lt;/p&gt;

&lt;h3&gt;
  
  
  3.2 EAS CLI
&lt;/h3&gt;

&lt;p&gt;Ahora tenemos que instalar el CLI de EAS para poder interactuar con los servicios en la nube que nos ofrece EAS.&lt;/p&gt;

&lt;p&gt;Instalamos con el siguiente comando:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

npm install --global eas-cli


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Ahora iniciamos sesión en nuestra terminal con las credenciales que usamos en el registro de &lt;a href="https://expo.dev" rel="noopener noreferrer"&gt;expo.dev&lt;/a&gt;:&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

eas login


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h2&gt;
  
  
  4. Crear esquema para EAS
&lt;/h2&gt;

&lt;p&gt;A continuación tenemos que crear en la raíz del proyecto un archivo llamado &lt;code&gt;eas.json&lt;/code&gt; con el siguiente contenido:&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

{
    "cli": {
      "version": "&amp;gt;= 7.3.0"
    },
    "build": {
      "development": {
        "developmentClient": true,
        "distribution": "internal"
      },
      "preview": {
        "distribution": "internal",
        "android": {
          "buildType": "apk"
        }
      },
      "production": {}
    },
    "submit": {
      "production": {}
    }
  }


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;p&gt;Esto es básicamente el esquema que usa &lt;code&gt;eas&lt;/code&gt; para generar el &lt;code&gt;APK&lt;/code&gt; de nuestra aplicación &lt;/p&gt;

&lt;h2&gt;
  
  
  5. EAS Build
&lt;/h2&gt;

&lt;p&gt;Ahora vamos a actualizar nuestro &lt;code&gt;package.json&lt;/code&gt; con el script que usaremos para lanzar la build con el servicio de &lt;code&gt;eas&lt;/code&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Recuerda estar logeado en el terminal con tu cuenta de expo.dev como se describe en el paso 3.2&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Actualizar &lt;code&gt;package.json&lt;/code&gt;:&lt;/p&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;

&lt;p&gt;"scripts": {&lt;br&gt;
    [...]&lt;br&gt;
    "eas:android": "eas build -p android --profile preview"&lt;br&gt;
  },&lt;/p&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h2&gt;
&lt;br&gt;
  &lt;br&gt;
  

&lt;ol&gt;
&lt;li&gt;Generar build
&lt;/li&gt;
&lt;/ol&gt;
&lt;/h2&gt;


&lt;p&gt;Ahora ya simplemente tenemos que lanzar el comando &lt;code&gt;yarn eas:android&lt;/code&gt; o &lt;code&gt;npm run eas:android&lt;/code&gt; y comenzará la build.&lt;/p&gt;

&lt;p&gt;El terminal nos lanzará 2 preguntas, ambas responderemos &lt;code&gt;yes&lt;/code&gt;&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;✔ Would you like to automatically create an EAS project for &lt;a class="mentioned-user" href="https://dev.to/jvegax"&gt;@jvegax&lt;/a&gt;/whatsapp? … yes&lt;/p&gt;

&lt;p&gt;✔ Generate a new Android Keystore? … yes&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frpwri6zgk9oicumujyz1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frpwri6zgk9oicumujyz1.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;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 &lt;code&gt;dashboard &amp;gt; recent activity&lt;/code&gt; nos aparecerá los detalles de la build.&lt;br&gt;
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.&lt;/p&gt;

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

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcjg6pme30z2f0edd2ofo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcjg6pme30z2f0edd2ofo.png" alt="Image description"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>reactnative</category>
      <category>expo</category>
      <category>android</category>
      <category>apk</category>
    </item>
  </channel>
</rss>
