ফায়ারবেস ফ্রেমওয়ার্ক-সচেতন CLI এর সাহায্যে, আপনি আপনার অ্যাঙ্গুলার অ্যাপ্লিকেশনটি ফায়ারবেসে স্থাপন করতে পারেন এবং আপনার ব্যবহারকারীদের কাছে গতিশীল সামগ্রী পরিবেশন করতে পারেন।
শুরু করার আগে
Firebase-এ আপনার অ্যাপ স্থাপন শুরু করার আগে, নিম্নলিখিত প্রয়োজনীয়তা এবং বিকল্পগুলি পর্যালোচনা করুন:
- Firebase CLI ভার্সন ১২.১.০ বা তার পরবর্তী। আপনার পছন্দের পদ্ধতি ব্যবহার করে CLI ইনস্টল করতে ভুলবেন না।
ঐচ্ছিক: আপনার Firebase প্রকল্পে বিলিং সক্ষম করা হয়েছে (যদি আপনি SSR ব্যবহার করার পরিকল্পনা করেন তবে প্রয়োজন)
ঐচ্ছিক: অ্যাঙ্গুলারফায়ার
ফায়ারবেস আরম্ভ করুন
শুরু করতে, আপনার ফ্রেমওয়ার্ক প্রকল্পের জন্য Firebase আরম্ভ করুন। একটি নতুন প্রকল্পের জন্য Firebase CLI ব্যবহার করুন, অথবা একটি বিদ্যমান প্রকল্পের জন্য firebase.json পরিবর্তন করুন।
একটি নতুন প্রকল্প শুরু করুন
- Firebase CLI-তে, ওয়েব ফ্রেমওয়ার্ক প্রিভিউ সক্ষম করুন:
firebase experiments:enable webframeworks
CLI থেকে initialization কমান্ডটি চালান এবং তারপর প্রম্পটগুলি অনুসরণ করুন:
firebase init hosting
"আপনি কি একটি ওয়েব ফ্রেমওয়ার্ক ব্যবহার করতে চান? (পরীক্ষামূলক)" প্রশ্নের উত্তর হ্যাঁ দিন।
আপনার হোস্টিং সোর্স ডিরেক্টরিটি বেছে নিন; এটি একটি বিদ্যমান অ্যাঙ্গুলার অ্যাপ হতে পারে।
যদি অনুরোধ করা হয়, তাহলে Angular নির্বাচন করুন।
একটি বিদ্যমান প্রকল্প শুরু করুন
firebase.json এ আপনার হোস্টিং কনফিগারেশনটি public অপশনের পরিবর্তে source অপশনে পরিবর্তন করুন। উদাহরণস্বরূপ:
{
"hosting": {
"source": "./path-to-your-angular-workspace"
}
}
স্ট্যাটিক কন্টেন্ট পরিবেশন করুন
Firebase আরম্ভ করার পরে, আপনি স্ট্যান্ডার্ড ডিপ্লয়মেন্ট কমান্ডের সাহায্যে স্ট্যাটিক কন্টেন্ট পরিবেশন করতে পারেন:
firebase deploy
প্রি-রেন্ডার ডায়নামিক কন্টেন্ট
Angular-এ ডাইনামিক কন্টেন্ট প্রি-রেন্ডার করতে, আপনাকে Angular SSR সেট আপ করতে হবে।
ng add @angular/ssr
আরও তথ্যের জন্য অ্যাঙ্গুলার প্রিরেন্ডারিং (SSG) নির্দেশিকা দেখুন।
ঐচ্ছিক: একটি সার্ভার মডিউল যোগ করুন
স্থাপন করুন
যখন আপনি firebase deploy দিয়ে ডিপ্লয় করেন, তখন Firebase আপনার ব্রাউজার বান্ডেল, আপনার সার্ভার বান্ডেল তৈরি করে এবং অ্যাপ্লিকেশনটিকে প্রিরেন্ডার করে। এই উপাদানগুলি Cloud Functions for Firebase Hosting এবং ক্লাউড ফাংশনে ডিপ্লয় করা হয়।
কাস্টম স্থাপন
Firebase CLI ধরে নেয় যে আপনার angular.json এ প্রোডাকশন বিল্ড কনফিগারেশন সহ একটি একক অ্যাপ্লিকেশন সংজ্ঞায়িত করা আছে।
যদি CLI এর অনুমানগুলি সামঞ্জস্য করার প্রয়োজন হয়, তাহলে আপনি 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 অ্যাডমিন 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');
SSR এর সাথে সম্পূর্ণ গতিশীল কন্টেন্ট পরিবেশন করুন
ঐচ্ছিক: Firebase প্রমাণীকরণের সাথে একীভূত করুন
ওয়েব ফ্রেমওয়ার্ক-সচেতন Firebase ডিপ্লয়মেন্ট টুলিং স্বয়ংক্রিয়ভাবে কুকি ব্যবহার করে ক্লায়েন্ট এবং সার্ভারের অবস্থা সিঙ্কে রাখে। Express res.locals অবজেক্টে ঐচ্ছিকভাবে একটি প্রমাণিত Firebase অ্যাপ ইনস্ট্যান্স ( firebaseApp ) এবং বর্তমানে সাইন ইন করা ব্যবহারকারী ( currentUser ) থাকবে। এটি REQUEST টোকেনের মাধ্যমে আপনার মডিউলে ইনজেক্ট করা যেতে পারে (@nguniversal/express-engine/tokens থেকে রপ্তানি করা)।