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 éléments suivants :

  • 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 que vous devez installer (par exemple, la prise en charge des langages de programmation).
  • La façon dont les aperçus de votre application doivent s'afficher (par exemple, les commandes permettant d'exécuter votre serveur Web).
  • Les variables d'environnement globales disponibles pour les serveurs locaux s'exécutant dans votre espace de travail.

Pour obtenir une description complète des éléments disponibles, consultez la documentation de référence sur dev.nixreference pour une description complète de ce qui est disponible.

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 les éléments suivants :

  • Le langage de programmation Nix pour décrire les environnements d'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 dev.nix fichier 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. Il est semblable aux gestionnaires de packages spécifiques à un système d'exploitation, 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 le cadre de 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 illustre une configuration d'environnement de base qui active les aperçus :

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-24.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 de packages Nix et ajoutez-le à votre dev.nix fichier's packages objet, précédé de `pkgs.:

{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-24.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 à un système d'exploitation, tels qu'APT (apt et apt-get), Homebrew (brew) et dpkg. En décrivant de manière déclarative les packages système nécessaires, 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 npx commande.

Pour plus de commodité, si vous vous trouvez dans un répertoire contenant 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 gcloud CLI pour Google Cloud est disponible pour tous les Firebase Studio espaces de travail.

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'extensionsOpenVSX de deux manières :

  • Utilisez le panneau Extensions de Firebase Studio pour découvrir et installer des extensions. Cette approche est idéale pour les extensions spécifiques à l'utilisateur, telles que :

    • Thèmes de couleurs personnalisés
    • Émulation d'éditeur, comme VSCodeVim

  • Ajoutez des extensions à votre fichier dev.nix. Ces extensions seront automatiquement installées lorsque vous partagerez la configuration de votre espace de travail. Cette approche est idéale pour les extensions spécifiques au projet, telles que :

    • Extensions de langage de programmation, y compris des débogueurs spécifiques à un langage
    • Extensions officielles pour les services cloud utilisés dans votre projet
    • Formatteurs de code

Pour la dernière approche, vous pouvez inclure des extensions IDE dans votre dev.nix fichier 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 courants

Firebase Studio propose également une configuration simplifiée pour les services courants dont vous pouvez avoir besoin lors du 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 services.* sections de la documentation de dev.nixréférence.

Personnaliser les aperçus

Pour savoir comment personnaliser les aperçus de votre application, consultez la section Afficher un aperçu de 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 des sources (tel que Git), il s'agit d'un bon moyen d'aider tous les collaborateurs de votre projet à voir la même icône pour votre projet lorsqu'ils utilisent Firebase Studio. De plus, 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, ainsi qu'à 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 de nouveaux projets, consultez la documentation Créer des modèles personnalisés.

Découvrir toutes les options de personnalisation

Consultez la dev.nix documentation de référence 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 n'importe quel répertoire dans le volet Explorateur, puis sélectionnez Compresser et télécharger.

Pour télécharger tous les éléments de votre répertoire de projet :

  1. Sélectionnez Fichier > Ouvrir un dossier.

  2. Acceptez le répertoire /home/user par défaut.

  3. Une fois les fichiers chargés, effectuez un clic droit sur votre répertoire de travail, puis sélectionnez Compresser et télécharger. Si vous utilisez le App Prototyping agent, votre répertoire de travail sera studio. Si vous utilisez un modèle ou un projet importé, il s'agira du nom de votre projet.

  4. Lorsque vous êtes invité à recréer l'environnement, cliquez sur Annuler.

  5. Une fois le téléchargement terminé, rouvrez votre répertoire de travail à partir du menu Fichier pour revenir à votre espace de travail.

Étapes suivantes