ऐंगुलर यूनिवर्सल इंटिग्रेट करें

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

शुरू करने से पहले

अपने ऐप्लिकेशन को Firebase में डिप्लॉय करने से पहले, इन ज़रूरी शर्तों और विकल्पों को देखें:

  • Firebase सीएलआई 12.1.0 या इसके बाद का वर्शन. पक्का करें कि आपने अपने पसंदीदा तरीके से सीएलआई इंस्टॉल किया हो.
  • ज़रूरी नहीं: आपके Firebase प्रोजेक्ट के लिए बिलिंग की सुविधा चालू है (अगर आपको एसएसआर का इस्तेमाल करना है, तो ज़रूरी है)

  • ज़रूरी नहीं: AngularFire

Firebase शुरू करें

शुरू करने के लिए, अपने फ़्रेमवर्क प्रोजेक्ट के लिए Firebase शुरू करें. नए प्रोजेक्ट के लिए Firebase सीएलआई का इस्तेमाल करें या किसी मौजूदा प्रोजेक्ट के लिए firebase.json में बदलाव करें.

नया प्रोजेक्ट शुरू करें

  1. Firebase सीएलआई में, वेब फ़्रेमवर्क की झलक चालू करें:
    firebase experiments:enable webframeworks
  2. सीएलआई से शुरू करने वाला कमांड चलाएं और फिर दिए गए निर्देशों का पालन करें:

    firebase init hosting

  3. "क्या आपको वेब फ़्रेमवर्क इस्तेमाल करना है? (एक्सपेरिमेंट के तौर पर उपलब्ध है)"

  4. अपनी होस्टिंग सोर्स डायरेक्ट्री चुनें. यह पहले से मौजूद Angular ऐप्लिकेशन भी हो सकता है.

  5. अगर कहा जाए, तो Angular चुनें.

मौजूदा प्रोजेक्ट शुरू करना

firebase.json में अपने होस्टिंग कॉन्फ़िगरेशन को बदलकर, public के बजाय source विकल्प चुनें. उदाहरण के लिए:

{
  "hosting": {
    "source": "./path-to-your-angular-workspace"
  }
}

स्टैटिक कॉन्टेंट दिखाएं

Firebase शुरू करने के बाद, स्टैंडर्ड डिप्लॉयमेंट कमांड के साथ स्टैटिक कॉन्टेंट दिखाया जा सकता है:

firebase deploy

डाइनैमिक कॉन्टेंट को पहले से रेंडर करना

Angular में डाइनैमिक कॉन्टेंट को पहले से रेंडर करने के लिए, आपको Angular Universal को सेट अप करना होगा. Firebase सीएलआई को एक्सप्रेस इंजन की ज़रूरत है:

ng add @nguniversal/express-engine

ज़्यादा जानकारी के लिए, Angular की यूनिवर्सल गाइड देखें.

प्रीरेंडरिंग यूआरएल जोड़ना

डिफ़ॉल्ट तौर पर, सिर्फ़ रूट डायरेक्ट्री को ही प्रीरेंडर किया जाता है. angular.json में प्रीरेंडरिंग चरण का पता लगाकर और ज़्यादा रूट जोड़कर, और रूट जोड़े जा सकते हैं:

{
  "prerender": {
    "builder": "@nguniversal/builders:prerender",
    "options": {
      "routes": ["/", "ANOTHER_ROUTE", "AND_ANOTHER"]
    },
    "configurations": {
      /* ... */
    },
    "defaultConfiguration": "production"
  }
}

अगर आपको इसे अपनी पसंद के मुताबिक बनाना है, तो Firebase, होस्टिंग रूट में guessRoutes या routes.txt फ़ाइल का भी इस्तेमाल करता है. उन विकल्पों के बारे में ज़्यादा जानकारी के लिए, Angular की प्रीरेंडरिंग गाइड देखें.

ज़रूरी नहीं: सर्वर मॉड्यूल जोड़ें

