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

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

قبل البدء

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

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

إعداد Firebase

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

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

1. في واجهة سطر الأوامر Firebase، فعِّل معاينة أُطر الويب:

   firebase experiments:enable webframeworks

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

   firebase init hosting

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

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

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

تهيئة مشروع حالي

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

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

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

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

الضبط

لكي تعرف كيفية نشر تطبيقك، يجب أن يكون بإمكان واجهة سطر الأوامر Firebase إنشاء تطبيقك ومعرفة المكان الذي تضع فيه الأدوات الأصول المخصّصة لـ Hosting. ويتم ذلك باستخدام نص الإصدار البرمجي في npm وتوجيه أدلة CJS في 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",
    ...
}

صدِّر تطبيق Express من دالة باسم 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"

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