Visualizza l'anteprima dell'app

Project IDX ti consente di visualizzare l'anteprima del tuo lavoro visualizzando una visione in diretta dell'applicazione insieme all'editor di codice. Le anteprime web IDX mostrano un frame incorporato (iFrame) del server web dell'app e un emulatore Android basato su cloud.

Abilita e configura l'ambiente di anteprima

Per visualizzare l'anteprima dell'app nell'area di lavoro, devi configurare l'ambiente di anteprima.

  1. Attiva le anteprime nel file di configurazione .idx/dev.nix. IDX genera automaticamente questo file quando crei una nuova area di lavoro e include qualsiasi ambiente di anteprima applicabile in base al modello selezionato. Se il file non si trova nel repository di codice IDX, crealo. Imposta l'attributo idx.previews su true e aggiungi gli attributi di configurazione, come illustrato nell'esempio seguente:

    { 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";
    };
  };
};

    Per un elenco completo degli attributi di Nix in IDX, vedi Nix + IDX.

  2. Ricrea l'ambiente:

    • Esegui il comando Project IDX: riavvio a freddo dalla tavolozza dei comandi (Cmd+Maiusc+P/Ctrl+Maiusc+P).
    • Fai clic su Ricrea l'ambiente nella notifica Configurazione dell'ambiente aggiornata.

    Quando ricrei l'ambiente dopo aver modificato il file dev.nix, nell'area di lavoro viene visualizzato il riquadro di anteprima che mostra le schede Android e Web, a seconda di ciò che hai attivato. Tuttavia, potresti dover attendere un po' di tempo prima che la creazione dell'ambiente venga ricreata. Prova a chiudere l'area di lavoro e a riaprirla dalla dashboard IDX.

Utilizzare le anteprime delle app

IDX offre anteprime web su emulatori di Chrome e Android (su spazi di lavoro Flutter) che installano la tua app nell'ambiente di anteprima, in modo che tu possa testarla completamente, end-to-end, direttamente dalla tua area di lavoro.

Aggiorna le anteprime per web e Android

IDX si aggancia alle funzionalità di ricarica a caldo dei framework sottostanti (come npm run start e flutter hot-reload) per darti un ciclo interno di sviluppo stretto. Questa sezione illustra i diversi tipi di ricaricamenti per aiutarti a risolvere i problemi se il comportamento predefinito su IDX non funziona bene per il tuo caso d'uso.

  • Ricarica a caldo automatico: i ricaricamenti a caldo vengono eseguiti automaticamente quando salvi un file. Anche nota come Hot Module Sostituzione (o HMR), una ricarica a caldo aggiorna l'app senza ricaricare la pagina (per le app web) o senza riavviare o reinstallare l'app (per gli emulatori). Questo approccio è eccellente per mantenere lo stato attivo della tua app, ma a volte potrebbe non funzionare come previsto.

  • Ricarica completa manuale: questa opzione equivale a un aggiornamento di pagina (per le app web) o al riavvio di un'app (per gli emulatori). Ti consigliamo di eseguire un ricaricamento completo per acquisire modifiche significative al codice sorgente, ad esempio durante il refactoring di blocchi di codice di grandi dimensioni.

  • Riavvio manuale manuale: questa opzione esegue un riavvio completo del sistema di anteprima di IDX, che include l'arresto e il riavvio del server web dell'app.

Tutte le opzioni di ricaricamento sono disponibili utilizzando la barra degli strumenti dell'anteprima o la tavolozza dei comandi (Cmd+Maiusc+P su Mac o Ctrl+Maiusc+P su ChromeOS, Windows o Linux), nella categoria IDX.

Per utilizzare la barra degli strumenti di anteprima, procedi nel seguente modo:

  1. Fai clic sull'icona Ricarica per aggiornare la pagina. Questa operazione forza un ricaricamento completo. Per un tipo diverso di aggiornamento, fai clic sulla freccia accanto all'icona Ricarica per espandere il menu.

  2. Seleziona l'opzione di aggiornamento che vuoi dal menu: Ricarica a caldo, Ricarica completa o Riavvio rigido.

    La barra degli strumenti di anteprima si trova nella parte superiore del riquadro di anteprima

Configura salvataggio automatico e ricaricamento a caldo

Per impostazione predefinita, IDX salva automaticamente il tuo lavoro un secondo dopo che hai smesso di digitare, attivando ricaricamenti a caldo automatici. Se vuoi che IDX salvi il tuo lavoro a un intervallo diverso, modifica l'impostazione di salvataggio automatico. Puoi anche disattivare il salvataggio automatico.

Configura salvataggio automatico

  1. Apri il progetto IDX.
  2. Fai clic sull'icona Impostazioni. Viene visualizzata la finestra Impostazioni.
  3. Cerca File: salvataggio automatico e verifica che il campo sia impostato su "afterDelay".
  4. Cerca File: ritardo salvataggio automatico. Viene visualizzato il campo Ritardo salvataggio automatico.
  5. Inserisci un nuovo intervallo di ritardo del salvataggio automatico, espresso in millisecondi. Le modifiche al tuo lavoro vengono ora salvate automaticamente in base alla nuova impostazione del ritardo del salvataggio automatico.

Disattiva salvataggio automatico

  1. Apri il progetto IDX.
  2. Fai clic sull'icona Impostazioni. Viene visualizzata la finestra Impostazioni.
  3. Cerca File: salvataggio automatico.
  4. Fai clic sul menu a discesa e seleziona off. Il salvataggio automatico è ora disattivato.