Compilaciones de Vista Previa en PRs

Q: ¿Cómo obtienen los diseñadores vista previa de iOS sin UDIDs?

Usa el perfil preview-simulator - descarga la compilación del simulador; el diseñador ejecuta en el simulador Xcode.

Q: ¿Debería vista previa usar una API diferente?

Establece env.API_URL en el perfil de vista previa en staging - nunca apuntes compilaciones de vista previa a APIs de escritura de producción.

Un recetario para la distribución de QR de compilaciones de vista previa de EAS en solicitudes de extracción - para que el diseño y QA revisen en dispositivos reales antes de fusionar.

Receta

Tarjeta de receta de referencia rápida - lista para copiar y pegar.

// eas.json - perfil de vista previa
{
  "build": {
    "preview": {
      "distribution": "internal",
      "channel": "preview",
      "android": { "buildType": "apk" },
      "ios": { "simulator": false }
    }
  }
}

# .github/workflows/preview-pr.yml
name: Preview Build
on:
  pull_request:
    types: [labeled]
 
jobs:
  preview:
    if: contains(github.event.pull_request.labels.*.name, 'needs-preview')
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: expo/expo-github-action@v8
        with:
          eas-version: latest
          token: ${{ secrets.EXPO_TOKEN }}
      - run: npm ci
      - id: build
        run: |
          eas build --profile preview --platform android --non-interactive --json > build.json
          echo "url=$(jq -r '.[0].artifacts.buildUrl' build.json)" >> $GITHUB_OUTPUT
      - uses: actions/github-script@v7
        with:
          script: |
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: `## 📱 Compilación de vista previa\n\nInstalar: ${{ steps.build.outputs.url }}\n\nEscanea el código QR en el dispositivo o abre el enlace.`
            })

Cuándo usarlo:

Navegación nativa, gestos o flujos de cámara que los diseñadores deben ver en el hardware.
Aprobación de QA antes de la fusión en características que Jest no puede cubrir.
Revisión de UI multiplataforma cuando Storybook web no es suficiente.
Demostraciones para partes interesadas sin esperar a la compilación nocturna o tren de lanzamiento.

Ejemplo Práctico

Disposición del proyecto:

your-expo-app/
  .github/workflows/preview-pr.yml
  .eas/workflows/preview-pr.yml   # alternativa nativa de EAS opcional
  eas.json
  app.json

Perfiles eas.json

{
  "build": {
    "preview": {
      "distribution": "internal",
      "channel": "preview",
      "env": {
        "APP_VARIANT": "preview"
      },
      "android": {
        "buildType": "apk"
      },
      "ios": {
        "simulator": false
      }
    },
    "preview-simulator": {
      "distribution": "internal",
      "ios": { "simulator": true },
      "android": { "buildType": "apk" }
    }
  }
}

// app.config.ts - banner de variante opcional
const IS_PREVIEW = process.env.APP_VARIANT === "preview";
 
export default {
  expo: {
    name: IS_PREVIEW ? "MyApp (Preview)" : "MyApp",
    // ...
  },
};

GitHub Actions - comentario con enlace de instalación

name: Preview on PR
on:
  pull_request:
    types: [opened, synchronize, labeled]
 
concurrency:
  group: preview-${{ github.event.pull_request.number }}
  cancel-in-progress: true
 
jobs:
  preview:
    if: contains(github.event.pull_request.labels.*.name, 'needs-preview')
    runs-on: ubuntu-latest
    permissions:
      pull-requests: write
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: npm }
      - uses: expo/expo-github-action@v8
        with:
          eas-version: latest
          token: ${{ secrets.EXPO_TOKEN }}
      - run: npm ci
      - run: npm run typecheck
      - name: EAS preview build
        id: eas
        run: |
          eas build \
            --profile preview \
            --platform android \
            --non-interactive \
            --json > build-output.json
          BUILD_URL=$(jq -r '.[0].artifacts.buildUrl // .artifacts.buildUrl' build-output.json)
          QR_URL=$(jq -r '.[0].artifacts.applicationArchiveUrl // empty' build-output.json)
          echo "build_url=$BUILD_URL" >> $GITHUB_OUTPUT
      - name: Comment on PR
        uses: actions/github-script@v7
        with:
          script: |
            const url = '${{ steps.eas.outputs.build_url }}';
            const body = [
              '## 📱 Compilación de vista previa de Android',
              '',
              `**Instalar:** ${url}`,
              '',
              '1. Abre el enlace en tu dispositivo Android',
              '2. Escanea el código QR o descarga el APK',
              '3. Permite la instalación de fuentes desconocidas si se te pide (solo para pruebas internas)',
              '',
              '_Compilado desde el commit `${{ github.sha }}` con perfil `preview`._'
            ].join('\n');
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body
            });

