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

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

قبل البدء

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

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

إعداد Firebase

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

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

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

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

{
    "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 الناتج ليتم عرضه على الاستضافة.

أخيرًا، تقوم أطر العمل وأدوات الإنشاء المختلفة بتخزين الأدوات الخاصة بها في أماكن مختلفة. استخدِم 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 بالنمط السريع) بطريقة تتيح لمنصّة 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 بنمط سريع، يمكنك تسميته handle:

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

النشر

firebase deploy

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

اختياري: الدمج مع مصادقة Firebase

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