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

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

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

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

الضبط

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