Alternativa de EAS Workflows

# .eas/workflows/preview-pr.yml
name: Preview PR
on:
  pull_request:
    types: [labeled]
 
jobs:
  quality:
    if: ${{ github.event.pull_request.labels.*.name contains 'needs-preview' }}
    steps:
      - uses: eas/checkout
      - uses: eas/install_node_modules
      - run: npm run typecheck
 
  build_preview:
    needs: [quality]
    type: build
    params:
      platform: android
      profile: preview

Dispara manualmente al probar:

npx eas-cli@latest workflow:run .eas/workflows/preview-pr.yml

Lo que esto demuestra:

distribution: internal - EAS aloja la página de instalación con QR (Distribución Interna).
buildType: apk en Android - sideload sin pista interna de Play.
Puerta de etiqueta - solo los PRs con needs-preview gastan créditos de compilación.
Comentario en PR - QA y diseño obtienen el enlace sin hurgar en el panel de EAS.
Concurrencia - el push más reciente cancela la vista previa obsoleta para el mismo número de PR.

Análisis Profundo

Quién Instala Qué

Plataforma	Perfil de vista previa	Instalador	Mejor para
Android	`apk` + internal	Enlace QR / APK	QA en dispositivos físicos
Dispositivo iOS	ad hoc / internal	QR a través de EAS	UDIDs Registrados
iOS	`simulator: true`	`.app` tar	Diseñador en simulador Mac
Ambos	+ `channel: preview`	+ `eas update` opcional	Hotfix JS en el mismo binario de vista previa

Estrategias de Disparo

# Con puerta de etiqueta (recomendado)
if: contains(github.event.pull_request.labels.*.name, 'needs-preview')
 
# Filtro de ruta - solo cambios que impactan lo nativo
on:
  pull_request:
    paths:
      - "app/**"
      - "src/**"
      - "app.config.ts"
      - "plugins/**"

Estrategia	Costo de crédito	Riesgo
Cada push de PR	Alto	Mejor cobertura
Etiqueta `needs-preview`	Bajo	Requiere disciplina
Filtro de ruta	Medio	Pierde cambios de paquete compartido si el filtro es muy estrecho

Documentar en CONTRIBUTING.md:

## Compilaciones de vista previa
Agrega la etiqueta `needs-preview` cuando QA o diseño necesita una compilación de dispositivo.
**No** agregues para cambios solo de copia o solo de prueba.

OTA en Canal de Vista Previa

Después de que existe el binario de vista previa, los fixes de JS pueden enviarse sin reconstruir:

eas update --channel preview --message "PR-${{ github.event.pull_request.number }}"

El binario de vista previa debe coincidir con runtimeVersion - Política de Versión en Tiempo de Ejecución
Comenta en el PR cuando llega OTA para que QA actualice el bundle
Los cambios nativos aún necesitan una nueva compilación de vista previa

Emparejar con Maestro Smoke

Cuando cambia la navegación, ejecuta un flujo Maestro delgado en build_id de vista previa antes de fusionar:

  maestro_smoke:
    needs: [build_preview]
    type: maestro
    params:
      build_id: ${{ needs.build_preview.outputs.build_id }}
      flow_path: [".maestro/smoke.yml"]

Falla la verificación de PR si smoke falla - opcional pero valioso para refactores de enrutamiento
Mantén smoke a 3-5 pasos - Maestro E2E

Errores Comunes

Vista previa en cada commit - Agotamiento de créditos de EAS a mediados de sprint. Solución: Puerta de etiqueta + cancelación de concurrencia.
Vista previa de iOS sin dispositivos registrados - La compilación ad hoc no se instala en ningún lugar. Solución: Mantén la lista de dispositivos en Apple Developer portal o usa perfil de simulador para diseñadores.
QA prueba Expo Go - El Bundle ID y los módulos nativos difieren de la compilación de vista previa. Solución: Siempre distribuye el enlace del artefacto de EAS.
Comentario de PR obsoleto - Enlace de instalación antiguo después de rebase. Solución: Edita el comentario o publica un nuevo comentario por compilación; incluye github.sha en el cuerpo.
Credenciales de producción en perfil de vista previa - Firma de tienda accidental en rama de característica. Solución: Separa el perfil preview sin claves de producción autoIncrement.
Permiso pull-requests: write faltante - El paso de comentario falla silenciosamente o da errores. Solución: Agrega el bloque permissions en el flujo de trabajo.

