Personalizzare lo spazio di lavoro di Firebase Studio

Firebase Studio ti consente di personalizzare la tua area di lavoro in base alle esigenze specifiche del tuo progetto definendo un unico file di configurazione .idx/dev.nix che descrive:

  • Gli strumenti di sistema che devi essere in grado di eseguire (ad esempio dal terminale), come compilatori o altri file binari.
  • Le estensioni che devi installare (ad esempio il supporto del linguaggio di programmazione).
  • Come devono essere visualizzate le anteprime dell'app (ad esempio, i comandi per eseguire il server web).
  • Variabili di ambiente globali disponibili per i server locali in esecuzione nello spazio di lavoro.

Consulta la documentazione di riferimento di dev.nix per una descrizione completa delle funzionalità disponibili.

Nix e Firebase Studio

Firebase Studio utilizza Nix per definire la configurazione dell'ambiente per ogni area di lavoro. Nello specifico, Firebase Studio utilizza:

  • Il linguaggio di programmazione Nix per descrivere gli ambienti di lavoro. Nix è un linguaggio di programmazione funzionale. Gli attributi e le librerie di pacchetti che puoi definire nel dev.nix file rispettano la sintassi dell'attributo Nix.

  • Il gestore dei pacchetti Nix per gestire gli strumenti di sistema disponibili per la tua area di lavoro. È simile ai gestori di pacchetti specifici per il sistema operativo, come APT (apt e apt-get), Homebrew (brew) e dpkg.

Poiché gli ambienti Nix sono riproducibili e dichiarativi, nel contesto di Firebase Studio, significa che puoi condividere il file di configurazione Nix all'interno del tuo repository Git per assicurarti che tutti coloro che lavorano al tuo progetto abbiano la stessa configurazione dell'ambiente.

Un esempio di base

L'esempio seguente mostra una configurazione di base dell'ambiente che abilita le anteprime:

{ 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";
      };
    };
  };
}

Aggiungere strumenti di sistema

Per aggiungere strumenti di sistema alla tua area di lavoro, come compilatori o programmi CLI per i servizi cloud, individua l'ID pacchetto univoco nel registry dei pacchetti Nix e aggiungilo all'oggetto packages del file dev.nix, anteponendo il prefisso "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
  ];
  ...
}

Questo è diverso da come in genere potresti installare i pacchetti di sistema utilizzando gestori dei pacchetti specifici per il sistema operativo come APT (apt e apt-get), Homebrew (brew) e dpkg. Descrivere in modo dichiarativo esattamente quali pacchetti di sistema sono necessari significa che gli spazi di lavoro Firebase Studio sono più facili da condividere e riprodurre.

Utilizzare i binari del nodo locale

Come sulla tua macchina locale, i binari relativi ai pacchetti Node installati localmente (ad esempio i pacchetti definiti in package.json) possono essere eseguiti in un riquadro del terminale richiamandoli con il comando npx.

Per comodità, se ti trovi in una directory con una cartella node_modules (ad esempio la directory principale di un progetto web), i binari installati localmente possono essere richiamati direttamente, senza il prefisso npx.

Aggiungere componenti gcloud

Una configurazione predefinita della CLI gcloud per Google Cloud è disponibile per tutte le aree di lavoro Firebase Studio.

Se hai bisogno di componenti aggiuntivi, puoi aggiungerli al file dev.nix:

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

Aggiungere estensioni IDE

Puoi installare le estensioni in Firebase Studio utilizzando il registry delle estensioni OpenVSX in due modi:

  • Utilizza il riquadro Estensioni in Firebase Studio per scoprire e installare le estensioni. Questo approccio è ideale per le estensioni specifiche per utente, ad esempio:

    • Temi a colori personalizzati
    • Emulazione dell'editor, ad esempio VSCodeVim

  • Aggiungi estensioni al file dev.nix. Queste estensioni verranno installate automaticamente quando condividi la configurazione dello spazio di lavoro. Questo approccio è ideale per le estensioni specifiche del progetto, ad esempio:

    • Estensioni dei linguaggi di programmazione, inclusi i debugger specifici per il linguaggio
    • Estensioni ufficiali per i servizi cloud utilizzati nel progetto
    • Formattatori di codice

Per quest'ultimo approccio, puoi includere le estensioni IDE nel file dev.nix trovandovi l'ID estensione completo (del tipo <publisher>.<id>) e aggiungendolo all'oggetto idx.extensions come segue:

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

Aggiungere servizi comuni

Firebase Studio offre anche una configurazione semplificata per i servizi comuni di cui potresti aver bisogno durante lo sviluppo, tra cui:

  • Container
    • Docker (services.docker.*)
  • Messaggigevingi
    • Emulatore Pub/Sub (services.pubsub.*)
  • Database
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

Per informazioni dettagliate sull'attivazione di questi servizi nello spazio di lavoro, consulta le services.* parti del documento di riferimento dev.nix.

Personalizzare le anteprime

Per informazioni dettagliate su come personalizzare le anteprime delle app, consulta Anteprima dell'app.

Impostare l'icona della tua area di lavoro

Puoi scegliere un'icona personalizzata per lo spazio di lavoro inserendo un file PNG denominato icon.png all'interno della directory .idx allo stesso livello del file dev.nix. Firebase Studio utilizzerà questa icona per rappresentare il tuo spazio di lavoro nella dashboard.

Poiché questo file può essere sottoposto a controllo nel sistema di controllo del codice sorgente (ad esempio Git), è un buon modo per aiutare tutti coloro che lavorano al progetto a visualizzare la stessa icona del progetto quando utilizzano Firebase Studio. Poiché il file può variare in base ai rami Git, puoi utilizzare questa icona per distinguere visivamente gli spazi di lavoro delle app beta e di produzione e per altri scopi.

Trasformare le personalizzazioni in un modello

Per trasformare la configurazione dell'ambiente in un "ambiente di partenza" che chiunque può utilizzare per creare nuovi progetti, consulta la documentazione relativa alla creazione di modelli personalizzati.

Esplorare tutte le opzioni di personalizzazione

Consulta la documentazione di riferimento dev.nix per una descrizione dettagliata dello schema di configurazione dell'ambiente.

Passaggi successivi