Firebase Studio के फ़ाइल फ़ोल्डर को पसंद के मुताबिक बनाना

Firebase Studio की मदद से, अपने प्रोजेक्ट की ज़रूरतों के हिसाब से, अपने Workspace को बनाया जा सकता है. इसके लिए, .idx/dev.nix कॉन्फ़िगरेशन की एक फ़ाइल तय करनी होती है. इस फ़ाइल में यह जानकारी होती है:

  • सिस्टम टूल, जिन्हें आपको चलाना होता है. जैसे, कंपाइलर या अन्य बाइनरी. इन्हें टर्मिनल से चलाया जा सकता है.
  • एक्सटेंशन , जिन्हें इंस्टॉल करना होता है. जैसे, प्रोग्रामिंग लैंग्वेज के लिए सहायता.
  • ऐप्लिकेशन की झलक कैसे दिखनी चाहिए. जैसे, वेब सर्वर चलाने के लिए कमांड.
  • ग्लोबल एनवायरमेंट वैरिएबल , जो आपके Workspace में चल रहे लोकल सर्वर के लिए उपलब्ध होते हैं.

उपलब्ध चीज़ों के बारे में पूरी जानकारी पाने के लिए, dev.nix रेफ़रंस देखें.

Nix और Firebase Studio

Firebase Studio हर Workspace के लिए एनवायरमेंट कॉन्फ़िगरेशन तय करने के लिए, Nix का इस्तेमाल करता है. खास तौर पर, Firebase Studio इनका इस्तेमाल करता है:

  • Workspace के एनवायरमेंट के बारे में बताने के लिए, Nix प्रोग्रामिंग लैंग्वेज. Nix, फ़ंक्शनल प्रोग्रामिंग लैंग्वेज है. आप जिन एट्रिब्यूट और पैकेज लाइब्रेरी को dev.nix फ़ाइल में तय कर सकते हैं, वे Nix एट्रिब्यूट सेट सिंटैक्स के मुताबिक होती हैं.

  • आपके Workspace के लिए उपलब्ध सिस्टम टूल मैनेज करने के लिए, Nix पैकेज मैनेजर. यह ओएस के हिसाब से काम करने वाले पैकेज मैनेजर की तरह होता है. जैसे, APT (apt और apt-get), Homebrew (brew), और dpkg.

Nix एनवायरमेंट को फिर से बनाया जा सकता है और यह डिक्लेरेटिव होता है. Firebase Studioके संदर्भ में, इसका मतलब है कि Git रिपॉज़िटरी के हिस्से के तौर पर, Nix कॉन्फ़िगरेशन फ़ाइल शेयर की जा सकती है. इससे यह पक्का किया जा सकता है कि आपके प्रोजेक्ट पर काम करने वाले सभी लोगों के पास एक जैसा एनवायरमेंट कॉन्फ़िगरेशन हो.

सामान्य जानकारी

यहां दिए गए उदाहरण में, एनवायरमेंट के सामान्य कॉन्फ़िगरेशन के बारे में बताया गया है. इससे झलक देखी जा सकती है:

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

सिस्टम टूल जोड़ना

