Menyesuaikan ruang kerja Firebase Studio Anda

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

  • Alat sistem yang Anda butuhkan untuk bekerja (misalnya dari Terminal), seperti compiler atau program biner lain.
  • Ekstensi yang perlu diinstal (misalnya dukungan bahasa pemrograman).
  • Tampilan pratinjau aplikasi Anda (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 konfigurasi yang tersedia.

Nix dan Firebase Studio

Firebase Studio menggunakan Nix untuk menentukan konfigurasi lingkungan bagi 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 bagi ruang kerja Anda. Hal ini mirip dengan pengelola paket spesifik per OS seperti APT (apt dan apt-get), Homebrew (brew), dan dpkg.

Karena lingkungan Nix dapat direproduksi dan bersifat deklaratif, dalam konteks Firebase Studio, artinya 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 spesifik per OS seperti APT (apt dan apt-get), Homebrew (brew), dan dpkg. Mendeskripsikan secara deklaratif paket sistem mana yang diperlukan berarti ruang kerja Firebase Studio lebih mudah dibagikan dan direproduksi.

Menggunakan program biner node lokal

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

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

Menambahkan komponen gcloud

Konfigurasi default gcloud CLI untuk Google Cloud tersedia bagi 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 spesifik per pengguna, seperti:

    • Tema warna kustom
    • Emulasi editor, seperti VSCodeVim

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

    • Ekstensi bahasa pemrograman, termasuk debugger spesifik per 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 lebih simpel untuk layanan umum yang mungkin Anda perlukan selama pengembangan, termasuk:

  • Container
    • Docker (services.docker.*)
  • Fitur 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 tersebut di ruang kerja Anda, lihat bagian services.* dalam referensi dev.nix.

Menyesuaikan pratinjau

Untuk mengetahui detail tentang cara menyesuaikan pratinjau aplikasi, lihat Melihat pratinjau aplikasi Anda.

Menetapkan ikon ruang kerja

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

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

Mengubah penyesuaian Anda menjadi template

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

Mempelajari semua opsi penyesuaian

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

Mendownload file Anda

Untuk mendownload file sebagai file zip:

  • Klik kanan direktori mana pun di panel Explorer, lalu pilih Zip and Download.

Untuk mendownload semua file di direktori project Anda:

  1. Pilih File > Open Folder.

  2. Terima direktori /home/user default.

  3. Setelah file dimuat, klik kanan direktori kerja Anda, lalu pilih Zip and Download. Jika menggunakan App Prototyping agent, direktori kerja Anda adalah studio. Jika menggunakan template atau project yang diupload, nama project Anda akan sama dengan keduanya.

  4. Saat diminta untuk membangun ulang lingkungan, klik Cancel.

  5. Setelah download selesai, buka kembali direktori kerja dari menu File untuk kembali ke ruang kerja.

Langkah berikutnya