دمج Angular Universal

باستخدام واجهة برمجة التطبيقات (CLI) المتوافقة مع إطار عمل 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 ما يلي:

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');

عرض محتوى ديناميكي بالكامل باستخدام ميزة "العرض من جهة الخادم"

اختياري: الدمج مع Firebase Authentication

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