अपने Workspace में सिस्टम टूल जोड़ने के लिए, जैसे कि कंपाइलर या क्लाउड सेवाओं के लिए सीएलआई प्रोग्राम, Nix पैकेज रजिस्ट्री में पैकेज का यूनीक आईडी ढूंढें और इसे अपनी dev.nix फ़ाइल के packages ऑब्जेक्ट में जोड़ें. इसके पहले `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
  ];
  ...
}

यह, ओएस के हिसाब से काम करने वाले पैकेज मैनेजर (जैसे, APT (apt और apt-get), Homebrew (brew), और dpkg) का इस्तेमाल करके, सिस्टम पैकेज इंस्टॉल करने के तरीके से अलग है. यह बताने के लिए कि किन सिस्टम पैकेज की ज़रूरत है, डिक्लेरेटिव तरीके का इस्तेमाल किया जाता है. इससे Firebase Studio Workspace को शेयर करना और फिर से बनाना आसान हो जाता है.

लोकल नोड बाइनरी का इस्तेमाल करना

आपकी लोकल मशीन की तरह ही, स्थानीय तौर पर इंस्टॉल किए गए नोड पैकेज (उदाहरण के लिए, आपके package.json में तय किए गए पैकेज) से जुड़ी बाइनरी को टर्मिनल पैनल में, npx कमांड के साथ इस्तेमाल किया जा सकता है.

अगर आप ऐसी डायरेक्ट्री में हैं जिसमें node_modules फ़ोल्डर है (जैसे, वेब प्रोजेक्ट की रूट डायरेक्ट्री), तो स्थानीय तौर पर इंस्टॉल की गई बाइनरी को सीधे इस्तेमाल किया जा सकता है. इसके लिए, npx प्रीफ़िक्स की ज़रूरत नहीं होती.

gcloud कॉम्पोनेंट जोड़ना

Google Cloud के लिए, gcloud सीएलआई का डिफ़ॉल्ट कॉन्फ़िगरेशन, सभी Firebase Studio Workspace के लिए उपलब्ध है.

अगर आपको अतिरिक्त कॉम्पोनेंट की ज़रूरत है, तो उन्हें अपनी dev.nix फ़ाइल में जोड़ा जा सकता है:

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

आईडीई एक्सटेंशन जोड़ना

Firebase Studio में, OpenVSX एक्सटेंशन रजिस्ट्री का इस्तेमाल करके, दो तरीकों से एक्सटेंशन इंस्टॉल किए जा सकते हैं:

  • एक्सटेंशन ढूंढने और इंस्टॉल करने के लिए, Firebase Studio में मौजूद एक्सटेंशन पैनल का इस्तेमाल करें और एक्सटेंशन इंस्टॉल करें. यह तरीका उपयोगकर्ता के हिसाब से बनाए गए एक्सटेंशन के लिए सबसे सही है. जैसे:

    • पसंद के मुताबिक रंग वाली थीम
    • एडिटर एम्युलेशन, जैसे कि VSCodeVim

  • अपनी dev.nix फ़ाइल में एक्सटेंशन जोड़ें. जब Workspace का कॉन्फ़िगरेशन शेयर किया जाता है, तो ये एक्सटेंशन अपने-आप इंस्टॉल हो जाएंगे. यह तरीका प्रोजेक्ट के हिसाब से बनाए गए एक्सटेंशन के लिए सबसे सही है. जैसे:

    • प्रोग्रामिंग लैंग्वेज के एक्सटेंशन. इनमें, लैंग्वेज के हिसाब से डीबगर भी शामिल हैं
    • आपके प्रोजेक्ट में इस्तेमाल की जाने वाली क्लाउड सेवाओं के लिए, आधिकारिक एक्सटेंशन
    • कोड फ़ॉर्मेटर

दूसरे तरीके के लिए, आईडीई एक्सटेंशन को अपनी dev.nix फ़ाइल में शामिल किया जा सकता है. इसके लिए, एक्सटेंशन का पूरी तरह से मान्य आईडी (<publisher>.<id> फ़ॉर्मैट में) ढूंढें और इसे idx.extensions ऑब्जेक्ट में इस तरह जोड़ें:

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

सामान्य सेवाएं जोड़ना

Firebase Studio डेवलपमेंट के दौरान इस्तेमाल की जाने वाली सामान्य सेवाओं को आसानी से सेटअप और कॉन्फ़िगर करने की सुविधा भी देता है. इनमें ये सेवाएं शामिल हैं:

  • कंटेनर
    • Docker (services.docker.*)
  • मैसेजिंग
    • Pub/Sub एम्युलेटर (services.pubsub.*)
  • डेटाबेस
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

अपने Workspace में इन सेवाओं को चालू करने के बारे में ज़्यादा जानने के लिए, services.* रेफ़रंस के dev.nix सेक्शन देखें.

झलक को पसंद के मुताबिक बनाना

ऐप्लिकेशन की झलक को पसंद के मुताबिक बनाने के बारे में ज़्यादा जानने के लिए, अपने ऐप्लिकेशन की झलक देखना लेख पढ़ें.

अपने Workspace के लिए आइकॉन सेट करना

अपने Workspace के लिए, पसंद के मुताबिक आइकॉन चुना जा सकता है. इसके लिए, icon.png नाम की पीएनजी फ़ाइल को .idx डायरेक्ट्री में, dev.nix फ़ाइल के बराबर लेवल पर रखें. Firebase Studio इसके बाद, इस आइकॉन का इस्तेमाल करके, आपके डैशबोर्ड में आपके Workspace को दिखाएगा.

इस फ़ाइल को सोर्स कंट्रोल (जैसे, Git) में चेक किया जा सकता है. इसलिए, यह पक्का करने का एक अच्छा तरीका है कि आपके प्रोजेक्ट पर काम करने वाले सभी लोगों को आपके प्रोजेक्ट के लिए एक ही आइकॉन दिखे, जब वे Firebase Studio का इस्तेमाल कर रहे हों. साथ ही, Git की अलग-अलग ब्रांच में फ़ाइल अलग-अलग हो सकती है. इसलिए, इस आइकॉन का इस्तेमाल करके, बीटा और प्रोडक्शन ऐप्लिकेशन के Workspace के बीच अंतर किया जा सकता है. इसके अलावा, इसका इस्तेमाल अन्य कामों के लिए भी किया जा सकता है.

अपनी पसंद के मुताबिक बनाए गए एनवायरमेंट को टेंप्लेट में बदलना

अपने एनवायरमेंट कॉन्फ़िगरेशन को "स्टार्टर एनवायरमेंट" में बदलने के लिए, ताकि कोई भी व्यक्ति नए प्रोजेक्ट बनाने के लिए इसका इस्तेमाल कर सके, पसंद के मुताबिक टेंप्लेट बनाना लेख पढ़ें.

पसंद के मुताबिक बनाने के सभी विकल्प देखना

एनवायरमेंट कॉन्फ़िगरेशन स्कीमा के बारे में ज़्यादा जानने के लिए, dev.nix रेफ़रंस देखें.

अपनी फ़ाइलें डाउनलोड करना

अपनी फ़ाइलें ZIP फ़ाइल के तौर पर डाउनलोड करने के लिए:

  • एक्सप्लोरर पैनल में किसी भी डायरेक्ट्री पर राइट-क्लिक करें और ज़िप करें और डाउनलोड करें को चुनें.

अपने प्रोजेक्ट डायरेक्ट्री में मौजूद सभी चीज़ें डाउनलोड करने के लिए:

  1. फ़ाइल > फ़ोल्डर खोलें को चुनें.

  2. डिफ़ॉल्ट /home/user डायरेक्ट्री को स्वीकार करें.

  3. फ़ाइलें लोड होने के बाद, अपनी वर्किंग डायरेक्ट्री पर राइट-क्लिक करें और ज़िप करें और डाउनलोड करें को चुनें. अगर App Prototyping agent का इस्तेमाल किया जा रहा है, तो आपकी वर्किंग डायरेक्ट्री studio होगी. अगर किसी टेंप्लेट या अपलोड किए गए प्रोजेक्ट का इस्तेमाल किया जा रहा है, तो यह आपके प्रोजेक्ट का नाम होगा.

  4. एनवायरमेंट को फिर से बनाने का मैसेज दिखने पर, रद्द करें पर क्लिक करें.

  5. डाउनलोड पूरा होने के बाद, अपनी वर्किंग डायरेक्ट्री को फ़ाइल मेन्यू से फिर से खोलें, ताकि अपने Workspace में वापस जाया जा सके.

अगले चरण