שילוב של frameworks אחרות עם Express.js

עם קצת הגדרות נוספות, אפשר להשתמש בפונקציונליות הבסיסית של ה-CLI שמודעת למסגרת כדי להרחיב את התמיכה בשילוב למסגרות אחרות מלבד Angular ו-Next.js.

הצגת תוכן סטטי

לפני שמפיצים תוכן סטטי, צריך להגדיר את האפליקציה.

הגדרה

כדי לדעת איך לפרוס את האפליקציה, ל-CLI של Firebase צריכה להיות אפשרות ליצור את האפליקציה ולדעת איפה כלי הפיתוח ממקמים את הנכסים שמיועדים ל-Hosting. הפעולה הזו מתבצעת באמצעות סקריפט ה-build של npm וההוראה CJS directories ב-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 קוראת רק לסקריפט ה-build, לכן צריך לוודא שסקריפט ה-build מקיף.

{
    "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 מאפשר לכם לשלוח בקשות ל-Headless Chrome מול מופע מקומי של האפליקציה, כך שתוכלו לשמור את קובץ ה-HTML שנוצר כדי להציג אותו ב-Hosting.

בנוסף, כלים שונים לבנייה ומסגרות שונות מאחסנים את הארטיפקטים שלהם במקומות שונים. משתמשים ב-directories.serve כדי לציין ל-CLI איפה סקריפט ה-build מוציא את התוצרים:

{
    "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 (או handler של כתובת 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;
}

או אם אתם מעדיפים לייצא handler של כתובות URL בסגנון express, תנו לו את השם handle:

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

כלים לפריסה

firebase deploy

הפעולה הזו פורסת את התוכן הסטטי ב-Firebase Hosting ומאפשרת ל-Firebase לחזור לאפליקציית Express שמתארחת ב-Cloud Functions for Firebase.

אופציונלי: שילוב עם אימות ב-Firebase

כלי הפריסה של Firebase שמודע למסגרת האינטרנט ישמור באופן אוטומטי על סנכרון בין מצב הלקוח לבין מצב השרת באמצעות קובצי Cookie. כדי לגשת להקשר האימות, האובייקט res.locals של Express מכיל אופציונלית מופע מאומת של אפליקציית Firebase‏ (firebaseApp) ואת המשתמש שמחובר כרגע לחשבון (currentUser).