Cette page a été traduite par l'API Cloud Translation.

Personnaliser votre espace de travail Firebase Studio

Firebase Studio vous permet d'adapter votre espace de travail aux besoins spécifiques de votre projet en définissant un seul fichier de configuration .idx/dev.nix qui décrit :

Les outils système dont vous avez besoin pour pouvoir exécuter (par exemple, à partir du terminal), tels que les compilateurs ou d'autres binaires.
Les extensions dont vous avez besoin (par exemple, la prise en charge des langages de programmation).
La façon dont vos aperçus d'application doivent s'afficher (par exemple, les commandes permettant d'exécuter votre serveur Web).
Variables d'environnement globales disponibles pour les serveurs locaux exécutés dans votre espace de travail.

Pour obtenir une description complète des éléments disponibles, consultez la documentation de référence sur dev.nix.

Nix et Firebase Studio

Firebase Studio utilise Nix pour définir la configuration de l'environnement de chaque espace de travail. Plus précisément, Firebase Studio utilise :

Le langage de programmation Nix pour décrire les environnements de l'espace de travail. Nix est un langage de programmation fonctionnel. Les attributs et les bibliothèques de packages que vous pouvez définir dans le fichier dev.nix suivent la syntaxe de l'ensemble d'attributs Nix.
Le gestionnaire de packages Nix pour gérer les outils système disponibles dans votre espace de travail. Cela s'apparente aux gestionnaires de packages spécifiques à l'OS, tels qu'APT (apt et apt-get), Homebrew (brew) et dpkg.

Étant donné que les environnements Nix sont reproductibles et déclaratifs, dans le contexte de Firebase Studio, cela signifie que vous pouvez partager votre fichier de configuration Nix dans votre dépôt Git pour vous assurer que tous les collaborateurs de votre projet disposent de la même configuration d'environnement.

Exemple de base

L'exemple suivant montre une configuration d'environnement de base permettant les aperçus :

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];

  # Sets environment variables in the workspace
  env = {
    SOME_ENV_VAR = "hello";
  };

  # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
  idx.extensions = [
    "angular.ng-template"
  ];

  # Enable previews and customize configuration
  idx.previews = {
    enable = true;
    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";
      };
    };
  };
}

Ajouter des outils système

Pour ajouter des outils système à votre espace de travail, tels que des compilateurs ou des programmes CLI pour les services cloud, recherchez l'ID de package unique dans le registre des packages Nix et ajoutez-le à l'objet packages du fichier dev.nix, en le préfixant avec "pkgs." :

{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];
  ...
}

Cette méthode est différente de celle que vous utilisez habituellement pour installer des packages système à l'aide de gestionnaires de packages spécifiques à l'OS, tels qu'APT (apt et apt-get), Homebrew (brew) et dpkg. Décrire de manière déclarative les packages système nécessaires signifie que les espaces de travail Firebase Studio sont plus faciles à partager et à reproduire.

Utiliser des binaires de nœud locaux

Comme sur votre ordinateur local, les binaires associés aux packages de nœuds installés localement (par exemple, les packages définis dans votre package.json) peuvent être exécutés dans un panneau de terminal en les appelant avec la commande npx.

