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

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

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

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

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

איך מפעילים את Firebase

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

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

לבסוף, frameworks וכלי פיתוח שונים מאחסנים את הארטיפקטים שלהם במקומות שונים. משתמשים ב-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 (או בורר כתובות 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, שמכיר את מסגרת האתר, יאבטח באופן אוטומטי את הסנכרון בין מצב הלקוח למצב השרת באמצעות קובצי cookie. כדי לגשת להקשר האימות, אובייקט res.locals Express מכיל באופן אופציונלי מופע מאומת של אפליקציית Firebase (firebaseApp) ואת המשתמש שמחובר כרגע (currentUser).