কৌণিক সংহত করুন

Firebase ফ্রেমওয়ার্ক-সচেতন CLI-এর সাহায্যে, আপনি Firebase-এ আপনার কৌণিক অ্যাপ্লিকেশন স্থাপন করতে পারেন এবং আপনার ব্যবহারকারীদের কাছে গতিশীল সামগ্রী পরিবেশন করতে পারেন।

আপনি শুরু করার আগে

Firebase-এ আপনার অ্যাপ স্থাপন শুরু করার আগে, নিম্নলিখিত প্রয়োজনীয়তা এবং বিকল্পগুলি পর্যালোচনা করুন:

• Firebase CLI সংস্করণ 12.1.0 বা তার পরে। আপনার পছন্দের পদ্ধতি ব্যবহার করে সিএলআই ইনস্টল করা নিশ্চিত করুন।

• ঐচ্ছিক: আপনার ফায়ারবেস প্রজেক্টে বিলিং সক্ষম করা হয়েছে (আপনি যদি SSR ব্যবহার করার পরিকল্পনা করেন তাহলে প্রয়োজন)

• ঐচ্ছিক: AngularFire

ফায়ারবেস শুরু করুন

শুরু করতে, আপনার ফ্রেমওয়ার্ক প্রকল্পের জন্য Firebase শুরু করুন। একটি নতুন প্রকল্পের জন্য Firebase CLI ব্যবহার করুন, অথবা একটি বিদ্যমান প্রকল্পের জন্য firebase.json পরিবর্তন করুন৷

একটি নতুন প্রকল্প শুরু করুন

1. Firebase CLI-তে, ওয়েব ফ্রেমওয়ার্ক প্রিভিউ সক্ষম করুন:

   firebase experiments:enable webframeworks

2. CLI থেকে শুরু করার কমান্ডটি চালান এবং তারপরে প্রম্পটগুলি অনুসরণ করুন:

   firebase init hosting

3. হ্যাঁ উত্তর দিন "আপনি কি একটি ওয়েব ফ্রেমওয়ার্ক ব্যবহার করতে চান? (পরীক্ষামূলক)"

4. আপনার হোস্টিং উৎস ডিরেক্টরি নির্বাচন করুন; এটি একটি বিদ্যমান কৌণিক অ্যাপ হতে পারে।

5. অনুরোধ করা হলে, কৌণিক নির্বাচন করুন।

একটি বিদ্যমান প্রকল্প শুরু করুন

একটি public বিকল্পের পরিবর্তে একটি source বিকল্প পেতে firebase.json এ আপনার হোস্টিং কনফিগারেশন পরিবর্তন করুন। যেমন:

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

স্ট্যাটিক কন্টেন্ট পরিবেশন

ফায়ারবেস শুরু করার পরে, আপনি স্ট্যান্ডার্ড ডিপ্লয়মেন্ট কমান্ডের সাথে স্ট্যাটিক সামগ্রী পরিবেশন করতে পারেন:

firebase deploy

প্রি-রেন্ডার ডাইনামিক কন্টেন্ট

Angular এ গতিশীল বিষয়বস্তু প্রি-রেন্ডার করতে, আপনাকে Angular SSR সেট আপ করতে হবে।

ng add @angular/ssr

আরও তথ্যের জন্য Angular Prerendering (SSG) নির্দেশিকা দেখুন।

ঐচ্ছিক: একটি সার্ভার মডিউল যোগ করুন

স্থাপন করুন

আপনি যখন firebase deploy সাথে স্থাপন করেন, তখন ফায়ারবেস আপনার ব্রাউজার বান্ডেল, আপনার সার্ভার বান্ডেল তৈরি করে এবং অ্যাপ্লিকেশনটিকে প্রি-রেন্ডার করে। এই উপাদানগুলি 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 থেকে রপ্তানি করা হয়েছে)।