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

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

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

dev.nix रेफ़रंस में, उपलब्ध सुविधाओं के बारे में पूरी जानकारी दी गई है.

Nix और Firebase Studio

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

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

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

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

एक सामान्य उदाहरण

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

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

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

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

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

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

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

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

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

gcloud CLI for Google Cloud का डिफ़ॉल्ट कॉन्फ़िगरेशन, सभी 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 फ़ाइल में IDE एक्सटेंशन शामिल किए जा सकते हैं. इसके लिए, पूरी तरह से मान्य एक्सटेंशन आईडी (<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 Emulator (services.pubsub.*)
  • डेटाबेस
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

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

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

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

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

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

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

अपने बदलावों को टेंप्लेट में बदलना

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

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

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

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

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

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

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

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

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

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

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

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

अगले चरण