Firebase ফ্রেমওয়ার্ক-সচেতন CLI-এর সাহায্যে, আপনি Firebase-এ আপনার কৌণিক অ্যাপ্লিকেশন স্থাপন করতে পারেন এবং আপনার ব্যবহারকারীদের কাছে গতিশীল সামগ্রী পরিবেশন করতে পারেন।
আপনি শুরু করার আগে
Firebase-এ আপনার অ্যাপ স্থাপন শুরু করার আগে, নিম্নলিখিত প্রয়োজনীয়তা এবং বিকল্পগুলি পর্যালোচনা করুন:
- Firebase CLI সংস্করণ 12.1.0 বা তার পরে। আপনার পছন্দের পদ্ধতি ব্যবহার করে সিএলআই ইনস্টল করা নিশ্চিত করুন।
ঐচ্ছিক: আপনার ফায়ারবেস প্রজেক্টে বিলিং সক্ষম করা হয়েছে (আপনি যদি SSR ব্যবহার করার পরিকল্পনা করেন তাহলে প্রয়োজন)
ঐচ্ছিক: AngularFire
ফায়ারবেস শুরু করুন
শুরু করতে, আপনার ফ্রেমওয়ার্ক প্রকল্পের জন্য Firebase শুরু করুন। একটি নতুন প্রকল্পের জন্য Firebase CLI ব্যবহার করুন, অথবা একটি বিদ্যমান প্রকল্পের জন্য firebase.json পরিবর্তন করুন৷
একটি নতুন প্রকল্প শুরু করুন
- Firebase CLI-তে, ওয়েব ফ্রেমওয়ার্ক প্রিভিউ সক্ষম করুন:
firebase experiments:enable webframeworks
CLI থেকে শুরু করার কমান্ডটি চালান এবং তারপরে প্রম্পটগুলি অনুসরণ করুন:
firebase init hosting
হ্যাঁ উত্তর দিন "আপনি কি একটি ওয়েব ফ্রেমওয়ার্ক ব্যবহার করতে চান? (পরীক্ষামূলক)"
আপনার হোস্টিং উৎস ডিরেক্টরি নির্বাচন করুন; এটি একটি বিদ্যমান কৌণিক অ্যাপ হতে পারে।
অনুরোধ করা হলে, কৌণিক নির্বাচন করুন।
একটি বিদ্যমান প্রকল্প শুরু করুন
একটি public বিকল্পের পরিবর্তে একটি source বিকল্প পেতে firebase.json এ আপনার হোস্টিং কনফিগারেশন পরিবর্তন করুন। যেমন:
{
"hosting": {
"source": "./path-to-your-angular-workspace"
}
}
স্ট্যাটিক কন্টেন্ট পরিবেশন
ফায়ারবেস শুরু করার পরে, আপনি স্ট্যান্ডার্ড ডিপ্লয়মেন্ট কমান্ডের সাথে স্ট্যাটিক সামগ্রী পরিবেশন করতে পারেন:
firebase deploy
প্রি-রেন্ডার ডাইনামিক কন্টেন্ট
Angular এ গতিশীল বিষয়বস্তু প্রি-রেন্ডার করতে, আপনাকে Angular Universal সেট আপ করতে হবে। Firebase CLI এক্সপ্রেস ইঞ্জিন আশা করে:
ng add @nguniversal/express-engine
আরও তথ্যের জন্য কৌণিক ইউনিভার্সাল গাইড দেখুন।
প্রি-রেন্ডার ইউআরএল যোগ করুন
ডিফল্টরূপে, শুধুমাত্র রুট ডিরেক্টরি প্রি-রেন্ডার করা হবে। আপনি angular.json এ প্রিরেন্ডার ধাপটি সনাক্ত করে এবং আরও রুট যোগ করে অতিরিক্ত রুট যোগ করতে পারেন:
{
"prerender": {
"builder": "@nguniversal/builders:prerender",
"options": {
"routes": ["/", "ANOTHER_ROUTE", "AND_ANOTHER"]
},
"configurations": {
/* ... */
},
"defaultConfiguration": "production"
}
}
Firebase হোস্টিং রুটে guessRoutes বা routes.txt ফাইলকেও সম্মান করে, যদি আপনাকে আরও কাস্টমাইজ করতে হয়। সেই বিকল্পগুলি সম্পর্কে আরও তথ্যের জন্য Angular এর প্রিরেন্ডারিং গাইড দেখুন।
ঐচ্ছিক: একটি সার্ভার মডিউল যোগ করুন
স্থাপন করুন
আপনি যখন firebase deploy এর সাথে স্থাপন করেন, তখন ফায়ারবেস আপনার ব্রাউজার বান্ডেল, আপনার সার্ভার বান্ডেল তৈরি করে এবং অ্যাপ্লিকেশনটিকে প্রি-রেন্ডার করে। এই উপাদানগুলি ফায়ারবেসের জন্য Hosting এবং Cloud Functions for Firebase স্থাপন করা হয়।
কাস্টম স্থাপন
Firebase CLI অনুমান করে যে আপনার কাছে প্রোডাকশন কনফিগারেশন সহ আপনার স্কিম্যাটিক্সে সার্ভার, বিল্ড এবং প্রি-রেন্ডার ধাপ রয়েছে।
আপনি যদি CLI-এর অনুমানগুলিকে উপযোগী করতে চান, তাহলে ng deploy কনফিগার করুন এবং angular.json এ কনফিগারেশন সম্পাদনা করুন। উদাহরণস্বরূপ, আপনি SSR অক্ষম করতে পারেন এবং 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');
SSR এর সাথে সম্পূর্ণ গতিশীল সামগ্রী পরিবেশন করুন
ঐচ্ছিক: Firebase প্রমাণীকরণের সাথে একীভূত করুন
ওয়েব ফ্রেমওয়ার্ক-সচেতন Firebase ডিপ্লয়মেন্ট টুলিং স্বয়ংক্রিয়ভাবে ক্লায়েন্ট এবং সার্ভারের অবস্থা কুকিজ ব্যবহার করে সিঙ্কে রাখে। Express res.locals অবজেক্টে ঐচ্ছিকভাবে একটি প্রমাণীকৃত Firebase অ্যাপ ইনস্ট্যান্স ( firebaseApp ) এবং বর্তমানে সাইন ইন করা ব্যবহারকারী ( currentUser ) থাকবে। এটি আপনার মডিউলে REQUEST টোকেনের মাধ্যমে ইনজেকশন করা যেতে পারে (@nguniversal/express-engine/tokens থেকে রপ্তানি করা হয়েছে)।