چارچوب های دیگر را با Express.js ادغام کنید

با کمی پیکربندی اضافی، می‌توانید بر اساس قابلیت CLI مبتنی بر چارچوب، پشتیبانی از ادغام را به چارچوب‌هایی غیر از Angular و Next.js گسترش دهید.

قبل از اینکه شروع کنی

قبل از شروع به استقرار برنامه خود در Firebase، الزامات و گزینه‌های زیر را بررسی کنید:

مقداردهی اولیه فایربیس

برای شروع، Firebase را برای پروژه فریم‌ورک خود راه‌اندازی کنید. برای یک پروژه جدید از Firebase CLI استفاده کنید، یا firebase.json برای یک پروژه موجود تغییر دهید.

یک پروژه جدید را مقداردهی اولیه کنید

  1. در رابط خط فرمان Firebase ، پیش‌نمایش چارچوب‌های وب را فعال کنید: 
    firebase experiments:enable webframeworks

  2. دستور مقداردهی اولیه را از CLI اجرا کنید و سپس دستورالعمل‌ها را دنبال کنید:

    firebase init hosting

  3. به سوال «آیا می‌خواهید از یک چارچوب وب استفاده کنید؟» (آزمایشی) پاسخ مثبت دهید.

  4. دایرکتوری منبع میزبانی خود را انتخاب کنید؛ این می‌تواند یک برنامه وب موجود باشد.

  5. در صورت درخواست، Express.js / custom را انتخاب کنید.

مقداردهی اولیه یک پروژه موجود

پیکربندی میزبانی خود را در firebase.json تغییر دهید تا به جای گزینه public ، گزینه source داشته باشید. برای مثال:

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

ارائه محتوای استاتیک

قبل از استقرار محتوای استاتیک، باید برنامه خود را پیکربندی کنید.

پیکربندی

برای اینکه بدانید چگونه برنامه خود را مستقر کنید، Firebase CLI باید بتواند هم برنامه شما را بسازد و هم بداند ابزار شما دارایی‌های تعیین‌شده برای Hosting را کجا قرار می‌دهد. این کار با اسکریپت npm build و دستورالعمل دایرکتوری‌های 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"
    },
    …
}

اگر چارچوب شما از پیش‌رندرینگ (pre-rendering) پشتیبانی نمی‌کند، استفاده از ابزاری مانند Rendertron را در نظر بگیرید. Rendertron به شما امکان می‌دهد درخواست‌های بدون نیاز به Headless 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",
    ...
}

برنامه اکسپرس خود را از تابعی به نام 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 که با چارچوب وب سازگار است، به طور خودکار وضعیت کلاینت و سرور را با استفاده از کوکی‌ها همگام نگه می‌دارد. برای دسترسی به زمینه احراز هویت، شیء Express res.locals به صورت اختیاری شامل یک نمونه احراز هویت شده Firebase App ( firebaseApp ) و کاربر فعلی وارد شده ( currentUser ) است.