Prévisualiser votre application

Project IDX vous permet de prévisualiser votre travail en affichant une vue en direct de votre application avec votre éditeur de code. Les aperçus Web IDX affichent un frame intégré (iFrame) du serveur Web de l'application et un émulateur Android basé dans le cloud.

Activer et configurer votre environnement d'aperçu

Pour prévisualiser votre application dans votre espace de travail, vous devez configurer votre environnement d'aperçu.

  1. Activez les aperçus dans votre fichier de configuration .idx/dev.nix. IDX génère automatiquement ce fichier lorsque vous créez un espace de travail et inclut tous les environnements d'aperçu applicables en fonction du modèle que vous sélectionnez. Si le fichier ne se trouve pas dans votre dépôt de code IDX, créez-le. Définissez l'attribut idx.previews sur true et ajoutez les attributs de configuration, comme indiqué dans l'exemple suivant:

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

    Pour obtenir la liste complète des attributs Nix dans IDX, consultez Nix + IDX.

  2. Recompilez votre environnement:

    • Exécutez la commande Project IDX: Hard restart (ID de projet : redémarrage matériel) à partir de la palette de commandes (Cmd+Maj+P/Ctrl+Maj+P).
    • Cliquez sur Recompiler l'environnement dans la notification Configuration de l'environnement mise à jour.

    Lorsque vous recompilez l'environnement après avoir modifié votre fichier dev.nix, le panneau d'aperçu s'affiche dans votre espace de travail avec les onglets Android et Web, selon ce que vous avez activé. Toutefois, vous devrez peut-être attendre un certain temps que l'environnement soit recréé. Essayez de fermer l'espace de travail, puis de le rouvrir à partir du tableau de bord IDX.

Utiliser les aperçus d'application

IDX propose des aperçus Web sur les émulateurs Chrome et Android (sur les espaces de travail Flutter) qui installent votre application dans l'environnement d'aperçu. Vous pouvez ainsi la tester entièrement de bout en bout, directement depuis votre espace de travail.

Actualiser les aperçus pour le Web et Android

IDX se connecte aux fonctionnalités de hot reload des frameworks sous-jacents (comme npm run start et flutter hot-reload) pour vous offrir une boucle de développement interne étroite. Cette section couvre les différents types d'actualisations pour vous aider à déterminer si le comportement par défaut sur IDX ne fonctionne pas correctement pour votre cas d'utilisation.

  • Actualisation à chaud automatique: les actualisations à chaud sont automatiquement effectuées lorsque vous enregistrez un fichier. Parfois appelé remplacement de module à chaud (ou HMR), un hot reload met à jour votre application sans actualiser la page (pour les applications Web), ou sans redémarrer ni réinstaller l'application (pour les émulateurs). Cette approche est idéale pour conserver l'état actif de votre application, mais peut parfois ne pas fonctionner comme prévu.

  • Manual Full Reload (Actualisation complète manuelle) : cette option équivaut à une actualisation de page (pour les applications Web) ou au redémarrage de l'application (pour les émulateurs). Nous vous recommandons d'effectuer une actualisation complète pour capturer les modifications importantes de votre code source, par exemple lors de la refactorisation de grands blocs de code.

  • Redémarrage manuel manuel: cette option entraîne un redémarrage complet du système d'aperçu IDX, ce qui inclut l'arrêt et le redémarrage du serveur Web de votre application.

Toutes les options d'actualisation sont disponibles à l'aide de la barre d'outils d'aperçu ou de la palette de commandes (Cmd+Maj+P sur Mac ou Ctrl+Maj+P sous ChromeOS, Windows ou Linux), dans la catégorie IDX.

Pour utiliser la barre d'outils d'aperçu, procédez comme suit:

  1. Cliquez sur l'icône Actualiser pour actualiser la page. Cela force une actualisation complète. Pour un autre type d'actualisation, cliquez sur la flèche à côté de l'icône d'actualisation pour développer le menu.

  2. Sélectionnez l'option d'actualisation souhaitée dans le menu: Hot Reload (Actualisation à chaud), Full Reload (Recharge complète) ou Hard Restart (Redémarrage à chaud).

    La barre d'outils d'aperçu se trouve en haut du panneau d'aperçu

Configurer l'enregistrement automatique et le hot reload

Par défaut, IDX enregistre automatiquement votre travail une seconde après que vous cessez de saisir du texte, ce qui déclenche des actualisations à chaud automatiques. Si vous souhaitez qu'IDX enregistre votre travail à un intervalle différent, modifiez le paramètre d'enregistrement automatique. Vous pouvez également désactiver l'enregistrement automatique.

Configurer l'enregistrement automatique

  1. Ouvrez le projet IDX.
  2. Cliquez sur l'icône Paramètres. La fenêtre "Paramètres" s'affiche.
  3. Recherchez Files: Auto Save (Fichiers : enregistrement automatique) et vérifiez que le champ est défini sur "afterDelay".
  4. Recherchez Files: Auto Save Delay (Fichiers : Délai d'enregistrement automatique). Le champ "Auto Save Delay" (Délai d'enregistrement automatique) s'affiche.
  5. Saisissez un nouvel intervalle de délai d'enregistrement automatique, exprimé en millisecondes. Les modifications apportées à votre travail sont désormais automatiquement enregistrées en fonction du nouveau paramètre de délai d'enregistrement automatique.

Désactiver l'enregistrement automatique

  1. Ouvrez le projet IDX.
  2. Cliquez sur l'icône Paramètres. La fenêtre "Paramètres" s'affiche.
  3. Recherchez Fichiers: enregistrement automatique.
  4. Cliquez sur le menu déroulant et sélectionnez Désactiver. L'enregistrement automatique est désormais désactivé.