Dostosowywanie obszaru roboczego Firebase Studio

Firebase Studio umożliwia dostosowanie obszaru roboczego do potrzeb projektu, definiując jeden plik konfiguracji .idx/dev.nix, który opisuje:

  • narzędzia systemowe, które musisz mieć możliwość uruchomić (np. z Terminala), takie jak kompilatory lub inne pliki binarne;
  • Rozszerzenia, które musisz zainstalować (np. obsługa języka programowania).
  • Jak powinny wyglądać podglądy aplikacji (np. polecenia do uruchamiania serwera WWW).
  • Globalne zmienne środowiskowe dostępne dla serwerów lokalnych działających w Twojej przestrzeni roboczej.

Pełny opis dostępnych opcji znajdziesz w dokumentacji dev.nix.

Nix i Firebase Studio

Firebase Studio używa Nix do definiowania konfiguracji środowiska dla każdego obszaru roboczego. W szczególności Firebase Studio używa:

  • Język programowania Nix do opisywania środowisk Workspace. Nix to język programowania funkcyjnego. Atrybuty i biblioteki pakietów, które możesz zdefiniować w pliku dev.nix, są zgodne z syntaksą zbiór atrybutów Nix.

  • Menedżer pakietów Nix do zarządzania narzędziami systemowymi dostępnymi w Twojej przestrzeni roboczej. Jest to podobne do menedżerów pakietów dla poszczególnych systemów operacyjnych, takich jak APT (apt i apt-get), Homebrew (brew) i dpkg.

Ponieważ środowiska Nix są odtwarzalne i deklaratywnie w kontekście Firebase Studio, oznacza to, że możesz udostępnić plik konfiguracji Nix jako część repozytorium Git, aby zapewnić wszystkim osobom pracującym nad projektem tę samą konfigurację środowiska.

Podstawowy przykład

Ten przykład pokazuje podstawową konfigurację środowiska umożliwiającą wyświetlanie podglądów:

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

Dodawanie narzędzi systemowych

Aby dodać do obszaru roboczego narzędzia systemowe, takie jak kompilatory lub programy wiersza poleceń do usług w chmurze, znajdź unikalny identyfikator pakietu w rejestrze pakietów Nix i dodaj go do obiektu packages pliku dev.nix z przedrostkiem `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
  ];
  ...
}

Jest to inne podejście niż zwykła instalacja pakietów systemowych za pomocą menedżerów pakietów dla poszczególnych systemów operacyjnych, takich jak APT (apt i apt-get), Homebrew (brew) czy dpkg. Dzięki deklaratywnemu opisowi dokładnie określamy, które pakiety systemowe są potrzebne, co ułatwia udostępnianie i powielanie Firebase Studioworkspace.

Używanie binarnych plików węzła lokalnego

Podobnie jak na komputerze lokalnym, pliki binarne związane z zainstalowanymi lokalnie pakietami node (np. zdefiniowane w package.json) można uruchomić w panelu Terminal, wywołując je za pomocą polecenia npx.

Jeśli jesteś w katalogu z folderem node_modules (np. katalog główny projektu internetowego), możesz bezpośrednio wywołać zainstalowane lokalnie pliki binarne, bez prefiksu npx.

Dodawanie komponentów gcloud

Domyślna konfiguracja interfejsu wiersza poleceń gcloud dla Google Cloud jest dostępna dla wszystkich obszarów roboczych Firebase Studio.

Jeśli potrzebujesz dodatkowych komponentów, możesz je dodać do pliku dev.nix:

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

Dodawanie rozszerzeń IDE

Rozszerzenia możesz instalować w Firebase Studio za pomocą rejestru rozszerzeń OpenVSX na 2 sposoby:

  • Aby znaleźć i zainstalować rozszerzenia, użyj panelu Rozszerzenia w Firebase Studio. Takie podejście najlepiej sprawdza się w przypadku rozszerzeń związanych z konkretnym użytkownikiem, takich jak:

    • Niestandardowe motywy kolorystyczne
    • emulacja edytora, np. VSCodeVim;

  • Dodaj rozszerzenia do pliku dev.nix. Te rozszerzenia zostaną zainstalowane automatycznie, gdy udostępnisz konfigurację obszaru roboczego. Ta metoda jest najlepsza w przypadku rozszerzeń związanych z poszczególnymi projektami, takich jak:

    • rozszerzenia języków programowania, w tym debugery dla poszczególnych języków;
    • oficjalne rozszerzenia usług w chmurze używanych w projekcie.
    • Formatowanie kodu

W przypadku tego drugiego podejścia możesz uwzględnić rozszerzenia IDE w pliku dev.nix, znajdując pełny identyfikator rozszerzenia (w formie <publisher>.<id>) i dodając go do obiektu idx.extensions w ten sposób:

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

Dodawanie typowych usług

Firebase Studio oferuje też uproszczoną konfigurację i ustawienia najpopularniejszych usług, których możesz potrzebować podczas tworzenia aplikacji, w tym:

  • Kontenery
    • Docker (services.docker.*)
  • Wiadomości
    • Emulator Pub/Sub (services.pubsub.*)
  • Bazy danych
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

Szczegółowe informacje o włączaniu tych usług w workspace znajdziesz w services.*częściach dokumentu dev.nix.

Dostosowywanie podglądów

Szczegółowe informacje o dostosowywaniu podglądów aplikacji znajdziesz w artykule Podgląd aplikacji.

Ustawianie ikony obszaru roboczego

Możesz wybrać niestandardową ikonę dla swojego obszaru roboczego, umieszczając plik PNG o nazwie icon.png w katalogu .idx na tym samym poziomie co plik dev.nix. Firebase Studio będzie używać tej ikony, aby reprezentować Twoją instancję workspace na pulpicie.

Plik ten można sprawdzić w systemie kontroli wersji (np. Git), co jest dobrym sposobem na to, aby wszyscy pracujący nad projektem widzieli tę samą ikonę projektu podczas korzystania z Firebase Studio. Ponieważ plik może się różnić w różnych gałęziach Git, możesz użyć tej ikony, aby wizualnie odróżnić robocze wersje aplikacji od wersji produkcyjnych oraz do innych celów.

Przekształcanie ustawień w szablon

Aby przekształcić konfigurację środowiska w „starterowe środowisko”, którego każdy może używać do tworzenia nowych projektów, zapoznaj się z dokumentacją dotyczącą tworzenia niestandardowych szablonów.

Poznaj wszystkie opcje dostosowywania

Szczegółowe informacje o schemacie konfiguracji środowiska znajdziesz w dokumentacji dev.nix.

Dalsze kroki