Alternativas

Alternativa	Usar Cuando	No Usar Cuando
QR de distribución interna de EAS	Predeterminado para QA de dispositivo	Necesitas lanzamiento gradual de pista interna de Play
`eas update` en canal de vista previa	Ajustes de PR solo JS	Se agregó nuevo módulo nativo
TestFlight externo + número de PR	Equipo enfocado en iOS ya en ASC	Se necesita retroalimentación rápida de APK de Android
Solo pruebas de captura de pantalla	Diseño/copia pura	Gestos, cámara, háptica

Preguntas Frecuentes

¿Cómo instala QA en Android?

Abre el enlace de página de compilación de EAS del comentario de PR → escanea el código QR → instala el APK. Habilita "instalar aplicaciones desconocidas" para el navegador si se te pide.

¿Puedo compilar iOS y Android en un trabajo de PR?

eas build --profile preview --platform all --non-interactive

Cuesta dos compilaciones; comenta ambos enlaces o compila solo Android para obtener retroalimentación más rápida.

¿Cómo obtienen los diseñadores vista previa de iOS sin UDIDs?

Usa el perfil preview-simulator - descarga la compilación del simulador; el diseñador ejecuta en el simulador Xcode.

¿Debería vista previa usar una API diferente?

Establece env.API_URL en el perfil de vista previa en staging - nunca apuntes compilaciones de vista previa a APIs de escritura de producción.

Relacionado

GitHub Actions + EAS - secretos y expo-github-action
EAS Workflows - elementos de lista de verificación de nivel de vista previa
Distribución Interna - pistas ad hoc y empresariales
Perfiles de Compilación y Sabores - vista previa vs producción
Conceptos Básicos de Pruebas Móviles - qué complementan las vistas previas
Maestro E2E - smoke en preview build_id
Conceptos Básicos de CI/CD Móvil - verificaciones de PR vs compilaciones de vista previa

Versiones de Stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (expo ~57.0.4).

Receta

Tarjeta de receta de referencia rápida - lista para copiar y pegar.

// eas.json - perfil de vista previa
{
  "build": {
    "preview": {
      "distribution": "internal",
      "channel": "preview",
      "android": { "buildType": "apk" },
      "ios": { "simulator": false }
    }
  }
}

# .github/workflows/preview-pr.yml
name: Preview Build
on:
  pull_request:
    types: [labeled]
 
jobs:
  preview:
    if: contains(github.event.pull_request.labels.*.name, 'needs-preview')
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: expo/expo-github-action@v8
        with:
          eas-version: latest
          token: ${{ secrets.EXPO_TOKEN }}
      - run: npm ci
      - id: build
        run: |
          eas build --profile preview --platform android --non-interactive --json > build.json
          echo "url=$(jq -r '.[0].artifacts.buildUrl' build.json)" >> $GITHUB_OUTPUT
      - uses: actions/github-script@v7
        with:
          script: |
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: `## 📱 Compilación de vista previa\n\nInstalar: ${{ steps.build.outputs.url }}\n\nEscanea el código QR en el dispositivo o abre el enlace.`
            })

Cuándo usarlo:

Navegación nativa, gestos o flujos de cámara que los diseñadores deben ver en el hardware.
Aprobación de QA antes de la fusión en características que Jest no puede cubrir.
Revisión de UI multiplataforma cuando Storybook web no es suficiente.
Demostraciones para partes interesadas sin esperar a la compilación nocturna o tren de lanzamiento.

Ejemplo Práctico

Disposición del proyecto:

your-expo-app/
  .github/workflows/preview-pr.yml
  .eas/workflows/preview-pr.yml   # alternativa nativa de EAS opcional
  eas.json
  app.json

Perfiles eas.json

{
  "build": {
    "preview": {
      "distribution": "internal",
      "channel": "preview",
      "env": {
        "APP_VARIANT": "preview"
      },
      "android": {
        "buildType": "apk"
      },
      "ios": {
        "simulator": false
      }
    },
    "preview-simulator": {
      "distribution": "internal",
      "ios": { "simulator": true },
      "android": { "buildType": "apk" }
    }
  }
}

