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

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

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

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

• Firebase सीएलआई का 12.1.0 या इसके बाद का वर्शन. अपने पसंदीदा तरीके का इस्तेमाल करके, सीएलआई इंस्टॉल करें.

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

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

Firebase को शुरू करना

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

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

1. Firebase CLI में, वेब फ़्रेमवर्क की झलक देखने की सुविधा चालू करें:

   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 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 आपके ब्राउज़र बंडल और सर्वर बंडल बनाता है. साथ ही, ऐप्लिकेशन को पहले से रेंडर करता है. ये एलिमेंट, Hosting और Cloud Functions for Firebase पर डिप्लॉय किए जाते हैं.

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

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

अगर आपको सीएलआई की मान्यताओं को अपने हिसाब से बनाना है, तो 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 Admin 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 Authentication के साथ इंटिग्रेट करना

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