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

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

قبل ان تبدأ

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

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

تهيئة Firebase

للبدء، قم بتهيئة Firebase لمشروع إطار العمل الخاص بك. استخدم Firebase CLI لمشروع جديد، أو قم بتعديل firebase.json لمشروع موجود.

تهيئة مشروع جديد

  1. في Firebase CLI، قم بتمكين معاينة أطر عمل الويب:
    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 قادرة على إنشاء تطبيقك ومعرفة المكان الذي تضع فيه أدواتك الأصول المخصصة للاستضافة. ويتم تحقيق ذلك باستخدام البرنامج النصي لبناء npm وتوجيهات أدلة CJS في package.json .

بالنظر إلى الحزمة التالية.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 لإخبار واجهة سطر الأوامر (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 ذو النمط السريع) بطريقة يمكن لـ 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 Hosting ويسمح لـ Firebase بالعودة إلى تطبيق Express المستضاف على Cloud Functions for Firebase.

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

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