डिप्लॉय करें

firebase deploy के साथ डिप्लॉय करने पर, Firebase आपका ब्राउज़र बंडल और सर्वर बंडल बनाता है. साथ ही, ऐप्लिकेशन को प्रीरेंडर करता है. इन एलिमेंट को 'Firebase के लिए होस्टिंग' और Cloud Functions पर डिप्लॉय किया जाता है.

कस्टम डिप्लॉयमेंट

Firebase सीएलआई यह मानता है कि आपके पास प्रोडक्शन कॉन्फ़िगरेशन के साथ अपने स्कीमाटिक में सर्वर, बिल्ड, और प्रीरेंडर करने के चरण हैं.

अगर आपको सीएलआई का अनुमान अपने हिसाब से बनाना है, तो ng deploy कॉन्फ़िगर करें और angular.json के कॉन्फ़िगरेशन में बदलाव करें. उदाहरण के लिए, serverTarget को हटाकर, एसएसआर को बंद किया जा सकता है और पहले से रेंडर किया गया कॉन्टेंट उपलब्ध कराया जा सकता है:

{
  "deploy": {
    "builder": "@angular/fire:deploy",
    "options": {
      "browserTarget": "app:build:production",
      "serverTarget": "app:server:production",
      "prerenderTarget": "app:prerender:production"
    }
  }
}

ज़रूरी नहीं: Firebase JS SDK टूल के साथ इंटिग्रेट करें

सर्वर और क्लाइंट बंडल, दोनों में Firebase JS SDK टूल शामिल करते समय, प्रॉडक्ट का इस्तेमाल करने से पहले isSupported() की जांच करके, रनटाइम की गड़बड़ियों से बचा जा सकता है. सभी प्रॉडक्ट सभी एनवायरमेंट में काम नहीं करते.

ज़रूरी नहीं: Firebase एडमिन SDK के साथ इंटिग्रेट करना

अगर एडमिन बंडल आपके ब्राउज़र के बिल्ड में शामिल किए गए हैं, तो वे काम नहीं करेंगे. इसलिए, उन्हें अपने सर्वर मॉड्यूल में शामिल करें और वैकल्पिक डिपेंडेंसी के तौर पर इंजेक्ट करें:

// your-component.ts
import type { app } from 'firebase-admin';
import { FIREBASE_ADMIN } from '../app.module';

@Component({...})
export class YourComponent {

  constructor(@Optional() @Inject(FIREBASE_ADMIN) admin: app.App) {
    ...
  }
}

// app.server.module.ts
import * as admin from 'firebase-admin';
import { FIREBASE_ADMIN } from './app.module';

@NgModule({
  …
  providers: [
    …
    { provide: FIREBASE_ADMIN, useFactory: () => admin.apps[0] || admin.initializeApp() }
  ],
})
export class AppServerModule {}

// app.module.ts
import type { app } from 'firebase-admin';

export const FIREBASE_ADMIN = new InjectionToken<app.App>('firebase-admin');

एसएसआर के साथ पूरी तरह डाइनैमिक कॉन्टेंट दिखाएं

ज़रूरी नहीं: Firebase से पुष्टि करने की सुविधा के साथ इंटिग्रेट करें

वेब फ़्रेमवर्क-अवेयर Firebase डिप्लॉयमेंट टूल, कुकी का इस्तेमाल करके क्लाइंट और सर्वर की स्थिति को अपने-आप सिंक रखता है. एक्सप्रेस res.locals ऑब्जेक्ट में पुष्टि किया गया Firebase ऐप्लिकेशन इंस्टेंस (firebaseApp) और साइन इन किया हुआ मौजूदा उपयोगकर्ता (currentUser) शामिल होगा. इसे @nguniversal/Express-engine/tokens से एक्सपोर्ट किए गए REQUEST टोकन की मदद से, आपके मॉड्यूल में इंजेक्ट किया जा सकता है.