// app.config.ts - banner de variante opcional
const IS_PREVIEW = process.env.APP_VARIANT === "preview";
 
export default {
  expo: {
    name: IS_PREVIEW ? "MyApp (Preview)" : "MyApp",
    // ...
  },
};

GitHub Actions - comentario con enlace de instalación

name: Preview on PR
on:
  pull_request:
    types: [opened, synchronize, labeled]
 
concurrency:
  group: preview-${{ github.event.pull_request.number }}
  cancel-in-progress: true
 
jobs:
  preview:
    if: contains(github.event.pull_request.labels.*.name, 'needs-preview')
    runs-on: ubuntu-latest
    permissions:
      pull-requests: write
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: npm }
      - uses: expo/expo-github-action@v8
        with:
          eas-version: latest
          token: ${{ secrets.EXPO_TOKEN }}
      - run: npm ci
      - run: npm run typecheck
      - name: EAS preview build
        id: eas
        run: |
          eas build \
            --profile preview \
            --platform android \
            --non-interactive \
            --json > build-output.json
          BUILD_URL=$(jq -r '.[0].artifacts.buildUrl // .artifacts.buildUrl' build-output.json)
          QR_URL=$(jq -r '.[0].artifacts.applicationArchiveUrl // empty' build-output.json)
          echo "build_url=$BUILD_URL" >> $GITHUB_OUTPUT
      - name: Comment on PR
        uses: actions/github-script@v7
        with:
          script: |
            const url = '${{ steps.eas.outputs.build_url }}';
            const body = [
              '## 📱 Compilación de vista previa de Android',
              '',
              `**Instalar:** ${url}`,
              '',
              '1. Abre el enlace en tu dispositivo Android',
              '2. Escanea el código QR o descarga el APK',
              '3. Permite la instalación de fuentes desconocidas si se te pide (solo para pruebas internas)',
              '',
              '_Compilado desde el commit `${{ github.sha }}` con perfil `preview`._'
            ].join('\n');
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body
            });

Alternativa de EAS Workflows

# .eas/workflows/preview-pr.yml
name: Preview PR
on:
  pull_request:
    types: [labeled]
 
jobs:
  quality:
    if: ${{ github.event.pull_request.labels.*.name contains 'needs-preview' }}
    steps:
      - uses: eas/checkout
      - uses: eas/install_node_modules
      - run: npm run typecheck
 
  build_preview:
    needs: [quality]
    type: build
    params:
      platform: android
      profile: preview

Dispara manualmente al probar:

npx eas-cli@latest workflow:run .eas/workflows/preview-pr.yml

Lo que esto demuestra:

distribution: internal - EAS aloja la página de instalación con QR (Distribución Interna).
buildType: apk en Android - sideload sin pista interna de Play.
Puerta de etiqueta - solo los PRs con needs-preview gastan créditos de compilación.
Comentario en PR - QA y diseño obtienen el enlace sin hurgar en el panel de EAS.
Concurrencia - el push más reciente cancela la vista previa obsoleta para el mismo número de PR.

Análisis Profundo

Quién Instala Qué

Plataforma	Perfil de vista previa	Instalador	Mejor para
Android	`apk` + internal	Enlace QR / APK	QA en dispositivos físicos
Dispositivo iOS	ad hoc / internal	QR a través de EAS	UDIDs Registrados
iOS	`simulator: true`	`.app` tar	Diseñador en simulador Mac
Ambos	+ `channel: preview`	+ `eas update` opcional	Hotfix JS en el mismo binario de vista previa

Estrategias de Disparo

# Con puerta de etiqueta (recomendado)
if: contains(github.event.pull_request.labels.*.name, 'needs-preview')
 
# Filtro de ruta - solo cambios que impactan lo nativo
on:
  pull_request:
    paths:
      - "app/**"
      - "src/**"
      - "app.config.ts"
      - "plugins/**"

Estrategia	Costo de crédito	Riesgo
Cada push de PR	Alto	Mejor cobertura
Etiqueta `needs-preview`	Bajo	Requiere disciplina
Filtro de ruta	Medio	Pierde cambios de paquete compartido si el filtro es muy estrecho

Documentar en CONTRIBUTING.md:

