دمج Angular Universal

باستخدام واجهة سطر الأوامر المستندة إلى إطار عمل Firebase، يمكنك نشر تطبيق Angular في Firebase وعرض محتوى ديناميكي للمستخدمين.

قبل البدء

قبل البدء في نشر تطبيقك على Firebase، يُرجى مراجعة المتطلبات والخيارات التالية:

• Firebase الإصدار 12.1.0 من واجهة برمجة التطبيقات أو الإصدارات الأحدث احرص على تثبيت واجهة سطر الأوامر باستخدام الطريقة المفضّلة لديك.

• اختياري: تفعيل الفوترة في مشروعك على Firebase (مطلوب إذا كنت تخطّط لاستخدام ميزة "الاستجابة السريعة للطلبات")

• اختياري: AngularFire

إعداد Firebase

للبدء، يجب تهيئة Firebase لمشروع إطار العمل. استخدِم واجهة سطر أوامر Firebase لمشروع جديد، أو عدِّل firebase.json لمشروع حالي.

إعداد مشروع جديد

1. في Firebase CLI، فعِّل معاينة إطارات عمل الويب:

   firebase experiments:enable webframeworks

2. شغّل أمر التهيئة من واجهة سطر الأوامر ثم اتبع التعليمات:

   firebase init hosting

3. يجب الإجابة بـ "نعم" على السؤال "هل تريد استخدام إطار عمل ويب؟ (تجريبي)"

4. اختَر دليل مصدر الاستضافة، والذي يمكن أن يكون تطبيق Angular حاليًا.

5. اختر Angular إذا طُلب منك ذلك.

بدء مشروع حالي

غيِّر إعدادات الاستضافة في firebase.json للحصول على خيار source بدلاً من خيار public. على سبيل المثال:

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

عرض محتوى ثابت

بعد إعداد Firebase، يمكنك عرض محتوى ثابت باستخدام الأمر العادي deployment:

firebase deploy

معالجة المحتوى الديناميكي مسبقًا

لعرض المحتوى الديناميكي مسبقًا في Angular، عليك إعداد Angular Universal. تتوقّع واجهة سطر أوامر Firebase استخدام Express Engine:

ng add @nguniversal/express-engine

يمكنك الاطّلاع على دليل Angular Universal للحصول على مزيد من المعلومات.

إضافة عناوين URL لميزة "العرض المُسبَق"

سيتم تلقائيًا عرض الدليل الجذر فقط مسبقًا. يمكنك إضافة مسارات إضافية عن طريق تحديد خطوة التقديم المُسبَق في 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 CLI أنّ لديك خطوات الخادم والإنشاء والعرض المُسبَق في مخطّطاتك باستخدام إعدادات الإنتاج.

إذا كنت تريد تخصيص افتراضات واجهة برمجة التطبيقات، اضبط ng deploy وعدِّل الإعدادات في angular.json. على سبيل المثال، يمكنك إيقاف ميزة "العرض المباشر من الخادم" وعرض المحتوى الذي تمّت معالجته مسبقًا فقط عن طريق إزالة serverTarget:

{
  "deploy": {
    "builder": "@angular/fire:deploy",
    "options": {
      "browserTarget": "app:build:production",
      "serverTarget": "app:server:production",
      "prerenderTarget": "app:prerender:production"
    }
  }
}

اختياري: دمج حزمة تطوير البرامج (SDK) لبرنامج Firebase باستخدام JavaScript

عند تضمين طرق حزمة تطوير البرامج (SDK) لـ Firebase JS في حِزم الخادم والعميل، احرِص على تجنُّب أخطاء وقت التشغيل من خلال التحقّق من isSupported() قبل استخدام المنتج. لا تتوفّر بعض المنتجات في جميع البيئات.

اختياري: الدمج مع حزمة تطوير البرامج (SDK) لمشرفي Firebase

لن تعمل حِزم المشرف إذا تم تضمينها في إصدار المتصفّح، لذا ننصحك بتقديمها في وحدة الخادم وحقنها كتبعية اختيارية:

// 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 Authentication

تعمل أداة نشر Firebase المستنِدة إلى إطار عمل الويب على الحفاظ تلقائيًا على مزامنة حالة العميل والخادم باستخدام ملفات تعريف الارتباط. سيحتوي عنصر Express res.locals اختياريًا على مثيل تطبيق Firebase تمّت مصادقته (firebaseApp) والمستخدم الذي سجّل الدخول حاليًا (currentUser). ويمكن إدخال هذا العنصر في الوحدة من خلال رمز REQUEST (الذي تمّ تصديره من @nguniversal/express-engine/tokens).