Obtén una vista previa de la aplicación

Project IDX te permite obtener una vista previa de tu trabajo, ya que renderiza una visualización en vivo de tu aplicación junto con tu editor de código. Las vistas previas en la Web de IDX renderizan un marco intercalado (iFrame) del servidor web de la app y un emulador de Android basado en la nube.

Habilita y configura tu entorno de vista previa

Para obtener una vista previa de la app en tu lugar de trabajo, debes configurar el entorno de vista previa.

  1. Habilita las vistas previas en el archivo de configuración .idx/dev.nix. IDX genera automáticamente este archivo cuando creas un lugar de trabajo nuevo y, además, incluye los entornos de vista previa aplicables según la plantilla que selecciones. Si el archivo no está en tu repositorio de código IDX, créalo. Establece el atributo idx.previews en true y agrega atributos de configuración, como se muestra en el siguiente ejemplo:

    { pkgs, ... }: {

# NOTE: This is an excerpt of a complete Nix configuration example.
# For more information about the dev.nix file in IDX, see
# https://developers.google.com/idx/guides/customize-idx-env

# Enable previews and customize configuration
idx.previews = {
  enable = true;
  previews = {
    # The following object sets web previews
    web = {
      command = [
        "npm"
        "run"
        "start"
        "--"
        "--port"
        "$PORT"
        "--host"
        "0.0.0.0"
        "--disable-host-check"
      ];
      manager = "web";
    };
    # The following object sets Android previews
    # Note that this is supported only on FLutter workspaces

    android = {
      manager = "flutter";
    };
  };
};

    Para ver una lista completa de los atributos Nix en IDX, consulta Nix + IDX.

  2. Vuelve a compilar tu entorno:

    • Ejecuta el comando Project IDX: Hard reinicio desde la paleta de comandos (Cmd + Mayús + P/Ctrl + Mayús + P).
    • Haz clic en Volver a compilar entorno en la notificación Se actualizó la configuración del entorno.

    Cuando vuelvas a compilar el entorno después de modificar el archivo dev.nix, aparecerá el panel de vista previa en el lugar de trabajo con las pestañas Android y Web, según lo que hayas habilitado. Sin embargo, es posible que debas esperar un tiempo para que el entorno se vuelva a compilar. Cierra el lugar de trabajo y vuelve a abrirlo desde el panel de IDX.

Cómo usar las vistas previas de la app

IDX ofrece vistas previas en la Web en los emuladores de Chrome y Android (en lugares de trabajo de Flutter) que instalan tu app en el entorno de vista previa para que puedas probarla por completo de extremo a extremo, directamente desde tu lugar de trabajo.

Actualizar vistas previas para la Web y Android

IDX se conecta a las funciones de recarga en caliente de los frameworks subyacentes (como npm run start y flutter hot-reload) para brindarte un bucle de desarrollo interno estricto. En esta sección, se abordan los diferentes tipos de recargas para ayudarte a solucionar problemas si el comportamiento predeterminado en IDX no funciona bien en tu caso de uso.

  • Recarga en caliente automática: Las recargas en caliente se realizan automáticamente cuando guardas un archivo. Una recarga en caliente, que a menudo se conoce como reemplazo activo de módulo (o HMR), actualiza tu app sin volver a cargar la página (en el caso de las apps web) o sin reiniciarla ni reinstalarla (para emuladores). Este enfoque es excelente para preservar el estado activo de tu app, pero a veces puede que no funcione como debería.

  • Recarga completa manual: Esta opción equivale a actualizar la página (en el caso de las apps web) o reiniciar la app (en el caso de los emuladores). Recomendamos usar una recarga completa para capturar cambios significativos en el código fuente, como cuando se refactorizan grandes fragmentos de código.

  • Reinicio forzado manual: Esta opción realiza un reinicio completo del sistema de vista previa de IDX, que incluye detener y reiniciar el servidor web de la app.

Todas las opciones de recarga están disponibles mediante la barra de herramientas de vista previa o la paleta de comandos (Cmd + Mayúsculas + P en Mac o Ctrl + Mayúsculas + P en ChromeOS, Windows o Linux), en la categoría IDX.

Para usar la barra de herramientas de vista previa, sigue estos pasos:

  1. Haz clic en el ícono Volver a cargar para actualizar la página. De esta manera, se fuerza una recarga completa. Si deseas usar otro tipo de actualización, haz clic en la flecha junto al ícono de volver a cargar para expandir el menú.

  2. Selecciona la opción de actualización que desees en el menú: Volver a cargar en caliente, Volver a cargar completa o Reinicio duro.

    La barra de herramientas de vista previa se encuentra en la parte superior del panel de vista previa.

Configura el guardado automático y la recarga en caliente

De forma predeterminada, IDX guarda automáticamente tu trabajo un segundo después de que dejas de escribir, lo que activa las recargas en caliente automáticas. Si quieres que IDX guarde tu trabajo en intervalos diferentes, cambia la configuración de guardado automático. También puedes desactivar el guardado automático.

Configurar guardado automático

  1. Abre Project IDX.
  2. Luego, haz clic en el ícono de configuración. Aparecerá la ventana Configuración.
  3. Busca Files: Auto Save y verifica que el campo esté configurado como `afterDelay`.
  4. Busca Archivos: Retraso de guardado automático. Aparecerá el campo Retraso de guardado automático.
  5. Ingresa un nuevo intervalo de demora para el guardado automático, expresado en milisegundos. Los cambios en tu trabajo ahora se guardan automáticamente según la nueva configuración de demora en el guardado automático.

Desactivar el guardado automático

  1. Abre Project IDX.
  2. Luego, haz clic en el ícono de configuración. Aparecerá la ventana Configuración.
  3. Busca Archivos: Guardado automático.
  4. Haz clic en el menú desplegable y selecciona Desactivar. Ahora, el guardado automático está inhabilitado.