ऐंग्युलर यूनिवर्सल का समाकलन करें

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 सीएलआई को Express Engine की उम्मीद है:

ng add @nguniversal/express-engine

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

पहले से रेंडर किए गए यूआरएल जोड़ना

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