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 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 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: Redémarrage matériel à 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), une actualisation à 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 actuel de votre application, mais elle peut parfois ne pas fonctionner comme prévu.

  • Actualisation complète manuelle: cette option équivaut à actualiser la page (pour les applications Web) ou à redémarrer l'application (pour les émulateurs). Nous vous recommandons d'effectuer une actualisation complète pour capturer les modifications importantes apportées à votre code source, par exemple lorsque vous refactorisez de grands blocs de code.

  • Manual Hard Restart (Redémarrage manuel manuel) : cette option effectue un redémarrage complet du système de prévisualisation 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 sur 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 reload 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 de rechargement pour développer le menu.

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

    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 sur le Web de votre application avec d'autres utilisateurs pour obtenir des commentaires en activant l'accès, puis en partageant le lien direct vers l'aperçu:

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

    Aperçu du menu de partage

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

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

    • Option B Pour partager votre espace de travail uniquement avec les personnes auxquelles vous souhaitez accorder l'accès, sélectionnez 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 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 Files: Auto Save (Fichiers : enregistrement automatique).
  4. Cliquez sur le menu déroulant et sélectionnez Désactiver. L'enregistrement automatique est maintenant désactivé.