Firebase Studio में कई तरह के बिल्ट-इन टेंप्लेट उपलब्ध हैं. इनमें वे सभी फ़ाइलें, सिस्टम पैकेज (उदाहरण के लिए, कंपाइलर) और एक्सटेंशन शामिल हैं जिनकी मदद से, किसी भाषा या फ़्रेमवर्क का इस्तेमाल तुरंत शुरू किया जा सकता है.
GitHub पर होस्ट किए गए कम्यूनिटी टेंप्लेट का इस्तेमाल करके भी Firebase Studio वर्कस्पेस लॉन्च किया जा सकता है. टेंप्लेट से नया वर्कस्पेस लॉन्च करने के बारे में ज़्यादा जानकारी के लिए, Firebase Studio वर्कस्पेस बनाना लेख पढ़ें.
ज़्यादातर उपयोगकर्ता, पहले से मौजूद टेंप्लेट का इस्तेमाल करेंगे या Git से प्रोजेक्ट इंपोर्ट करेंगे. हालांकि, इस्तेमाल के ज़्यादा बेहतर उदाहरणों के लिए, आपके पास अपने टेंप्लेट बनाने का विकल्प होता है:
अगर आपको अपना फ़्रेमवर्क, लाइब्रेरी या सेवा बनानी है, तो अपने उपयोगकर्ताओं को ब्राउज़र छोड़े बिना, क्लाउड पर आधारित वर्चुअल मशीन की पूरी क्षमता के साथ, अपनी टेक्नोलॉजी का इस्तेमाल शुरू करने की सुविधा दें.
अगर आपके पास अपने प्रोजेक्ट के लिए पसंदीदा टेक्नोलॉजी स्टैक है, तो कस्टम टेंप्लेट की मदद से, नए प्रोजेक्ट शुरू करने की प्रोसेस को आसान बनाया जा सकता है.
अगर आपको ट्यूटोरियल या कोडलैब के ज़रिए दूसरों को सिखाना है, तो अपने छात्र-छात्राओं के लिए शुरुआती कुछ चरणों को हटाया जा सकता है. इसके लिए, कोडलैब के शुरुआती पॉइंट को कस्टम टेंप्लेट के तौर पर पहले से कॉन्फ़िगर करें.
कस्टम टेंप्लेट बनाने और उसकी जांच करने के बाद, उसके लिए एक लिंक बनाया जा सकता है. इस लिंक को अपनी वेबसाइट, Git रिपॉज़िटरी README फ़ाइल, पैकेज की जानकारी वाले पेज (उदाहरण के लिए, NPM में) या किसी अन्य जगह पर रखा जा सकता है. इससे आपके उपयोगकर्ताओं को आपकी टेक्नोलॉजी का इस्तेमाल शुरू करने में मदद मिलेगी.
ज़रूरी शर्तें
आपके प्रारंभ करने से पहले:
idx/dev.nixफ़ाइल का इस्तेमाल करके, अपने एनवायरमेंट को पसंद के मुताबिक बनाने का तरीका जानें.Nix भाषा की बुनियादी बातों के बारे में जानें और रेफ़रंस को अपने पास रखें.
टेंप्लेट फ़ाइल का स्ट्रक्चर
Firebase Studio टेंप्लेट, सार्वजनिक Git रिपॉज़िटरी (या रिपॉज़िटरी में फ़ोल्डर या ब्रांच) होती है. इसमें कम से कम दो फ़ाइलें होती हैं:
idx-template.jsonमें, टेंप्लेट का मेटाडेटा शामिल होता है. इसमें टेंप्लेट का वह नाम, ब्यौरा, और पैरामीटर शामिल होते हैं जो उपयोगकर्ताओं को दिखते हैं. साथ ही, इसमें वे पैरामीटर भी शामिल होते हैं जो उपयोगकर्ताओं को टेंप्लेट कॉन्फ़िगर करने के लिए उपलब्ध होते हैं. उदाहरण के लिए, अपने उपयोगकर्ताओं को कई प्रोग्रामिंग भाषाओं या इस्तेमाल के उदाहरणों में से चुनने की अनुमति दी जा सकती है. Firebase Studio इस जानकारी का इस्तेमाल, यूज़र इंटरफ़ेस (यूआई) तैयार करने के लिए करता है. यह यूआई, उपयोगकर्ताओं को तब दिखता है, जब वे आपके टेंप्लेट से नया फ़ाइल फ़ोल्डर बनाते हैं.idx-template.nixएक ऐसी फ़ाइल है जिसे Nix भाषा में लिखा गया है. इसमें एक बैश शेल स्क्रिप्ट (Nix फ़ंक्शन में रैप की गई) होती है, जो:यह नए वर्कस्पेस के लिए वर्किंग डायरेक्ट्री बनाता है.
यह
.idx/dev.nixफ़ाइल बनाकर अपना एनवायरमेंट सेट अप करता है. ध्यान दें कि इस स्क्रिप्ट में,flutter createयाnpm initजैसे प्रोजेक्ट स्केफ़ोल्डिंग टूल को भी चलाया जा सकता है. इसके अलावा, Go, Python, Node.js या किसी अन्य भाषा में लिखी गई कस्टम स्क्रिप्ट भी चलाई जा सकती है.जब Firebase Studio टेंप्लेट लोड करता है, तब यह फ़ाइल उपयोगकर्ता के तय किए गए पैरामीटर के साथ एक्ज़ीक्यूट की जाएगी.
इन दो फ़ाइलों के साथ-साथ अन्य फ़ाइलें भी शामिल की जा सकती हैं. इनका इस्तेमाल idx-template.nix में किया जाता है, ताकि टेंप्लेट को इंस्टैंटिएट किया जा सके. उदाहरण के लिए, आपके पास फ़ाइनल .idx/dev.nix फ़ाइल को शामिल करने का विकल्प होता है. इसके अलावा, आपके पास सभी स्कैफ़ोल्डिंग फ़ाइलों को सीधे तौर पर रिपॉज़िटरी में शामिल करने का विकल्प भी होता है.
स्टार्टर टेंप्लेट बनाना
हमारा सुझाव है कि टेंप्लेट बनाने की प्रोसेस को तेज़ करने के लिए, यहां दिए गए किसी एक तरीके का इस्तेमाल करके Firebase Studio टेंप्लेट बनाएं. इसके बाद, इसे अपनी ज़रूरत के हिसाब से पसंद के मुताबिक बनाएं:
- किसी भी सार्वजनिक GitHub रिपॉज़िटरी को टेंप्लेट में बदलना
- अपने टेंप्लेट के लिए, आधिकारिक या कम्यूनिटी टेंप्लेट का इस्तेमाल करना
सामान्य उदाहरण: किसी भी सार्वजनिक GitHub रिपॉज़िटरी को टेंप्लेट में बदलना
idx-template.json और idx-template.nix को तय करने के तरीके के बारे में ज़्यादा जानकारी देने से पहले, एक बुनियादी उदाहरण टेंप्लेट देखना फ़ायदेमंद होता है. इस टेंप्लेट में यह जानकारी होती है:
- इसमें उपयोगकर्ता के हिसाब से कॉन्फ़िगर किए जा सकने वाले पैरामीटर शामिल नहीं होते.
- यह आपके टेंप्लेट रिपॉज़िटरी में मौजूद सभी फ़ाइलों को उपयोगकर्ता के वर्कस्पेस में कॉपी करता है. हालांकि, यह दो
idx-templateफ़ाइलों को कॉपी नहीं करता..idxसबफ़ोल्डर में,dev.nixफ़ाइल पहले से मौजूद होनी चाहिए. यह फ़ाइल, एनवायरमेंट के बारे में बताती है.
अगर आपने यहां दी गई फ़ाइलों को GitHub की किसी सार्वजनिक रिपॉज़िटरी (या सबफ़ोल्डर या ब्रांच) में जोड़ा है, तो इसका मतलब है कि आपने उस रिपॉज़िटरी को Firebase Studioटेंप्लेट में बदल दिया है.
idx-template.json
{
"name": "Hello world",
"description": "A template for a CLI program that prints 'hello world'",
"icon": "https://www.gstatic.com/images/branding/productlogos/studio/v1/192px.svg",
"params": []
}
idx-template.nix
# No user-configurable parameters
{ pkgs, ... }: {
# Shell script that produces the final environment
bootstrap = ''
# Copy the folder containing the `idx-template` files to the final
# project folder for the new workspace. ${./.} inserts the directory
# of the checked-out Git folder containing this template.
cp -rf ${./.} "$out"
# Set some permissions
chmod -R +w "$out"
# Remove the template files themselves and any connection to the template's
# Git repository
rm -rf "$out/.git" "$out/idx-template".{nix,json}
'';
}
अपने टेंप्लेट को पसंद के मुताबिक बनाएं पर जाकर, टेंप्लेट को पसंद के मुताबिक बनाने के लिए किए जा सकने वाले अन्य बदलावों के बारे में जानें.
आधिकारिक या कम्यूनिटी टेंप्लेट का इस्तेमाल करके कस्टम टेंप्लेट बनाना
Firebase Studio टीम, Firebase Studio टेंप्लेट के लिए दो रिपॉज़िटरी मैनेज करती है:
आधिकारिक टेंप्लेट: ये ऐसे टेंप्लेट होते हैं जिन्हें नया ऐप्लिकेशन बनाते समय, सीधे तौर पर Firebase Studio डैशबोर्ड से चुना जाता है.
कम्यूनिटी टेंप्लेट: इन टेंप्लेट में, ओपन सोर्स कम्यूनिटी के लोग योगदान दे सकते हैं. किसी कम्यूनिटी टेंप्लेट का इस्तेमाल करने के लिए, कम्यूनिटी टेंप्लेट की Git डेटा स्टोर करने की जगह को क्लोन करें. आपके पास उस टेंप्लेट का पूरा लिंक इस्तेमाल करने का विकल्प है जिसे आपको इस्तेमाल करना है.
किसी मौजूदा टेंप्लेट के आधार पर कस्टम टेंप्लेट बनाने के लिए:
तय करें कि आपको किस टेंप्लेट को अपने कस्टम टेंप्लेट के आधार के तौर पर इस्तेमाल करना है. इसके बाद, प्रोजेक्ट को क्लोन करें.
अपनी ज़रूरत के हिसाब से
idx-template.json,idx-template.nix, और.idx/dev.nixको पसंद के मुताबिक बनाएं. इसके लिए, अपने टेंप्लेट को पसंद के मुताबिक बनाएं पर क्लिक करें.अपनी रिपॉज़िटरी में किए गए बदलावों की जांच करें.
अपने टेंप्लेट को पब्लिश करने और उसकी जांच करने के लिए, अपने टेंप्लेट के लिए नया वर्कस्पेस बनाएं लेख पढ़ें. अगर नेस्ट की गई रिपॉज़िटरी का इस्तेमाल किया जाता है, तो अपने यूआरएल में सीधे तौर पर उससे लिंक करें. उदाहरण के लिए, अगर आपने कम्यूनिटी का "Vanilla Vite" टेंप्लेट इस्तेमाल किया था, तो आपको इस यूआरएल का इस्तेमाल करके, नया वर्कस्पेस उपलब्ध कराना होगा और उसकी जांच करनी होगी:
https://studio.firebase.google.com/new?template=https://github.com/firebase-studio/community-templates/tree/main/vite-vanilla
अपने टेंप्लेट को पसंद के मुताबिक बनाएं पर जाकर, टेंप्लेट को पसंद के मुताबिक बनाने के लिए किए जा सकने वाले अन्य बदलावों के बारे में जानें.
अपने टेंप्लेट को पसंद के मुताबिक बनाना
अब आपने एक बुनियादी टेंप्लेट बना लिया है. इसमें अपनी ज़रूरत के हिसाब से बदलाव करने के लिए, idx-template.json, idx-template.nix, और .idx/dev.nix फ़ाइलों में बदलाव करें. आपके पास अन्य कॉन्फ़िगरेशन को पसंद के मुताबिक बनाने का विकल्प होता है:
- अपनी
bootstrapस्क्रिप्ट में सिस्टम पैकेज जोड़ें. - उपयोगकर्ता के हिसाब से कॉन्फ़िगर किए जा सकने वाले पैरामीटर जोड़ना
- चुनें कि कौनसी फ़ाइलें डिफ़ॉल्ट रूप से खुलनी चाहिए
- डिफ़ॉल्ट वर्कस्पेस आइकॉन चुनना
अपनी bootstrap स्क्रिप्ट में अतिरिक्त सिस्टम पैकेज इस्तेमाल करना
बुनियादी उदाहरण में, फ़ाइलों को सही जगह पर कॉपी करने के लिए सिर्फ़ बुनियादी POSIX कमांड का इस्तेमाल किया जाता है. आपके टेंप्लेट की bootstrap स्क्रिप्ट को इंस्टॉल करने के लिए, अतिरिक्त बाइनरी की ज़रूरत पड़ सकती है. जैसे, git, node, python3 या अन्य.
अपनी idx-template.nix फ़ाइल में packages तय करके, बूटस्ट्रैप स्क्रिप्ट के लिए अतिरिक्त सिस्टम पैकेज उपलब्ध कराए जा सकते हैं. ठीक उसी तरह जैसे dev.nix फ़ाइल में packages जोड़कर, अतिरिक्त सिस्टम पैकेज की मदद से किसी वर्कस्पेस को पसंद के मुताबिक बनाया जाता है.
यहां pkgs.nodejs जोड़ने का एक उदाहरण दिया गया है. इसमें node, npx, और npm जैसे बाइनरी शामिल हैं:
# idx-template.nix
{pkgs}: {
packages = [
# Enable "node", "npm" and "npx" in the bootstrap script below.
# Note, this is NOT the list of packages available to the workspace once
# it's created. Those go in .idx/dev.nix
pkgs.nodejs
];
bootstrap = ''
mkdir "$out"
# We can now use "npm"
npm init --yes my-boot-strap@latest "$out"
''
}
उपयोगकर्ता के हिसाब से कॉन्फ़िगर किए जा सकने वाले पैरामीटर जोड़ना
उपयोगकर्ताओं को अपने नए प्रोजेक्ट के शुरुआती पॉइंट को पसंद के मुताबिक बनाने की अनुमति देने के लिए, आपके पास ये विकल्प हैं:
कई टेंप्लेट बनाएं या पैरामीटर के साथ एक टेंप्लेट बनाएं.
अगर आपके अलग-अलग शुरुआती पॉइंट, सिर्फ़ सीएलआई टूल को पास की गई अलग-अलग वैल्यू हैं (उदाहरण के लिए, --language=js बनाम --language=ts), तो यह एक बेहतरीन विकल्प है.
पैरामीटर जोड़ने के लिए:
- अपनी
paramsऑब्जेक्ट में अपने पैरामीटर के बारे में बताएं. यहidx-template.jsonमेटाडेटा फ़ाइल में मौजूद होता है. Firebase Studio इस फ़ाइल में मौजूद जानकारी का इस्तेमाल करके, यूज़र इंटरफ़ेस (यूआई) तैयार करता है. जैसे, चेकबॉक्स, ड्रॉप-डाउन, और टेक्स्ट फ़ील्ड. यह यूज़र इंटरफ़ेस, आपके टेंप्लेट के उपयोगकर्ताओं को दिखता है. - अपने
idx-template.nixबूटस्ट्रैप को अपडेट करें, ताकि उपयोगकर्ता ने टेम्प्लेट को इंस्टैंटिएट करते समय जो वैल्यू चुनी हैं उनका इस्तेमाल किया जा सके.
idx-template.json में अपने पैरामीटर के बारे में जानकारी दें
यहां enum पैरामीटर जोड़ने का उदाहरण दिया गया है. यह Firebase Studio
विकल्पों की संख्या के आधार पर, ड्रॉप-डाउन मेन्यू या रेडियो बटन ग्रुप के तौर पर दिखता है:
{
"name": "Hello world",
"description": "A hello world app",
"params": [
{
"id": "language",
"name": "Programming Language",
"type": "enum",
"default": "ts",
"options": {
"js": "JavaScript",
"ts": "TypeScript"
},
"required": true
}
]
}
दो वैल्यू (JavaScript और TypeScript) होने की वजह से, यूज़र इंटरफ़ेस (यूआई) दो विकल्पों के लिए रेडियो बटन ग्रुप रेंडर करेगा. साथ ही, ts या js वैल्यू को idx-template.nix स्क्रिप्ट में पास करेगा.
हर पैरामीटर ऑब्जेक्ट में ये प्रॉपर्टी होती हैं:
| प्रॉपर्टी | प्रकार | जानकारी |
|---|---|---|
| id | string |
पैरामीटर का यूनीक आईडी, जो वैरिएबल के नाम जैसा होता है. |
| नाम | string |
इस पैरामीटर का डिसप्ले नेम. |
| टाइप | string |
इस पैरामीटर के लिए इस्तेमाल किए जाने वाले यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट और बूटस्ट्रैप स्क्रिप्ट को पास किए जाने वाले डेटा टाइप के बारे में बताता है. मान्य वैल्यू ये हैं:
|
| विकल्प | object |
enum पैरामीटर के लिए, यह उपयोगकर्ताओं को दिखाए जाने वाले विकल्पों को दिखाता है. उदाहरण के लिए, अगर विकल्प {"js": "JavaScript", ...} है, तो "JavaScript" को विकल्प के तौर पर दिखाया जाएगा. इसे चुनने पर, इस पैरामीटर की वैल्यू {"js": "JavaScript", ...} होगी.js |
| डिफ़ॉल्ट | string या boolean |
यह कुकी, यूज़र इंटरफ़ेस (यूआई) में शुरुआती वैल्यू सेट करती है. enum पैरामीटर के लिए, यह options में मौजूद कुंजियों में से एक होनी चाहिए. boolean पैरामीटर के लिए, यह true या false होना चाहिए. |
| आवश्यक | boolean |
इससे पता चलता है कि इस पैरामीटर को शामिल करना ज़रूरी है. |
idx-template.nix में पैरामीटर वैल्यू का इस्तेमाल करना
अपनी idx-template.json फ़ाइल में params ऑब्जेक्ट तय करने के बाद, उपयोगकर्ता की चुनी गई पैरामीटर वैल्यू के आधार पर, बूटस्ट्रैप स्क्रिप्ट को पसंद के मुताबिक बनाना शुरू किया जा सकता है.
पिछले सेक्शन में दिए गए उदाहरण के मुताबिक, अगर आपके पास आईडी language वाला एक पैरामीटर है, जो ts या js वैल्यू वाला एक इनम है, तो इसका इस्तेमाल इस तरह किया जा सकता है:
# idx-template.nix
# Accept additional arguments to this template corresponding to template
# parameter IDs, including default values (language=ts by default in this example).
{ pkgs, language ? "ts", ... }: {
packages = [
pkgs.nodejs
];
bootstrap = ''
# We use Nix string interpolation to pass the user's chosen programming
# language to our script.
npm init --yes my-boot-strap@latest "$out" -- --lang=${language}
''
}
एक और सामान्य पैटर्न यह है कि किसी स्ट्रिंग की वैल्यू के आधार पर, कॉन्टेंट को शर्त के साथ शामिल किया जाए. ऊपर दिए गए उदाहरण को इस तरह भी लिखा जा सकता है:
npm init --yes my-boot-strap@latest "$out" -- \
${if language == "ts" then "--lang=ts" else "--lang=js" }
चुनें कि कौनसी फ़ाइलें डिफ़ॉल्ट रूप से खुलनी चाहिए
यह तय करना अच्छा होता है कि आपके टेंप्लेट से नए वर्कस्पेस बनाते समय, किन फ़ाइलों को बदलाव करने के लिए खोला जाना चाहिए. उदाहरण के लिए, अगर आपका टेंप्लेट किसी बुनियादी वेबसाइट के लिए है, तो हो सकता है कि आपको मुख्य एचटीएमएल, JavaScript, और सीएसएस फ़ाइलें खोलनी हों.
यह तय करने के लिए कि कौनसी फ़ाइलें डिफ़ॉल्ट रूप से खुलनी चाहिए, अपनी .idx/dev.nix फ़ाइल (न कि अपनी idx-template.nix फ़ाइल!) को अपडेट करें. इसमें openFiles एट्रिब्यूट के साथ onCreate फ़ाइल फ़ोल्डर हुक शामिल करें. जैसे:
# .idx/dev.nix
{pkgs}: {
...
idx = {
# Workspace lifecycle hooks
workspace = {
# Runs when a workspace is first created with this `dev.nix` file
onCreate = {
# Open editors for the following files by default, if they exist.
# The last file in the list will be focused.
default.openFiles = [
"src/index.css"
"src/index.js"
"src/index.html"
];
# Include other scripts here, as needed, for example:
# installDependencies = "npm install";
};
# To run something each time the workspace is (re)started, use the `onStart` hook
};
# Enable previews and customize configuration
previews = { ... };
};
}
डिफ़ॉल्ट वर्कस्पेस आइकॉन चुनना
अपनी टेंप्लेट से बनाए गए वर्कस्पेस के लिए डिफ़ॉल्ट आइकॉन चुना जा सकता है. इसके लिए, .idx डायरेक्ट्री में dev.nix फ़ाइल के बगल में, icon.png नाम वाली PNG फ़ाइल रखें.
नए फ़ाइल फ़ोल्डर में अपने टेंप्लेट की जांच करना
अपने टेंप्लेट को पूरी तरह से टेस्ट करने का सबसे आसान तरीका है कि आप उससे एक नया वर्कस्पेस बनाएं. यहां दिए गए लिंक पर जाएं. साथ ही, उदाहरण को अपने टेंप्लेट के GitHub डेटा संग्रह स्थान के यूआरएल से बदलें:
https://idx.google.com/new?template=https://github.com/my-org/my-repo
आपके पास ब्रांच और सबफ़ोल्डर को शामिल करने का विकल्प भी होता है. ये सभी मान्य हैं, बशर्ते इन्हें सार्वजनिक तौर पर ऐक्सेस किया जा सके:
https://github.com/my-org/my-repo/https://github.com/my-org/my-repo/tree/main/path/to/myidxtemplatehttps://github.com/my-org/my-repo/tree/branchhttps://github.com/my-org/my-repo/tree/branch/path/to/myidxtemplate
यह वही यूआरएल है जिसे आपको दूसरों के साथ शेयर करना होगा, ताकि वे आपके नए टेंप्लेट का इस्तेमाल कर सकें. इसके अलावा, यह वह यूआरएल भी है जिसे आपको "Firebase Studio में खोलें" बटन से लिंक करना होगा.
अपना टेंप्लेट शेयर करना
जब आपको यह पक्का हो जाए कि आपका टेंप्लेट उम्मीद के मुताबिक काम कर रहा है, तो उसे GitHub डेटाबेस में पब्लिश करें. साथ ही, वही लिंक शेयर करें जिसका इस्तेमाल आपने जांच के लिए वर्कस्पेस बनाते समय किया था.
साथ ही, उपयोगकर्ताओं के लिए आपके टेंप्लेट को ढूंढना और भी आसान बनाने के लिए, अपनी वेबसाइट या रिपॉज़िटरी के README में "Firebase Studio में खोलें" बटन जोड़ें.