Google is committed to advancing racial equity for Black communities. See how.
इस पेज का अनुवाद Cloud Translation API से किया गया है.
Switch to English

अपने जावास्क्रिप्ट प्रोजेक्ट में फायरबेस जोड़ें

अपने वेब ऐप में फायरबेस जावास्क्रिप्ट एसडीके का उपयोग करने के लिए या एंड-यूज़र एक्सेस के लिए क्लाइंट के रूप में, उदाहरण के लिए, Node.js डेस्कटॉप या IoT एप्लिकेशन में इस गाइड का पालन करें।

आवश्यक शर्तें

यदि आपके पास पहले से कोई JavaScript प्रोजेक्ट नहीं है और आप केवल Firebase उत्पाद आज़माना चाहते हैं, तो आप हमारे क्विकस्टार्ट नमूनों में से एक डाउनलोड कर सकते हैं

चरण 1 : एक फायरबेस प्रोजेक्ट बनाएं

इससे पहले कि आप अपने जावास्क्रिप्ट ऐप में फायरबेस को जोड़ सकें, आपको अपने ऐप से कनेक्ट करने के लिए फायरबेस प्रोजेक्ट बनाना होगा।

फायरबेस प्रोजेक्ट्स के बारे में अधिक जानें और प्रोजेक्ट्स में एप्स जोड़ने के लिए फायरबेस प्रोजेक्ट्स और बेस्ट प्रैक्टिस के बारे में अधिक जानें।

चरण 2 : अपने ऐप को फायरबेस के साथ पंजीकृत करें

आपके पास फायरबेस प्रोजेक्ट होने के बाद, आप इसमें अपना वेब ऐप जोड़ सकते हैं।

Firebase प्रोजेक्ट में एप्लिकेशन जोड़ने के लिए सर्वोत्तम प्रथाओं और विचारों के बारे में अधिक जानने के लिए Firebase प्रोजेक्ट्स पर जाएं।

  1. फायरबेस कंसोल के प्रोजेक्ट अवलोकन पृष्ठ के केंद्र में, सेटअप वर्कफ़्लो को लॉन्च करने के लिए वेब आइकन ( ) पर क्लिक करें।

    यदि आपने पहले ही अपने फायरबेस प्रोजेक्ट में एक ऐप जोड़ लिया है, तो प्लेटफ़ॉर्म विकल्पों को प्रदर्शित करने के लिए ऐप जोड़ें पर क्लिक करें।

  2. अपने ऐप का उपनाम दर्ज करें।
    यह उपनाम एक आंतरिक, सुविधा पहचानकर्ता है और आपको केवल Firebase कंसोल में दिखाई देता है।

  3. (वैकल्पिक) अपने वेब ऐप के लिए फायरबेस होस्टिंग सेट करें।

    • आप अभी या बाद में Firebase Hosting सेट कर सकते हैं। आप अपने प्रोजेक्ट सेटिंग्स में किसी भी समय अपने फायरबेस वेब ऐप को होस्टिंग साइट से लिंक कर सकते हैं

    • यदि आप अभी होस्टिंग स्थापित करना चुनते हैं, तो अपने फायरबेस वेब ऐप से लिंक करने के लिए ड्रॉपडाउन सूची से एक साइट चुनें।

      • यह सूची आपके प्रोजेक्ट की डिफ़ॉल्ट होस्टिंग साइट और उन अन्य साइटों को प्रदर्शित करती है, जिन्हें आपने अपनी परियोजना में स्थापित किया है।

      • कोई भी साइट जो आप पहले से ही Firebase Web App से लिंक कर चुके हैं, अतिरिक्त लिंकिंग के लिए उपलब्ध नहीं है। प्रत्येक होस्टिंग साइट को केवल सिंगल फायरबेस वेब ऐप से जोड़ा जा सकता है।

  4. रजिस्टर एप पर क्लिक करें।

चरण 3 : Firebase SDKs जोड़ें और Firebase को इनिशियलाइज़ करें

फायरबैस अधिकांश फायरबस उत्पादों के लिए जावास्क्रिप्ट लाइब्रेरी प्रदान करता है, जिसमें रिमोट कॉन्फ़िगरेशन, एफसीएम, और बहुत कुछ शामिल हैं। आप अपने ऐप में किसी भी उपलब्ध लाइब्रेरी को जोड़ सकते हैं।

