שילוב Angular

בעזרת Firebase CLI עם מודעות ל-framework, אפשר לפרוס את אפליקציית Angular ב-Firebase ולהציג למשתמשים תוכן דינמי.

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

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

• ‫Firebase CLI בגרסה 12.1.0 ואילך. חשוב להתקין את ה-CLI בשיטה המועדפת.

• אופציונלי: חיוב מופעל בפרויקט Firebase (נדרש אם מתכננים להשתמש ב-SSR)

• אופציונלי: AngularFire

הפעלת Firebase

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

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

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

   firebase experiments:enable webframeworks

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

   firebase init hosting

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

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

5. אם מוצגת בקשה, בוחרים באפשרות Angular.

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

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

{
  "hosting": {
    "source": "./path-to-your-angular-workspace"
  }
}

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

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

firebase deploy

טרום-רינדור של תוכן דינמי

כדי לבצע טרום-עיבוד של תוכן דינמי ב-Angular, צריך להגדיר Angular SSR.

ng add @angular/ssr

מידע נוסף זמין במדריך בנושא טרום-עיבוד (SSG) ב-Angular.

אופציונלי: מוסיפים מודול שרת

כלים לפריסה

כשפורסים באמצעות firebase deploy,‏ Firebase יוצרת את חבילת הדפדפן, את חבילת השרת ומבצעת טרום-עיבוד של האפליקציה. הרכיבים האלה נפרסים ב-Hosting וב-Cloud Functions for Firebase.

פריסה בהתאמה אישית

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

אם אתם צריכים לשנות את ההנחות של ה-CLI, אתם יכולים להשתמש במשתנה הסביבה FIREBASE_FRAMEWORKS_BUILD_TARGET או להוסיף את AngularFire ולשנות את angular.json:

{
  "deploy": {
    "builder": "@angular/fire:deploy",
    "options": {
      "version": 2,
      "buildTarget": "OVERRIDE_YOUR_BUILD_TARGET"
    }
  }
}

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

כשכוללים שיטות של Firebase JS SDK בחבילות של שרת ושל לקוח, צריך לבדוק את isSupported() לפני שמשתמשים במוצר כדי למנוע שגיאות בזמן הריצה. לא כל המוצרים נתמכים בכל הסביבות.

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

חבילות של Admin ייכשלו אם הן ייכללו בגרסת הדפדפן שלכם, לכן מומלץ לספק אותן במודול השרת ולהוסיף אותן כתלות אופציונלית:

// your-component.ts
import type { app } from 'firebase-admin';
import { FIREBASE_ADMIN } from '../app.module';

@Component({...})
export class YourComponent {

  constructor(@Optional() @Inject(FIREBASE_ADMIN) admin: app.App) {
    ...
  }
}

// app.server.module.ts
import * as admin from 'firebase-admin';
import { FIREBASE_ADMIN } from './app.module';

@NgModule({
  …
  providers: [
    …
    { provide: FIREBASE_ADMIN, useFactory: () => admin.apps[0] || admin.initializeApp() }
  ],
})
export class AppServerModule {}

// app.module.ts
import type { app } from 'firebase-admin';

export const FIREBASE_ADMIN = new InjectionToken<app.App>('firebase-admin');

הצגת תוכן דינמי מלא באמצעות SSR

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

כלי הפריסה של Firebase שמודעים למסגרת האינטרנט שומרים באופן אוטומטי על סנכרון בין מצב הלקוח לבין מצב השרת באמצעות קובצי Cookie. אובייקט Express‏ res.locals יכול להכיל אופציונלית מופע מאומת של אפליקציית Firebase‏ (firebaseApp) ואת המשתמש שמחובר כרגע (currentUser). אפשר להוסיף את האובייקט הזה למודול באמצעות אסימון הבקשה (שיוצא מ-@nguniversal/express-engine/tokens).