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

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

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

अपने ऐप्लिकेशन को 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 चुनें.

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

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

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

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

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

firebase deploy

डाइनैमिक कॉन्टेंट को प्री-रेंडर करना

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

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 सीएलआई मानता है कि आपके पास सर्वर, बिल्ड, और प्रीरेंडरिंग के चरण हैं प्रोडक्शन कॉन्फ़िगरेशन की मदद से अपने स्कीमैटिक का इस्तेमाल करें.

अगर आपको सीएलआई के अनुमानों को अपने हिसाब से बनाना है, तो 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/Express-engine/tokens से एक्सपोर्ट किया गया).