आप अपने वेब ऐप में फायरबेस एसडीके कैसे जोड़ते हैं, यह इस बात पर निर्भर करता है कि आपने अपने ऐप के लिए फायरबेस होस्टिंग का उपयोग करने के लिए चुना है, आप अपने ऐप के साथ किस टूलिंग का उपयोग कर रहे हैं (जैसे मॉड्यूल बंडलर), या यदि आप Node.js को कॉन्फ़िगर कर रहे हैं ऐप। इन विकल्पों के बीच चयन करने में अधिक सहायता के लिए, वेब एसडीके को अपने ऐप में जोड़ने के तरीके देखें।

मॉड्यूल बंडलों का उपयोग करना

आप फायरबेस जावास्क्रिप्ट एसडीके के आंशिक आयात को कॉन्फ़िगर कर सकते हैं और केवल उन फायरबेस उत्पादों को लोड कर सकते हैं जिनकी आपको आवश्यकता है। यदि आप एक बंडलर (जैसे ब्राउज़र ब्राउज़र या वेबपैक) का उपयोग कर रहे हैं, तो आप जरूरत पड़ने पर अलग-अलग फायरबेस उत्पादों का import कर सकते हैं।

  1. फायरबेस जावास्क्रिप्ट एसडीके स्थापित करें:

    1. यदि आपके पास पहले से एक package.json नहीं है package.json फाइल फ़ाइल, अपने जावास्क्रिप्ट प्रोजेक्ट के रूट से निम्न कमांड चलाकर एक बनाएं:

      npm init

    2. firebase एनपीएम पैकेज को स्थापित करें और इसे अपने package.json सहेजें package.json रनिंग फ़ाइल:

      npm install --save firebase

  2. केवल विशिष्ट Firebase उत्पादों (जैसे प्रमाणीकरण और क्लाउड फायरस्टोर) को शामिल करने के लिए, Firebase मॉड्यूल import :

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import firebase from "firebase/app";
    // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
    // import * as firebase from "firebase/app"
    
    // If you enabled Analytics in your project, add the Firebase SDK for Analytics
    import "firebase/analytics";
    
    // Add the Firebase products that you want to use
    import "firebase/auth";
    import "firebase/firestore";
    
  3. अपने ऐप में फायरबेस को आरम्भ करें:

    // TODO: Replace the following with your app's Firebase project configuration
    // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
    const firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

सीडीएन से

आप फायरबेस जावास्क्रिप्ट एसडीके के आंशिक आयात को कॉन्फ़िगर कर सकते हैं और केवल उन फायरबेस उत्पादों को लोड कर सकते हैं जिनकी आपको आवश्यकता है। फायरबेस, फायरबेस जावास्क्रिप्ट एसडीके के प्रत्येक पुस्तकालय को हमारे वैश्विक सीडीएन (सामग्री वितरण नेटवर्क) पर संग्रहीत करता है।

  1. केवल विशिष्ट Firebase उत्पादों (उदाहरण के लिए, प्रमाणीकरण और क्लाउड फायरस्टोर) को शामिल करने के लिए, निम्न स्क्रिप्ट को अपने <body> टैग के नीचे जोड़ें, लेकिन इससे पहले कि आप किसी भी Firebase सेवाओं का उपयोग करें:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-firestore.js"></script>
    </body>
    


  2. अपने ऐप में फायरबेस को आरम्भ करें:

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <script>
        // TODO: Replace the following with your app's Firebase project configuration
        // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
        var firebaseConfig = {
          // ...
        };
    
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
      </script>
    </body>
    

होस्टिंग URL से

जब आप Firebase Hosting का उपयोग करते हैं, तो आप आरक्षित URL से गतिशील रूप से Firebase JavaScript SDK पुस्तकालयों को लोड करने के लिए अपने ऐप को कॉन्फ़िगर कर सकते हैं। आरक्षित होस्टिंग URL के माध्यम से एसडीके को जोड़ने के बारे में अधिक जानें।

इस सेटअप विकल्प के साथ, आप फायरबेस में तैनात होने के बाद, आपका ऐप फायरबेस प्रोजेक्ट से फायरबेस कॉन्फ़िगरेशन ऑब्जेक्ट को स्वचालित रूप से खींचता है, जिस पर आपने तैनाती की है। आप कई फायरबेस परियोजनाओं के लिए एक ही कोडबेस को तैनात कर सकते हैं, लेकिन आपको फायरबेस कॉन्फ़िगरेशन को ट्रैक करने की आवश्यकता नहीं है जिसका उपयोग आप firebase.initializeApp() लिए कर रहे हैं।