## Compilaciones de vista previa
Agrega la etiqueta `needs-preview` cuando QA o diseño necesita una compilación de dispositivo.
**No** agregues para cambios solo de copia o solo de prueba.

OTA en Canal de Vista Previa

Después de que existe el binario de vista previa, los fixes de JS pueden enviarse sin reconstruir:

eas update --channel preview --message "PR-${{ github.event.pull_request.number }}"

El binario de vista previa debe coincidir con runtimeVersion - Política de Versión en Tiempo de Ejecución
Comenta en el PR cuando llega OTA para que QA actualice el bundle
Los cambios nativos aún necesitan una nueva compilación de vista previa

Emparejar con Maestro Smoke

Cuando cambia la navegación, ejecuta un flujo Maestro delgado en build_id de vista previa antes de fusionar:

  maestro_smoke:
    needs: [build_preview]
    type: maestro
    params:
      build_id: ${{ needs.build_preview.outputs.build_id }}
      flow_path: [".maestro/smoke.yml"]

Falla la verificación de PR si smoke falla - opcional pero valioso para refactores de enrutamiento
Mantén smoke a 3-5 pasos - Maestro E2E

Errores Comunes

Vista previa en cada commit - Agotamiento de créditos de EAS a mediados de sprint. Solución: Puerta de etiqueta + cancelación de concurrencia.
Vista previa de iOS sin dispositivos registrados - La compilación ad hoc no se instala en ningún lugar. Solución: Mantén la lista de dispositivos en Apple Developer portal o usa perfil de simulador para diseñadores.
QA prueba Expo Go - El Bundle ID y los módulos nativos difieren de la compilación de vista previa. Solución: Siempre distribuye el enlace del artefacto de EAS.
Comentario de PR obsoleto - Enlace de instalación antiguo después de rebase. Solución: Edita el comentario o publica un nuevo comentario por compilación; incluye github.sha en el cuerpo.
Credenciales de producción en perfil de vista previa - Firma de tienda accidental en rama de característica. Solución: Separa el perfil preview sin claves de producción autoIncrement.
Permiso pull-requests: write faltante - El paso de comentario falla silenciosamente o da errores. Solución: Agrega el bloque permissions en el flujo de trabajo.

Alternativas

Alternativa	Usar Cuando	No Usar Cuando
QR de distribución interna de EAS	Predeterminado para QA de dispositivo	Necesitas lanzamiento gradual de pista interna de Play
`eas update` en canal de vista previa	Ajustes de PR solo JS	Se agregó nuevo módulo nativo
TestFlight externo + número de PR	Equipo enfocado en iOS ya en ASC	Se necesita retroalimentación rápida de APK de Android
Solo pruebas de captura de pantalla	Diseño/copia pura	Gestos, cámara, háptica

Preguntas Frecuentes

¿Cómo instala QA en Android?

Abre el enlace de página de compilación de EAS del comentario de PR → escanea el código QR → instala el APK. Habilita "instalar aplicaciones desconocidas" para el navegador si se te pide.

¿Puedo compilar iOS y Android en un trabajo de PR?

eas build --profile preview --platform all --non-interactive

Cuesta dos compilaciones; comenta ambos enlaces o compila solo Android para obtener retroalimentación más rápida.

¿Cómo obtienen los diseñadores vista previa de iOS sin UDIDs?

Usa el perfil preview-simulator - descarga la compilación del simulador; el diseñador ejecuta en el simulador Xcode.

¿Debería vista previa usar una API diferente?

Establece env.API_URL en el perfil de vista previa en staging - nunca apuntes compilaciones de vista previa a APIs de escritura de producción.

Relacionado

GitHub Actions + EAS - secretos y expo-github-action
EAS Workflows - elementos de lista de verificación de nivel de vista previa
Distribución Interna - pistas ad hoc y empresariales
Perfiles de Compilación y Sabores - vista previa vs producción
Conceptos Básicos de Pruebas Móviles - qué complementan las vistas previas
Maestro E2E - smoke en preview build_id
Conceptos Básicos de CI/CD Móvil - verificaciones de PR vs compilaciones de vista previa

Versiones de Stack: Esta página fue escrita para React 19.2.3, React Native 0.86.0, y Expo SDK 57 (expo ~57.0.4).

Compilaciones de Vista Previa en PRs

Buscar en la documentación

Compilaciones de Vista Previa en PRs