Personnaliser votre espace de travail Firebase Studio

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

  • Les outils système que vous devez 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)
  • Comment les aperçus de votre 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.

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

Nix et Firebase Studio

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

  • 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 fichier dev.nix suivent la syntaxe de l'ensemble d'attributs Nix.

  • Le gestionnaire de paquets Nix pour gérer les outils système disponibles dans votre espace de travail. Cela ressemble aux gestionnaires de paquets spécifiques à l'OS tels que 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 membres 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 d'activer 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 de paquets Nix et ajoutez-le à l'objet packages de votre fichier dev.nix, en ajoutant le préfixe "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 diffère de la façon dont vous installez généralement des paquets système à l'aide de gestionnaires de paquets spécifiques à l'OS, tels que APT (apt et apt-get), Homebrew (brew) et dpkg. En décrivant de manière déclarative exactement les packages système requis, les espaces de travail Firebase Studio sont plus faciles à partager et à reproduire.

Utiliser des binaires de nœud locaux

Tout comme sur votre ordinateur local, les binaires associés aux paquets node installés localement (par exemple, les paquets définis dans votre package.json) peuvent être exécutés dans un panneau de terminal en les invoquant avec la commande npx.

Pour plus de commodité, si vous vous trouvez dans un répertoire contenant un dossier node_modules (par exemple, 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'extension OpenVSX de deux manières:

  • Utilisez le panneau Extensions dans Firebase Studio pour découvrir et installer des extensions. Cette approche est particulièrement adaptée aux 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 la plus adaptée aux extensions spécifiques au projet, par exemple:

    • Extensions de langage de programmation, y compris des débogueurs spécifiques au 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 (de la forme <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 aurez peut-être besoin pendant le développement, y compris les suivants:

  • Conteneurs
    • Docker (services.docker.*)
  • Messaging
    • É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 dev.nix.

Personnaliser les aperçus

Pour savoir comment personnaliser les aperçus de votre application, consultez la section 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 ajouté au contrôle des sources (tel que Git), il s'agit d'un bon moyen d'aider tous les collaborateurs à voir la même icône pour votre projet lorsqu'ils utilisent Firebase Studio. Étant donné que le fichier peut varier d'une branche Git à l'autre, vous pouvez utiliser cette icône pour distinguer visuellement les espaces de travail d'application bêta et de production, et à d'autres fins.

Convertir vos personnalisations en modèle

Pour transformer votre configuration d'environnement en "environnement de démarrage" que n'importe qui peut utiliser pour créer des projets, consultez la documentation sur la création de 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.

Étapes suivantes