यह सेटअप विकल्प स्थानीय रूप से आपके वेब ऐप के परीक्षण के लिए भी काम करता है।

  1. केवल विशिष्ट Firebase उत्पादों (उदाहरण के लिए, Analytics, प्रमाणीकरण या क्लाउड फायरस्टोर) को शामिल करने के लिए, निम्न स्क्रिप्ट को अपने <body> टैग के नीचे जोड़ें, लेकिन इससे पहले कि आप किसी भी Firebase सेवाओं का उपयोग करें:

    0715b7878b0


  2. अपने ऐप में फायरबेस को आरम्भ करें (आरक्षित होस्टिंग URL का उपयोग करते समय अपनी फायरबेस कॉन्फ़िगरेशन ऑब्जेक्ट को शामिल करने की आवश्यकता नहीं):

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
    </body>
    

Node.js ऐप्स

  1. फायरबेस जावास्क्रिप्ट एसडीके स्थापित करें:

    1. यदि आपके पास पहले से एक package.json नहीं है package.json फाइल फ़ाइल, अपने जावास्क्रिप्ट प्रोजेक्ट के रूट से निम्न कमांड चलाकर एक बनाएं:

      npm init
    2. firebase npm पैकेज स्थापित करें और इसे अपने package.json सहेजें package.json फ़ाइल को चलाकर:

      npm install --save firebase
  2. अपने ऐप में फायरबेस मॉड्यूल का उपयोग करने के लिए निम्नलिखित विकल्पों में से एक का उपयोग करें:

    • आपको किसी भी जावास्क्रिप्ट फ़ाइल से मॉड्यूल की require हो सकती require

      केवल विशिष्ट फायरबेस उत्पादों (जैसे प्रमाणीकरण और क्लाउड फायरस्टार) को शामिल करने के लिए:

      // Firebase App (the core Firebase SDK) is always required and
      // must be listed before other Firebase SDKs
      var firebase = require("firebase/app");
      
      // Add the Firebase products that you want to use
      require("firebase/auth");
      require("firebase/firestore");
      


    • आप मॉड्यूल import करने के लिए ES2015 का उपयोग कर सकते हैं

      केवल विशिष्ट फायरबेस उत्पादों (जैसे प्रमाणीकरण और क्लाउड फायरस्टार) को शामिल करने के लिए:

      // Firebase App (the core Firebase SDK) is always required and
      // must be listed before other Firebase SDKs
      import firebase from "firebase/app";
      
      // Add the Firebase services that you want to use
      import "firebase/auth";
      import "firebase/firestore";
      
  3. अपने ऐप में फायरबेस को आरम्भ करें:

    // TODO: Replace the following with your app's Firebase project configuration
    // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

Firebase config ऑब्जेक्ट के बारे में जानें

अपने ऐप में Firebase को इनिशियलाइज़ करने के लिए, आपको अपने ऐप के Firebase प्रोजेक्ट कॉन्फ़िगरेशन को प्रदान करना होगा। आप किसी भी समय अपने फायरबेस विन्यास वस्तु प्राप्त कर सकते हैं।

  • यदि आप आरक्षित होस्टिंग URL का उपयोग करते हैं , तो आपका Firebase config स्वचालित रूप से आपके Firebase प्रोजेक्ट से खींच लिया जाता है, इसलिए आपको अपने कोड में स्पष्ट रूप से अपनी config ऑब्जेक्ट प्रदान करने की आवश्यकता नहीं है।

  • हम विशेष रूप से निम्नलिखित " apiKey विकल्प": apiKey , projectId , और appID ऑब्जेक्ट को मैन्युअल रूप से संपादित करने की अनुशंसा नहीं करते हैं। यदि आप अपने एप्लिकेशन को इन आवश्यक "फायरबेस विकल्प" के लिए अमान्य या लापता मानों के साथ आरंभ करते हैं, तो आपके ऐप के उपयोगकर्ता गंभीर मुद्दों का अनुभव कर सकते हैं।

  • यदि आपने Google Analytics को अपने Firebase प्रोजेक्ट में सक्षम किया है, तो आपकी कॉन्फिग ऑब्जेक्ट में फ़ील्ड measurementIdप्रारंभ पृष्ठ में Analytics के इस क्षेत्र के बारे में अधिक जानें।

यहां सक्षम सभी सेवाओं के साथ एक कॉन्फ़िगर ऑब्जेक्ट का प्रारूप है (ये मान स्वचालित रूप से आबादी वाले हैं):

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

यहाँ उदाहरण मूल्यों के साथ एक विन्यास वस्तु है:

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
  authDomain: "myapp-project-123.firebaseapp.com",
  databaseURL: "https://myapp-project-123.firebaseio.com",
  projectId: "myapp-project-123",
  storageBucket: "myapp-project-123.appspot.com",
  messagingSenderId: "65211879809",
  appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
  measurementId: "G-8GSGZQ44ST"
};

