Menyesuaikan ruang kerja Firebase Studio

Firebase Studio memungkinkan Anda menyesuaikan ruang kerja dengan kebutuhan unik project Anda dengan menentukan satu file konfigurasi .idx/dev.nix yang menjelaskan:

  • Alat sistem yang harus dapat Anda jalankan (misalnya, dari Terminal), seperti compiler atau biner lainnya.
  • Ekstensi yang perlu diinstal (misalnya, dukungan bahasa pemrograman).
  • Cara pratinjau aplikasi Anda akan muncul (misalnya, perintah untuk menjalankan server web Anda).
  • Variabel lingkungan global yang tersedia untuk server lokal yang berjalan di ruang kerja Anda.

Lihat referensi dev.nix untuk mengetahui deskripsi lengkap tentang apa yang tersedia.

Nix dan Firebase Studio

Firebase Studio menggunakan Nix untuk menentukan konfigurasi lingkungan untuk setiap ruang kerja. Secara khusus, Firebase Studio menggunakan:

  • Bahasa pemrograman Nix untuk mendeskripsikan lingkungan ruang kerja. Nix adalah bahasa pemrograman fungsional. Atribut dan library paket yang dapat Anda tentukan dalam file dev.nix mengikuti sintaksis kumpulan atribut Nix.

  • Pengelola paket Nix untuk mengelola alat sistem yang tersedia untuk ruang kerja Anda. Hal ini mirip dengan pengelola paket khusus OS seperti APT (apt dan apt-get), Homebrew (brew), dan dpkg.

Karena lingkungan Nix dapat direproduksi dan bersifat deklaratif, dalam konteks Firebase Studio, ini berarti Anda dapat membagikan file konfigurasi Nix sebagai bagian dari repositori Git untuk memastikan semua orang yang mengerjakan project Anda memiliki konfigurasi lingkungan yang sama.

Contoh dasar

Contoh berikut menunjukkan konfigurasi lingkungan dasar yang mengaktifkan pratinjau:

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

Menambahkan alat sistem

Untuk menambahkan alat sistem ke ruang kerja Anda, seperti compiler atau program CLI untuk layanan cloud, temukan ID paket unik di registry paket Nix dan tambahkan ke objek packages file dev.nix, dengan awalan `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
  ];
  ...
}

Cara ini berbeda dengan cara Anda biasanya menginstal paket sistem menggunakan pengelola paket khusus OS seperti APT (apt dan apt-get), Homebrew (brew), dan dpkg. Menjelaskan secara deklaratif paket sistem mana yang diperlukan berarti ruang kerja Firebase Studio lebih mudah dibagikan dan direproduksi.

Menggunakan biner node lokal

Sama seperti di komputer lokal, biner yang terkait dengan paket node yang diinstal secara lokal (misalnya, paket yang ditentukan di package.json) dapat dijalankan di panel Terminal dengan memanggilnya dengan perintah npx.

Sebagai kemudahan tambahan, jika Anda berada di direktori dengan folder node_modules (seperti direktori root project web), biner yang diinstal secara lokal dapat dipanggil secara langsung, tanpa awalan npx.

Menambahkan komponen gcloud

Konfigurasi default gcloud CLI untuk Google Cloud tersedia untuk semua ruang kerja Firebase Studio.

Jika memerlukan komponen tambahan, Anda dapat menambahkannya ke file dev.nix:

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

Menambahkan ekstensi IDE

Anda dapat menginstal ekstensi di Firebase Studio menggunakan registry ekstensi OpenVSX dengan dua cara:

  • Gunakan panel Extensions di Firebase Studio untuk menemukan dan menginstal ekstensi. Pendekatan ini paling cocok untuk ekstensi khusus pengguna, seperti:

    • Tema warna kustom
    • Emulasi editor, seperti VSCodeVim

  • Tambahkan ekstensi ke file dev.nix. Ekstensi ini akan diinstal secara otomatis saat Anda membagikan konfigurasi ruang kerja. Pendekatan ini paling cocok untuk ekstensi khusus project, seperti:

    • Ekstensi bahasa pemrograman, termasuk debugger khusus bahasa
    • Ekstensi resmi untuk layanan cloud yang digunakan dalam project Anda
    • Pemformat kode

Untuk pendekatan terakhir, Anda dapat menyertakan ekstensi IDE dalam file dev.nix dengan menemukan ID ekstensi yang sepenuhnya memenuhi syarat (dalam bentuk <publisher>.<id>) dan menambahkannya ke objek idx.extensions seperti ini:

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

Menambahkan layanan umum

Firebase Studio juga menawarkan penyiapan dan konfigurasi yang disederhanakan untuk layanan umum yang mungkin Anda perlukan selama pengembangan, termasuk:

  • Penampung
    • Docker (services.docker.*)
  • Pesan
    • Emulator Pub/Sub (services.pubsub.*)
  • Database
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

Untuk mengetahui detail tentang cara mengaktifkan layanan ini di ruang kerja Anda, lihat bagian services.* dari referensi dev.nix.

Menyesuaikan pratinjau

Untuk mengetahui detail tentang cara menyesuaikan pratinjau aplikasi, lihat Mempratinjau aplikasi.

Menetapkan ikon ruang kerja

Anda dapat memilih ikon kustom untuk ruang kerja dengan menempatkan file PNG bernama icon.png di dalam direktori .idx pada tingkat yang sama dengan file dev.nix. Firebase Studio kemudian akan menggunakan ikon ini untuk mewakili ruang kerja Anda di dasbor.

Karena file ini dapat diperiksa ke dalam kontrol sumber (seperti Git), ini adalah cara yang baik untuk membantu semua orang yang mengerjakan project Anda melihat ikon yang sama untuk project Anda saat menggunakan Firebase Studio. Selain itu, karena file dapat bervariasi di seluruh cabang Git, Anda dapat menggunakan ikon ini untuk membedakan secara visual antara ruang kerja aplikasi beta dan produksi serta untuk tujuan lainnya.

Mengubah penyesuaian menjadi template

Untuk mengubah konfigurasi lingkungan menjadi "lingkungan awal" yang dapat digunakan oleh siapa saja untuk mem-build project baru, lihat dokumen untuk Membuat template kustom.

Menjelajahi semua opsi penyesuaian

Lihat referensi dev.nix untuk mengetahui deskripsi mendetail tentang skema konfigurasi lingkungan.

Langkah berikutnya