Prévisualiser votre application

Project IDX vous permet d'afficher un aperçu de votre travail en affichant une vue en direct de votre application à côté de votre éditeur de code. Les aperçus Web IDX affichent un frame intégré (iFrame) du serveur Web de l'application et d'un émulateur Android cloud.

Activer et configurer votre environnement Preview

Pour prévisualiser votre application dans votre espace de travail, vous devez configurer votre environnement de prévisualisation.

  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 figure pas dans votre dépôt de code IDX, créez-le. Définissez l'attribut idx.previews sur true et ajoutez des attributs de configuration, comme illustré 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";
        # Optionally, specify a directory that contains your web app
        # cwd = "app/client";
      };
      # 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. Recréez votre environnement:

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

    Lorsque vous reconstruisez l'environnement après avoir modifié votre fichier dev.nix, le panneau d'aperçu s'affiche dans votre espace de travail et affiche les onglets Android et Web, en fonction de ce que vous avez activé. Toutefois, vous devrez peut-être patienter un certain temps pour que l'environnement soit reconstruit. Essayez de fermer l'espace de travail, puis de le rouvrir depuis le 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 de prévisualisation. 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 s'accroche aux fonctionnalités de rechargement à chaud des frameworks sous-jacents (comme npm run start et flutter hot-reload) pour vous offrir une boucle de développement interne étroite. Cette section décrit les différents types de rechargements pour vous aider à résoudre les problèmes si le comportement par défaut de l'IDX ne fonctionne pas bien pour votre cas d'utilisation.

  • Hot reload automatique: les hot reloads sont automatiquement effectués lorsque vous enregistrez un fichier. Parfois appelé Hot Module Replacement (ou HMR), un rechargement à chaud met à jour votre application sans recharger la page (pour les applications Web) ni redémarrer ni réinstaller l'application (pour les émulateurs). Cette approche est excellente pour préserver l'état en direct de votre application, mais elle peut parfois ne pas fonctionner comme prévu.

  • Actualisation complète manuelle: cette option équivaut à une actualisation de la page (pour les applications Web) ou à un redémarrage de l'application (pour les émulateurs). Nous vous recommandons d'utiliser un rechargement complet pour capturer les modifications importantes apportées à votre code source, par exemple lors du refactoring de grands blocs de code.

  • Redémarrage manuel: cette option redémarre complètement le système de prévisualisation d'IDX, ce qui inclut l'arrêt et le redémarrage du serveur Web de votre application.

Toutes les options de rechargement sont disponibles dans la barre d'outils d'aperçu ou dans la palette de commandes (Cmd+Maj+P sur Mac ou Ctrl+Maj+P sur ChromeOS, Windows ou Linux), sous 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 un rechargement complet. Pour un autre type d'actualisation, cliquez sur la flèche à côté de l'icône de rechargement pour développer le menu.

  2. Sélectionnez l'option d'actualisation souhaitée dans le menu: Actualisation à chaud, Actualisation complète ou Redémarrage à froid.

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

Partager votre aperçu Web avec d'autres utilisateurs

Vous pouvez partager l'aperçu Web de votre application avec d'autres utilisateurs pour obtenir leurs commentaires. Pour ce faire, activez l'accès, puis partagez le lien direct vers l'aperçu:

  1. Dans la barre d'outils d'aperçu Web, cliquez sur l'icône image d'une icône de lien Partager le lien d'aperçu à droite de la barre d'adresse pour ouvrir le menu de partage.

    Prévisualiser le menu de partage

  2. Autorisez d'autres utilisateurs à accéder à votre espace de travail en utilisant l'une des options suivantes:

    • Option A: rendre l'aperçu de votre espace de travail accessible au public en sélectionnant Rendre l'aperçu public. Cela permet à tous les internautes d'accéder au serveur de prévisualisation en cours d'exécution de votre espace de travail tant que votre espace de travail est actif et jusqu'à ce que vous désactiviez l'accès public.

    • Option B Partagez votre espace de travail uniquement avec les personnes auxquelles vous souhaitez accorder l'accès en sélectionnant Gérer l'accès à l'espace de travail.

  3. Sélectionnez Copier l'URL de l'aperçu pour copier un lien direct vers l'aperçu de l'espace de travail, que vous pourrez ensuite envoyer aux personnes auprès desquelles vous souhaitez obtenir des commentaires.

Configurer l'enregistrement automatique et le rechargement à chaud

Par défaut, IDX enregistre automatiquement votre travail une seconde après que vous avez cessé de taper, ce qui déclenche des rechargements à chaud automatiques. Si vous souhaitez que IDX enregistre votre travail à un autre intervalle, modifiez le paramètre d'enregistrement automatique. Vous pouvez également désactiver l'enregistrement automatique.

Configurer l'enregistrement automatique

  1. Ouvrez Project 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 Fichiers: délai d'enregistrement automatique. Le champ "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 enregistrées automatiquement en fonction du nouveau paramètre de délai d'enregistrement automatique.

Désactiver l'enregistrement automatique

  1. Ouvrez Project 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, puis sélectionnez Désactivé. L'enregistrement automatique est désormais désactivé.