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

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

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

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

Nix और Firebase Studio

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

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

  • आपके वर्कस्पेस के लिए उपलब्ध सिस्टम टूल मैनेज करने के लिए, 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";
      };
    };
  };
}

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

अपने वर्कस्पेस में सिस्टम टूल जोड़ने के लिए, जैसे कि कंपाइलर या क्लाउड सेवाओं के लिए सीएलआई प्रोग्राम, Nix पैकेज रजिस्ट्री में पैकेज का यूनीक आईडी ढूंढें और इसे अपनी फ़ाइल के ऑब्जेक्ट में जोड़ें. इसके पहले, `pkgs.:` जोड़ना न भूलें:dev.nixpackages

{ 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 वर्कस्पेस को शेयर करना और फिर से बनाना आसान हो जाता है.

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

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

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

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

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

अगर आपको अतिरिक्त कॉम्पोनेंट की ज़रूरत है, तो उन्हें अपनी 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 फ़ाइल में एक्सटेंशन जोड़ें. वर्कस्पेस कॉन्फ़िगरेशन शेयर करने पर, ये एक्सटेंशन अपने-आप इंस्टॉल हो जाएंगे. यह तरीका प्रोजेक्ट के हिसाब से एक्सटेंशन के लिए सबसे सही है. जैसे:

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

दूसरे तरीके के लिए, आईडीई एक्सटेंशन को अपनी 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.*)

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

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

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

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

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

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

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

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

लेआउट में अपनी पसंद के मुताबिक बदलाव करने के सभी विकल्प देखना

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

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

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

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

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

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

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

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

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

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

अगले चरण