चरण 4 : (वैकल्पिक) सीएलआई स्थापित करें और फायरबेस होस्टिंग में तैनात करें

यदि आपने अपने Firebase Web App को Firebase Hosting साइट के साथ लिंक किया है, तो आप अपनी साइट की सामग्री और कॉन्फ़िगरेशन अब (जब आपका वेब ऐप सेट कर रहे हों) या कभी भी पोस्ट कर सकते हैं।

फायरबेस को तैनात करने के लिए, आप फायरबेस सीएलआई, एक कमांड-लाइन टूल का उपयोग करेंगे।

  1. सीएलआई स्थापित करने या इसके नवीनतम संस्करण को अपडेट करने के तरीके जानने के लिए फायरबेस सीएलआई प्रलेखन पर जाएं।

  2. अपने फायरबेस प्रोजेक्ट को आरम्भ करें। अपने स्थानीय एप्लिकेशन निर्देशिका की जड़ से निम्नलिखित कमांड चलाएँ:

    firebase init

  3. अपनी सामग्री और होस्टिंग कॉन्फ़िगरेशन को फायरबेस होस्टिंग पर नियोजित करें।

    डिफ़ॉल्ट होस्टिंग साइट

    डिफ़ॉल्ट रूप से, हर फायरबेस प्रोजेक्ट में web.app और firebaseapp.com डोमेन ( project-id .web.app और project-id .firebaseapp.com ) पर मुफ्त उप डोमेन हैं।

    1. अपनी साइट पर तैनात करें। अपने ऐप के रूट डायरेक्टरी से निम्न कमांड चलाएँ:

      firebase deploy
    2. अपनी साइट को अपनी डिफ़ॉल्ट साइटों में से किसी एक पर देखें:

      • project-id .web.app
      • project-id .firebaseapp.com

    गैर-डिफ़ॉल्ट होस्टिंग साइट

    फायरबेस परियोजनाएं कई साइटों का समर्थन करती हैं (इन्हें आपकी गैर-डिफ़ॉल्ट साइट माना जाता है )। आप कंसोल के वेब ऐप सेटअप वर्कफ़्लो के दौरान या कंसोल के होस्टिंग पृष्ठ से अपनी परियोजना में अतिरिक्त साइटें जोड़ सकते हैं।

    1. अपनी साइट को अपनी firebase.json फ़ाइल में जोड़ें (जो firebase init के दौरान बनाई गई थी)।

      ध्यान दें कि यह firebase.json कॉन्फ़िगरेशन मानता है कि आपकी प्रत्येक साइट के लिए अलग-अलग रिपॉजिटरी हैं।

      {
        "hosting": {
          "site": "site-name>",
          "public": "public",
      
          // ...
        }
      }
      
    2. अपनी साइट पर तैनात करें। अपने ऐप के रूट डायरेक्टरी से निम्न कमांड चलाएँ:

      firebase deploy --only hosting:site-name
      है
    3. या तो अपनी साइट देखें:

      • site-name .web.app
      • site-name .firebaseapp.com

चरण 5 : अपने ऐप में फायरबेस को एक्सेस करें

फायरबेस जावास्क्रिप्ट एसडीके निम्नलिखित फायरबेस उत्पादों का समर्थन करता है। प्रत्येक उत्पाद वैकल्पिक है और इसे firebase नेमस्पेस से एक्सेस किया जा सकता है।

फायरबेस जावास्क्रिप्ट संदर्भ प्रलेखन में उपलब्ध तरीकों के बारे में जानें।

फायरबेस उत्पाद नाम स्थान वेब Node.js
एनालिटिक्स firebase.analytics()
प्रमाणीकरण firebase.auth()
क्लाउड फायरस्टार firebase.firestore()
फायरबेस क्लाइंट एसडीके के लिए क्लाउड फ़ंक्शंस firebase.functions()
क्लाउड मैसेजिंग firebase.messaging()
घन संग्रहण firebase.storage()
प्रदर्शन की निगरानी ( बीटा रिलीज़) firebase.performance()
रियलटाइम डेटाबेस firebase.database()
रिमोट कॉन्फ़िगरेशन ( बीटा रिलीज़) firebase.remoteConfig()

उपलब्ध पुस्तकालय

अगले कदम

Firebase के बारे में जानें:

अपने ऐप में फायरबेस सेवाएं जोड़ें: