دمج أطر عمل أخرى مع Express.js

من خلال إجراء بعض عمليات الضبط الإضافية، يمكنك الاستفادة من وظائف CLI الأساسية المراعية لإطار العمل لتوسيع نطاق دعم الدمج ليشمل أُطر عمل أخرى غير Angular وNext.js.

قبل البدء

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

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

إعداد Firebase

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

بدء مشروع جديد

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

   firebase experiments:enable webframeworks

2. شغِّل أمر الإعداد من وحدة التحكّم في سطر الأوامر، ثم اتّبِع التعليمات:

   firebase init hosting

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

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

5. اختَر Express.js / مخصّص إذا طُلب منك ذلك.

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

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

{
  "hosting": {
    "source": "./path-to-your-express-directory"
  }
}

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

قبل نشر المحتوى الثابت، عليك ضبط إعدادات تطبيقك.

الضبط

لمعرفة كيفية نشر تطبيقك، يجب أن يكون Firebase CLI قادرًا على إنشاء تطبيقك ومعرفة مكان وضع أدواتك لملفات الأصول المخصّصة لـ Hosting. ويتم ذلك باستخدام نص برمجي npm build وتوجيه CJS directories في package.json.

في ما يلي ملف package.json:

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack",
        "static": "cp static/* dist",
        "prerender": "ts-node prerender.ts"
    },
    …
}

لا تستدعي أداة Firebase CLI سوى نصّ إنشاء التطبيق، لذا عليك التأكّد من أنّ نصّ إنشاء التطبيق شامل.

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack && npm run static && npm run prerender",
        "static": "cp static/* dist",
        "prerender": "ts-node prerender.ts"
    },
    …
}

إذا كان إطار العمل لا يتيح المعالجة المسبقة بشكل تلقائي، ننصحك باستخدام أداة مثل Rendertron. سيسمح لك Rendertron بإجراء طلبات Chrome بلا واجهة مستخدم رسومية ضد مثيل محلي من تطبيقك، حتى تتمكّن من حفظ محتوى HTML الناتج ليتم عرضه على Hosting.

أخيرًا، تخزِّن أطر العمل وأدوات الإنشاء المختلفة العناصر في أماكن مختلفة. استخدِم directories.serve لإعلام وحدة التحكم في الخطوط لتحديد المكان الذي يُخرج فيه نصّ الإنشاء العناصر الناتجة:

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack && npm run static && npm run prerender",
        "static": "cp static/* dist",
        "prerender": "ts-node prerender.ts"
    },
    "directories": {
        "serve": "dist"
    },
    …
}

النشر

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

firebase deploy

عرض محتوى ديناميكي

لعرض تطبيق Express على Cloud Functions for Firebase، تأكَّد من تصدير تطبيق Express (أومعالج عنوان URL بأسلوب Express) بطريقة يمكن لـ Firebase العثور عليه بعد تجميع مكتبتك باستخدام npm.

لتحقيق ذلك، تأكَّد من أنّ توجيه files يتضمّن كل ما هو مطلوب للخادم، ومن أنّ نقطة الدخول الرئيسية قد تم إعدادها بشكل صحيح في package.json:

{
    "name": "express-app",
    "version": "0.0.0",
    "scripts": {
        "build": "spack && npm run static && npm run prerender",
        "static": "cp static/* dist",
        "prerender": "ts-node tools/prerender.ts"
    },
    "directories": {
        "serve": "dist"
    },
    "files": ["dist", "server.js"],
    "main": "server.js",
    ...
}

تصدير تطبيقك السريع من دالة باسم app:

// server.js
export function app() {
  const server = express();
   …
   return server;
}

أو إذا كنت تفضّل تصدير معالِج عنوان URL بأسلوب Express، يمكنك تسميته handle:

export function handle(req, res) {
   res.send(‘hello world’);
}

النشر

firebase deploy

يؤدي ذلك إلى نشر المحتوى الثابت على Firebase Hosting والسماح لمنصّة Firebase بالرجوع إلى تطبيق Express المستضاف على Cloud Functions for Firebase.

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

ستحافظ أدوات نشر Firebase المتوافقة مع إطار عمل الويب تلقائيًا على مزامنة حالة العميل والخادم باستخدام ملفات تعريف الارتباط. للوصول إلى سياق المصادقة، يحتوي res.locals عنصر Express اختياريًا على مثيل تطبيق Firebase مصادقة (firebaseApp) والمستخدم الذي سجّل الدخول حاليًا (currentUser).