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

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

לפני שמתחילים

לפני שמתחילים לפרוס את האפליקציה ב-Firebase, כדאי לעיין בדרישות ובאפשרויות הבאות:

• ‫Firebase CLI בגרסה 12.1.0 ואילך. חשוב להתקין את ה-CLI בשיטה המועדפת.
• אופציונלי: חיוב מופעל בפרויקט Firebase (נדרש אם מתכננים להשתמש ב-SSR)

הפעלת Firebase

כדי להתחיל, מאתחלים את Firebase עבור פרויקט המסגרת. משתמשים ב-Firebase CLI לפרויקט חדש, או משנים את firebase.json לפרויקט קיים.

הפעלת פרויקט חדש

1. ב-CLI‏ Firebase, מפעילים את גרסת הטרום-השקה של מסגרות האינטרנט:

   firebase experiments:enable webframeworks

2. מריצים את פקודת האתחול מה-CLI ופועלים לפי ההנחיות:

   firebase init hosting

3. עונים 'כן' לשאלה 'האם ברצונך להשתמש במסגרת אינטרנט?' (ניסיוני)"

4. בוחרים את ספריית המקור של האירוח. יכול להיות שזו אפליקציית אינטרנט קיימת.

5. אם מוצגת בקשה, בוחרים באפשרות Express.js / custom (התאמה אישית).

הפעלת פרויקט קיים

משנים את הגדרות האירוח ב-firebase.json כך שתהיה אפשרות source במקום אפשרות public. לדוגמה:

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

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

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

הגדרה

כדי לדעת איך לפרוס את האפליקציה, ל-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"
    },
    …
}

ה-CLI של Firebase קורא רק לסקריפט ה-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;
}

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

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

כלים לפריסה

firebase deploy

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

אופציונלי: שילוב עם Firebase Authentication

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