Dostosowywanie obszaru roboczego Firebase Studio

Firebase Studio umożliwia dostosowanie obszaru roboczego do unikalnych potrzeb projektu przez zdefiniowanie pojedynczego pliku konfiguracji .idx/dev.nix który opisuje:

  • Narzędzia systemowe, których potrzebujesz do uruchamiania (np. z poziomu terminala), takie jak kompilatory lub inne pliki binarne.
  • Rozszerzenia, które musisz zainstalować (np. obsługę języka programowania).
  • Sposób wyświetlania podglądów aplikacji (np. polecenia do uruchamiania serwera WWW).
  • Globalne zmienne środowiskowe dostępne dla serwerów lokalnych działających w obszarze roboczym.

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

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ęzyka programowania Nix do opisywania środowisk obszaru roboczego. Nix to język programowania funkcyjnego. Atrybuty i biblioteki pakietów, które możesz zdefiniować w pliku dev.nix, są zgodne ze składnią zestawu atrybutów Nix.

  • Menedżera pakietów Nix do zarządzania narzędziami systemowymi dostępnymi w obszarze roboczym. Jest to podobne do menedżerów pakietów specyficznych dla systemu operacyjnego, takich jak APT (apt i apt-get), Homebrew (brew) i dpkg.

Ponieważ środowiska Nix są powtarzalne i deklaratywne, w kontekście Firebase Studio, oznacza to, że możesz udostępnić plik konfiguracji Nix jako część repozytorium Git, aby mieć pewność, że wszyscy pracujący nad projektem mają taką samą konfigurację środowiska.

Podstawowy przykład

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

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

Dodawanie narzędzi systemowych

Aby dodać do obszaru roboczego narzędzia systemowe, takie jak kompilatory lub programy CLI do usług w chmurze, znajdź unikalny identyfikator pakietu w rejestrze pakietów Nix i dodaj go do swojego dev.nix pliku's packages obiektu, poprzedzając go ciągiem `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
  ];
  ...
}

Różni się to od typowego sposobu instalowania pakietów systemowych za pomocą menedżerów pakietów specyficznych dla systemu operacyjnego, takich jak APT (apt i apt-get), Homebrew (brew) i dpkg. Deklaratywne opisanie, które pakiety systemowe są potrzebne, oznacza, że Firebase Studio obszary robocze są łatwiejsze do udostępniania i odtwarzania.

Używanie lokalnych plików binarnych Node

Podobnie jak na komputerze lokalnym, pliki binarne związane z lokalnie zainstalowanymi pakietami Node (np. pakietami zdefiniowanymi w pliku package.json) można wykonywać w panelu terminala, wywołując je za pomocą polecenia npx.

Dodatkowo, jeśli znajdujesz się w katalogu z folderem node_modules (np. w katalogu głównym projektu internetowego), lokalnie zainstalowane pliki binarne można wywoływać bezpośrednio, bez prefiksu npx.

Dodawanie komponentów gcloud

Domyślna konfiguracja interfejsu gcloud CLI dla Google Cloud jest dostępna we wszystkich Firebase Studio obszarach roboczych.

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

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

Dodawanie rozszerzeń IDE

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

  • Użyj panelu Rozszerzenia w Firebase Studio aby znaleźć i zainstalować rozszerzenia. To podejście jest najlepsze w przypadku rozszerzeń specyficznych dla użytkownika, takich jak:

    • Niestandardowe motywy kolorystyczne
    • Emulacja edytora, np. VSCodeVim

  • Dodaj rozszerzenia do pliku dev.nix. Te rozszerzenia zostaną automatycznie zainstalowane, gdy udostępnisz konfigurację obszaru roboczego. To podejście jest najlepsze w przypadku rozszerzeń specyficznych dla projektu, takich jak:

    • Rozszerzenia języków programowania, w tym debugery specyficzne dla języka
    • 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 wyszukując pełny identyfikator rozszerzenia (w formacie <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ę typowych usług, które mogą być potrzebne podczas programowania, 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 obszarze roboczym znajdziesz w services.* częściach dev.nix dokumentacji.

Dostosowywanie podglądów

Szczegółowe informacje o dostosowywaniu podglądów aplikacji znajdziesz w artykule Wyświetlanie podglądu aplikacji.

Ustawianie ikony obszaru roboczego

Możesz wybrać niestandardową ikonę 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 wtedy używać tej ikony do reprezentowania obszaru roboczego w panelu.

Ponieważ ten plik można sprawdzić w systemie kontroli wersji (np. Git), jest to a dobry sposób, aby wszyscy pracujący nad projektem widzieli tę samą ikonę dla swojego projektu podczas korzystania z Firebase Studio. A ponieważ plik może się różnić w zależności od gałęzi Git, możesz użyć tej ikony, aby wizualnie odróżnić obszary robocze aplikacji w wersji beta i produkcyjnej oraz do innych celów.

Przekształcanie dostosowań w szablon

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

Poznawanie wszystkich opcji dostosowywania

Szczegółowy opis schematu konfiguracji środowiska znajdziesz w dokumentacji dev.nixreference for a.

Pobieranie plików

Aby pobrać pliki jako plik ZIP:

  • Kliknij prawym przyciskiem myszy dowolny katalog w panelu Eksplorator i wybierz Spakuj i pobierz.

Aby pobrać wszystko z katalogu projektu:

  1. Wybierz Plik > Otwórz folder.

  2. Zaakceptuj domyślny katalog /home/user.

  3. Gdy pliki się wczytają, kliknij prawym przyciskiem myszy katalog roboczy i wybierz Spakuj i pobierz. Jeśli używasz App Prototyping agent, katalogiem roboczym będzie studio. Jeśli używasz szablonu lub przesłanego projektu, będzie to nazwa projektu.

  4. Gdy pojawi się prośba o ponowne utworzenie środowiska, kliknij Anuluj.

  5. Po zakończeniu pobierania otwórz ponownie katalog roboczy z menu Plik, aby wrócić do obszaru roboczego.

Dalsze kroki