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

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

  • Çalıştırmanız gereken sistem araçları (örneğin, derleyiciler veya diğer ikili dosyalar gibi Terminal'den).
  • Yüklü olması gereken uzantılar (ör. programlama dili desteği).
  • Uygulama önizlemelerinizin nasıl gösterileceği (örneğin, web sunucunuzu çalıştırma komutları).
  • Çalışma alanınızda çalışan yerel sunucular için kullanılabilen genel ortam değişkenleri.

Kullanılabilir özelliklerin tam açıklaması için dev.nix referansına bakın.

Nix ve Firebase Studio

Firebase Studio, her çalışma alanının ortam yapılandırmasını tanımlamak için Nix'i kullanır. Firebase Studio özellikle şu amaçlarla kullanılı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 kümesi söz dizimine uygundur.

  • Workspace'inizde kullanılabilen sistem araçlarını yönetmek için Nix paket yöneticisi. Bu, APT (apt ve apt-get), Homebrew (brew) ve dpkg gibi işletim sistemine özel paket yöneticilerine benzer.

Nix ortamları tekrarlanabilir ve bildirimsel olduğundan Firebase Studio bağlamında, projenizde çalışan herkesin aynı ortam yapılandırmasına sahip olmasını sağlamak için Nix yapılandırma dosyanızı Git deponuzun bir parçası olarak paylaşabilirsiniz.

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

Çalışma alanınıza derleyiciler veya bulut hizmetleri için CLI programları gibi sistem araçları eklemek üzere Nix paket kayıt defterinde benzersiz paket kimliğini bulun ve dev.nix dosyanızın packages nesnesine "pkgs." önekiyle 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, genellikle APT (apt ve apt-get), Homebrew (brew) ve dpkg gibi işletim sistemine özgü paket yöneticilerini kullanarak sistem paketlerini yükleme yönteminden farklıdır. Hangi sistem paketlerinin gerektiğinin tam olarak bildirimli bir şekilde açıklanması, Firebase Studio çalışma alanlarının paylaşılmasını ve yeniden üretilmesini kolaylaştırır.

Yerel düğüm ikililerini kullanma

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

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

gcloud bileşen ekleme

gcloud CLI for Google Cloud'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

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

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

    • Ö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şım için tam nitelikli uzantı kimliğini (<publisher>.<id> biçiminde) bulup dev.nix dosyanıza ekleyerek IDE uzantılarını dahil edebilirsiniz. Bunu, idx.extensions nesnesine aşağıdaki şekilde ekleyerek yapabilirsiniz:

{ 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 ayrıca geliştirme sırasında ihtiyaç duyabileceğiniz yaygın hizmetler için basitleştirilmiş kurulum ve yapılandırma sunar. Bu hizmetler arasında şunlar yer alır:

  • Container'lar
    • Docker (services.docker.*)
  • Mesajlaşma
    • Pub/Sub Emulator (services.pubsub.*)
  • Veritabanları
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

Bu hizmetleri çalışma alanınızda etkinleştirme hakkında ayrıntılı bilgi için services.* bölümlerindeki dev.nix referansına 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ı simgenizi ayarlama

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

Bu dosya kaynak kontrolüne (ör. Git) eklenebildiğinden, Firebase Studio kullanırken projenizde çalışan herkesin projeniz için aynı simgeyi görmesine yardımcı olmanın iyi bir yoludur. Dosya, Git dalları arasında değişiklik gösterebileceğinden bu simgeyi, beta ve üretim uygulama çalışma alanlarını görsel olarak ayırt etmek ve başka amaçlar için 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 ile ilgili dokümanlara bakın.

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

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

Dosyalarınızı indirme

Dosyalarınızı ZIP dosyası olarak indirmek için:

  • Gezgin bölmesinde herhangi bir dizini sağ tıklayın ve Zip ve İndir'i seçin.

Proje dizininizdeki her şeyi indirmek için:

  1. Dosya > Klasör Aç'ı seçin.

  2. Varsayılan /home/user dizinini kabul edin.

  3. Dosyalar yüklendikten sonra çalışma dizininizi sağ tıklayın ve Zip ve İndir'i seçin. App Prototyping agent kullanıyorsanız çalışma dizininiz studio olur. Şablon veya yüklenen proje kullanıyorsanız bu, proje adınız olur.

  4. Ortamı yeniden oluşturmanız istendiğinde İptal'i tıklayın.

  5. İndirme işlemi tamamlandıktan sonra, çalışma alanınıza geri dönmek için Dosya menüsünden çalışma dizininizi yeniden açın.

Sonraki adımlar