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

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

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

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

الضبط

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