Personalizzare lo spazio di lavoro di Firebase Studio

Firebase Studio ti consente di personalizzare il tuo workspace in base alle esigenze specifiche del tuo progetto definendo un singolo file di configurazione .idx/dev.nix che descrive:

  • Gli strumenti di sistema che devi poter eseguire (ad esempio dal terminale), come compilatori o altri file binari.
  • Le estensioni che devi installare (ad esempio, il supporto per i linguaggi di programmazione).
  • Come devono essere visualizzate le anteprime delle app (ad esempio, i comandi per eseguire il server web).
  • Le variabili di ambiente globali disponibili per i server locali in esecuzione nel workspace.

Per una descrizione completa di ciò che è disponibile, consulta le informazioni di riferimento su dev.nix.

Nix e Firebase Studio

Firebase Studio utilizza Nix per definire la configurazione dell'ambiente per ogni workspace. In particolare, Firebase Studio utilizza:

  • Il linguaggio di programmazione Nix per descrivere gli ambienti del workspace. Nix è un linguaggio di programmazione funzionale. Gli attributi e le librerie di pacchetti che puoi definire nel dev.nix file seguono la sintassi del set di attributi Nix.

  • Il gestore di pacchetti Nix per gestire gli strumenti di sistema disponibili per il workspace. È simile ai gestori di pacchetti specifici del 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, ciò significa che puoi condividere il file di configurazione Nix come parte del repository Git per garantire 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 consente le anteprime:

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

Aggiungere strumenti di sistema

Per aggiungere strumenti di sistema al workspace, come compilatori o programmi CLI per i servizi cloud, trova l'ID pacchetto univoco nel registro dei pacchetti Nix e aggiungilo all' dev.nix oggetto packages del file, con il prefisso `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
  ];
  ...
}

Questo è diverso dal modo in cui in genere installi i pacchetti di sistema utilizzando gestori di pacchetti specifici del sistema operativo come APT (apt e apt-get), Homebrew (brew) e dpkg. La descrizione dichiarativa dei pacchetti di sistema necessari semplifica la condivisione e la riproduzione dei workspace Firebase Studio.

Utilizzare i file binari dei nodi locali

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

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

Aggiungere componenti gcloud

Una configurazione predefinita della gcloud CLI per Google Cloud è disponibile per tutti i Firebase Studio workspace.

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 OpenVSX registro delle estensioni in due modi:

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

    • Temi cromatici personalizzati
    • Emulazione dell'editor, ad esempio VSCodeVim

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

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

Per il secondo approccio, puoi includere le estensioni IDE nel file dev.nix trovando l'ID estensione completo (nel formato <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.*)
  • Messaggistica
    • 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 nel workspace, consulta le services.* sezioni delle dev.nix informazioni di riferimento.

Personalizzare le anteprime

Per informazioni dettagliate su come personalizzare le anteprime delle app, consulta Visualizzare l'anteprima dell' app.

Impostare l'icona del workspace

Puoi scegliere un'icona personalizzata per il workspace inserendo un file PNG denominato icon.png nella directory .idx allo stesso livello del file dev.nix. Firebase Studio utilizzerà questa icona per rappresentare il workspace nella dashboard.

Poiché questo file può essere archiviato nel controllo del codice sorgente (ad esempio Git), è un buon modo per aiutare tutti coloro che lavorano al tuo progetto a visualizzare la stessa icona per il tuo progetto quando utilizzano Firebase Studio. Poiché il file può variare tra i rami Git, puoi utilizzare questa icona per distinguere visivamente i workspace 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 avvio" che chiunque può utilizzare per creare nuovi progetti, consulta la documentazione relativa alla creazione di modelli personalizzati.

Esplorare tutte le opzioni di personalizzazione

Consulta le informazioni di riferimento su dev.nix per una descrizione dettagliata dello schema di configurazione dell'ambiente.

Scaricare i file

Per scaricare i file come file ZIP:

  • Fai clic con il tasto destro del mouse su una directory qualsiasi nel riquadro Esplora e seleziona Comprimi e scarica.

Per scaricare tutti i contenuti della directory del progetto:

  1. Seleziona File > Apri cartella.

  2. Accetta la directory predefinita /home/user.

  3. Dopo aver caricato i file, fai clic con il tasto destro del mouse sulla directory di lavoro e seleziona Comprimi e scarica. Se utilizzi App Prototyping agent, la directory di lavoro sarà studio. Se utilizzi un modello o un progetto caricato, questo sarà il nome del progetto.

  4. Quando ti viene chiesto di ricompilare l'ambiente, fai clic su Annulla.

  5. Al termine del download, riapri la directory di lavoro dal menu File per tornare al workspace.

Passaggi successivi