שילוב של 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, לכן צריך לוודא שהוא מקיף.

{
    "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 ללא ממשק משתמש (headless) כנגד מכונה מקומית של האפליקציה, כדי שתוכלו לשמור את קובץ ה-HTML שנוצר ולהציג אותו ב-Hosting.

לבסוף, כלים שונים ל-build ותבניות שונות לאחסון אובייקטים שונים. משתמשים ב-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).