Pour plus de commodité, si vous vous trouvez dans un répertoire avec un dossier node_modules (tel que le répertoire racine d'un projet Web), les binaires installés localement peuvent être appelés directement, sans le préfixe npx.

Ajouter des composants `gcloud`

Une configuration par défaut de la CLI gcloud pour Google Cloud est disponible pour tous les espaces de travail Firebase Studio.

Si vous avez besoin de composants supplémentaires, vous pouvez les ajouter à votre fichier dev.nix :

{ pkgs }: {
  packages = [
    ...
    (pkgs.google-cloud-sdk.withExtraComponents [
      pkgs.google-cloud-sdk.components.cloud-datastore-emulator
    ])
    ...
  ];
}

Ajouter des extensions IDE

Vous pouvez installer des extensions dans Firebase Studio à l'aide du registre d'extensions OpenVSX de deux manières :

Utilisez le panneau Extensions dans Firebase Studio pour découvrir et installer des extensions. Cette approche est idéale pour les extensions spécifiques à l'utilisateur, par exemple :
- Thèmes de couleurs personnalisés
- Émulation d'éditeur, comme VSCodeVim
Ajoutez des extensions à votre fichier dev.nix. Ces extensions seront installées automatiquement lorsque vous partagerez la configuration de votre espace de travail. Cette approche est idéale pour les extensions spécifiques à un projet, par exemple :
- Extensions de langage de programmation, y compris les débogueurs spécifiques à un langage
- Extensions officielles pour les services cloud utilisés dans votre projet
- Outils de mise en forme du code

Pour cette dernière approche, vous pouvez inclure des extensions d'IDE dans votre fichier dev.nix en recherchant l'ID d'extension complet (au format <publisher>.<id>) et en l'ajoutant à l'objet idx.extensions comme suit :

{ pkgs, ... }: {
  ...
  # Search for the extensions you want on https://open-vsx.org/ and use the format
  # "<publisher>.<id>"
  idx.extensions = [
    "angular.ng-template"
  ];
  ...
}

Ajouter des services communs

Firebase Studio propose également une configuration simplifiée pour les services courants dont vous pouvez avoir besoin pendant le développement, y compris :

Conteneurs
- Docker (services.docker.*)
Messagerie
- Émulateur Pub/Sub (services.pubsub.*)
Bases de données
- MySQL (services.mysql.*)
- Postgres (services.postgres.*)
- Redis (services.redis.*)
- Spanner (services.spanner.*)

Pour savoir comment activer ces services dans votre espace de travail, consultez les sections services.* de la documentation de référence sur dev.nix.

Personnaliser les aperçus

Pour savoir comment personnaliser les aperçus de votre application, consultez Prévisualiser votre application.

Définir l'icône de votre espace de travail

Vous pouvez choisir une icône personnalisée pour votre espace de travail en plaçant un fichier PNG nommé icon.png dans le répertoire .idx au même niveau que votre fichier dev.nix. Firebase Studio utilisera ensuite cette icône pour représenter votre espace de travail dans votre tableau de bord.

Étant donné que ce fichier peut être archivé dans le contrôle de code source (tel que Git), il s'agit d'un bon moyen d'aider tous ceux qui travaillent sur votre projet à voir la même icône pour votre projet lorsqu'ils utilisent Firebase Studio. Comme le fichier peut varier d'une branche Git à l'autre, vous pouvez utiliser cette icône pour distinguer visuellement les espaces de travail des applications bêta et de production, et à d'autres fins.

Transformer vos personnalisations en modèle

Pour transformer la configuration de votre environnement en "environnement de démarrage" que tout le monde peut utiliser pour créer des projets, consultez la documentation Créer des modèles personnalisés.

Découvrir toutes les options de personnalisation

Consultez la documentation de référence sur dev.nix pour obtenir une description détaillée du schéma de configuration de l'environnement.

Télécharger vos fichiers

Pour télécharger vos fichiers au format ZIP :

Effectuez un clic droit sur un répertoire dans le volet "Explorateur", puis sélectionnez Compresser et télécharger.

Pour télécharger tout le contenu de votre répertoire de projet :

Sélectionnez Fichier > Ouvrir le dossier.
Acceptez le répertoire /home/user par défaut.
Une fois les fichiers chargés, effectuez un clic droit sur votre répertoire de travail et sélectionnez Compresser et télécharger. Si vous utilisez App Prototyping agent, votre répertoire de travail sera studio. Si vous utilisez un modèle ou un projet importé, il s'agit du nom de votre projet.
Lorsque vous êtes invité à recréer l'environnement, cliquez sur Annuler.
Une fois le téléchargement terminé, rouvrez votre répertoire de travail à partir du menu Fichier pour revenir à votre espace de travail.