Firebase Studio çalışma alanınızı özelleştirme

Firebase Studio, aşağıdakileri açıklayan tek bir .idx/dev.nix yapılandırma dosyası tanımlayarak çalışma alanınızı projenizin benzersiz ihtiyaçlarına göre uyarlamanıza olanak tanır:

  • Derleyiciler veya diğer ikili dosyalar gibi çalıştırmanız gereken sistem araçları (ör. Terminal'den).
  • Yüklemeniz gereken uzantıları (ör. programlama dili desteği).
  • Uygulama önizlemelerinizin nasıl görünmesi gerektiği (ör. web sunucunuzu çalıştırma komutları).
  • Çalışma alanınızda çalışan yerel sunucuların kullanabileceği genel ortam değişkenleri.

Sunulan özelliklerin tam açıklamasını dev.nix referansında bulabilirsiniz.

Nix ve Firebase Studio

Firebase Studio, her çalışma alanının ortam yapılandırmasını tanımlamak için Nix kullanır. Özellikle, Firebase Studio şunları kullanır:

  • Çalışma alanı ortamlarını tanımlamak için Nix programlama dili. Nix, işlevsel bir programlama dilidir. dev.nix dosyasında tanımlayabileceğiniz özellikler ve paket kitaplıkları, Nix özellik grubu söz dizimini izler.

  • Nix paket yöneticisi, çalışma alanınızda kullanılabilen sistem araçlarını yönetmenizi sağlar. Bu, APT (apt ve apt-get), Homebrew (brew) ve dpkg gibi işletim sistemine özel paket yöneticilerine benzer.

Nix ortamları yeniden üretilebilir ve açıklayıcı olduğundan, Firebase Studio bağlamında bu, projenizde çalışan herkesin aynı ortam yapılandırmasına sahip olmasını sağlamak için Nix yapılandırma dosyanızı Git kod deponuzun bir parçası olarak paylaşabileceğiniz anlamına gelir.

Temel bir örnek

Aşağıdaki örnekte, önizlemeleri etkinleştiren temel bir ortam yapılandırması gösterilmektedir:

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

Sistem araçları ekleme

Bulut hizmetleri için derleyiciler veya CLI programları gibi sistem araçlarını çalışma alanınıza eklemek istiyorsanız Nix paket kayıt otoritesinde benzersiz paket kimliğini bulun ve dev.nix dosyanızın packages nesnesine "pkgs" ön ekiyle ekleyin.

{ 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
  ];
  ...
}

Bu, APT (apt ve apt-get), Homebrew (brew) ve dpkg gibi işletim sistemine özel paket yöneticilerini kullanarak sistem paketlerini genellikle yükleme şeklinizden farklıdır. Tam olarak hangi sistem paketlerinin gerekli olduğunu açık bir şekilde tanımlamak, Firebase Studio çalışma alanlarının paylaşılmasını ve yeniden oluşturulmasını kolaylaştırır.

Yerel düğüm ikililerini kullanma

Yerel makinenizde olduğu gibi, yerel olarak yüklü düğüm paketleriyle (örneğin, package.json dosyanızda tanımlanan paketler) ilgili ikili dosyalar, npx komutuyla çağrılarak bir Terminal panelinde çalıştırılabilir.

Ek bir kolaylık olarak, node_modules klasörünün bulunduğu bir dizindeyseniz (ör. bir web projesinin kök dizini) yerel olarak yüklenen ikili dosyalar npx ön eki olmadan doğrudan çağrılabilir.

gcloud bileşeni ekleme

Google Cloud için gcloud CLI'nin varsayılan yapılandırması tüm Firebase Studio çalışma alanlarında kullanılabilir.

Ek bileşenlere ihtiyacınız varsa bunları dev.nix dosyanıza ekleyebilirsiniz:

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

IDE uzantıları ekleme

OpenVSX uzantı kayıt defterini kullanarak uzantıları Firebase Studio'e iki şekilde yükleyebilirsiniz:

  • Uzantı bulmak ve yüklemek için Firebase Studio'teki Uzantılar panelini kullanın. Bu yaklaşım, aşağıdakiler gibi kullanıcıya özel uzantılar için en uygundur:

    • Özel renk temaları
    • VSCodeVim gibi düzenleyici emülasyonu

  • dev.nix dosyanıza uzantı ekleyin. Bu uzantılar, çalışma alanı yapılandırmanızı paylaştığınızda otomatik olarak yüklenir. Bu yaklaşım, aşağıdakiler gibi projeye özel uzantılar için en uygundur:

    • Dile özgü hata ayıklayıcılar da dahil olmak üzere programlama dili uzantıları
    • Projenizde kullanılan bulut hizmetleri için resmi uzantılar
    • Kod biçimlendiriciler

İkinci yaklaşımda, tam nitelikli uzantı kimliğini (<publisher>.<id> biçiminde) bulup idx.extensions nesnesine aşağıdaki gibi ekleyerek IDE uzantılarını dev.nix dosyanıza dahil edebilirsiniz:

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

Sık kullanılan hizmetleri ekleme

Firebase Studio, geliştirme sırasında ihtiyaç duyabileceğiniz yaygın hizmetler için basitleştirilmiş kurulum ve yapılandırma da sunar. Örneğin:

  • Kapsayıcılar
    • Docker (services.docker.*)
  • Mesajlaşma
    • Pub/Sub Emülatörü (services.pubsub.*)
  • Veritabanları
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

Bu hizmetleri çalışma alanınızda etkinleştirmeyle ilgili ayrıntılar için dev.nix referansının services.*bölümlerine bakın.

Önizlemeleri özelleştirme

Uygulama önizlemelerinizi nasıl özelleştireceğiniz hakkında ayrıntılı bilgi için Uygulamanızı önizleme başlıklı makaleyi inceleyin.

Çalışma alanı simgesini ayarlama

dev.nix dosyanızla aynı düzeydeki .idx dizinine icon.png adlı bir PNG dosyası yerleştirerek çalışma alanınız için özel bir simge seçebilirsiniz. Firebase Studio, kontrol panelinizde çalışma alanınızı temsil etmek için bu simgeyi kullanır.

Bu dosya kaynak denetimine (ör. Git) kaydedilebildiğinden, projenizde çalışan herkesin Firebase Studio kullanırken projeniz için aynı simgeyi görmesine yardımcı olmak için bu yöntemi kullanabilirsiniz. Dosya Git dalları arasında değişiklik gösterebileceğinden, beta ve üretim uygulama çalışma alanlarını görsel olarak ayırt etmek ve başka amaçlar için bu simgeyi kullanabilirsiniz.

Özelleştirmelerinizi şablona dönüştürme

Ortam yapılandırmanızı, herkesin yeni projeler oluşturmak için kullanabileceği bir "başlangıç ortamına" dönüştürmek istiyorsanız Özel şablon oluşturma başlıklı makaleyi inceleyin.

Tüm özelleştirme seçeneklerini keşfetme

Ortam yapılandırma şemasının ayrıntılı açıklaması için dev.nix referansına göz atın.

Sonraki adımlar