Firebase के फ़्रेमवर्क-अवेयर CLI की मदद से, अपने Angular ऐप्लिकेशन को Firebase पर डिप्लॉय किया जा सकता है. साथ ही, उपयोगकर्ताओं को डाइनैमिक कॉन्टेंट दिखाया जा सकता है.
शुरू करने से पहले
अपने ऐप्लिकेशन को Firebase पर डिप्लॉय करने से पहले, यहां दी गई ज़रूरी शर्तें और विकल्प देखें:
- Firebase CLI का वर्शन 12.1.0 या इसके बाद का वर्शन. पक्का करें कि आपने अपने पसंदीदा तरीके का इस्तेमाल करके, सीएलआई इंस्टॉल किया हो.
ज़रूरी नहीं: आपके Firebase प्रोजेक्ट पर बिलिंग की सुविधा चालू हो (अगर आपको एसएसआर का इस्तेमाल करना है, तो यह ज़रूरी है)
ज़रूरी नहीं: AngularFire
Firebase को चालू करना
शुरू करने के लिए, अपने फ़्रेमवर्क प्रोजेक्ट के लिए Firebase को चालू करें.
नए प्रोजेक्ट के लिए, Firebase सीएलआई का इस्तेमाल करें या किसी मौजूदा प्रोजेक्ट के लिए firebase.json में बदलाव करें.
नया प्रोजेक्ट शुरू करना
- Firebase CLI में, वेब फ़्रेमवर्क की झलक दिखाने की सुविधा चालू करें:
firebase experiments:enable webframeworks
सीएलआई से, शुरू करने का निर्देश चलाएं. इसके बाद, दिए गए निर्देशों का पालन करें:
firebase init hosting
"क्या आपको वेब फ़्रेमवर्क का इस्तेमाल करना है? (एक्सपेरिमेंट के तौर पर उपलब्ध)"
होस्टिंग सोर्स डायरेक्ट्री चुनें. यह कोई मौजूदा Angular ऐप्लिकेशन हो सकता है.
अगर कहा जाए, तो Angular चुनें.
किसी मौजूदा प्रोजेक्ट को शुरू करना
firebase.json में जाकर, होस्टिंग कॉन्फ़िगरेशन बदलें, ताकि आपको public के बजाय source विकल्प मिल सके. उदाहरण के लिए:
{
"hosting": {
"source": "./path-to-your-angular-workspace"
}
}
स्टैटिक कॉन्टेंट दिखाना
Firebase को शुरू करने के बाद, स्टैंडर्ड डिप्लॉयमेंट कमांड का इस्तेमाल करके स्टैटिक कॉन्टेंट दिखाया जा सकता है:
firebase deploy
डाइनैमिक कॉन्टेंट को पहले से रेंडर करना
Angular में डाइनैमिक कॉन्टेंट को पहले से रेंडर करने के लिए, आपको Angular SSR सेट अप करना होगा.
ng add @angular/ssr
ज़्यादा जानकारी के लिए, Angular Prerendering (SSG) गाइड देखें.
ज़रूरी नहीं: सर्वर मॉड्यूल जोड़ें
डिप्लॉय करें
firebase deploy का इस्तेमाल करके डिप्लॉय करने पर, Firebase आपके ब्राउज़र बंडल, सर्वर बंडल को बनाता है. साथ ही, ऐप्लिकेशन को पहले से रेंडर करता है. इन एलिमेंट को Hosting और Cloud Functions for Firebase पर डिप्लॉय किया जाता है.
कस्टम डिप्लॉय
Firebase सीएलआई यह मानता है कि आपने angular.json में एक ऐप्लिकेशन तय किया है, जिसमें प्रोडक्शन बिल्ड कॉन्फ़िगरेशन है.
अगर आपको सीएलआई के अनुमानों में बदलाव करना है, तो FIREBASE_FRAMEWORKS_BUILD_TARGET एनवायरमेंट वैरिएबल का इस्तेमाल करें या AngularFire जोड़ें और angular.json में बदलाव करें:
{
"deploy": {
"builder": "@angular/fire:deploy",
"options": {
"version": 2,
"buildTarget": "OVERRIDE_YOUR_BUILD_TARGET"
}
}
}
ज़रूरी नहीं है: 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 से एक्सपोर्ट किया जाता है) के ज़रिए, आपके मॉड्यूल में इंजेक्ट किया जा सकता है.