कोणीय यूनिवर्सल को एकीकृत करें

फायरबेस फ्रेमवर्क-अवेयर सीएलआई के साथ, आप अपने एंगुलर एप्लिकेशन को फायरबेस पर तैनात कर सकते हैं और अपने उपयोगकर्ताओं को गतिशील सामग्री प्रदान कर सकते हैं।

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

इससे पहले कि आप अपने ऐप को फायरबेस पर तैनात करना शुरू करें, निम्नलिखित आवश्यकताओं और विकल्पों की समीक्षा करें:

• फायरबेस सीएलआई संस्करण 12.1.0 या बाद का संस्करण। अपनी पसंदीदा विधि का उपयोग करके सीएलआई स्थापित करना सुनिश्चित करें।

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

• वैकल्पिक: AngularFire

फायरबेस आरंभ करें

आरंभ करने के लिए, अपने फ्रेमवर्क प्रोजेक्ट के लिए फायरबेस प्रारंभ करें। किसी नए प्रोजेक्ट के लिए फायरबेस सीएलआई का उपयोग करें, या किसी मौजूदा प्रोजेक्ट के लिए firebase.json संशोधित करें।

एक नया प्रोजेक्ट आरंभ करें

1. फायरबेस सीएलआई में, वेब फ्रेमवर्क पूर्वावलोकन सक्षम करें:

   firebase experiments:enable webframeworks

2. सीएलआई से इनिशियलाइज़ेशन कमांड चलाएँ और फिर संकेतों का पालन करें:

   firebase init hosting

3. "क्या आप वेब फ्रेमवर्क का उपयोग करना चाहते हैं? (प्रयोगात्मक)" का उत्तर हाँ में दें

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

5. यदि संकेत दिया जाए, तो कोणीय चुनें।

किसी मौजूदा प्रोजेक्ट को प्रारंभ करें

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

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

स्थिर सामग्री परोसें

फायरबेस आरंभ करने के बाद, आप मानक परिनियोजन कमांड के साथ स्थिर सामग्री परोस सकते हैं:

firebase deploy

गतिशील सामग्री को पूर्व-रेंडर करें

एंगुलर में गतिशील सामग्री को प्रीरेंडर करने के लिए, आपको एंगुलर यूनिवर्सल सेट अप करना होगा। फायरबेस सीएलआई एक्सप्रेस इंजन से अपेक्षा करता है:

ng add @nguniversal/express-engine

अधिक जानकारी के लिए एंगुलर यूनिवर्सल गाइड देखें।

प्रीरेंडर URL जोड़ें

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

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

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

वैकल्पिक: एक सर्वर मॉड्यूल जोड़ें

तैनात करना

जब आप firebase deploy के साथ परिनियोजन करते हैं, तो फ़ायरबेस आपका ब्राउज़र बंडल, आपका सर्वर बंडल बनाता है, और एप्लिकेशन को प्रीरेंडर करता है। इन तत्वों को फायरबेस के लिए होस्टिंग और क्लाउड फ़ंक्शंस में तैनात किया गया है।

कस्टम तैनाती

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

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

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

वैकल्पिक: फायरबेस जेएस एसडीके के साथ एकीकृत करें

सर्वर और क्लाइंट बंडल दोनों में फायरबेस जेएस एसडीके विधियों को शामिल करते समय, उत्पाद का उपयोग करने से पहले isSupported() जांच करके रनटाइम त्रुटियों से सावधान रहें। सभी उत्पाद सभी परिवेशों में समर्थित नहीं हैं.

वैकल्पिक: फायरबेस एडमिन एसडीके के साथ एकीकृत करें

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

// 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');

एसएसआर के साथ पूरी तरह से गतिशील सामग्री परोसें

वैकल्पिक: फायरबेस प्रमाणीकरण के साथ एकीकृत करें

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