התאמה אישית של סביבת העבודה ב-Firebase Studio

Firebase Studio מאפשרת להתאים אישית את סביבת העבודה לצרכים הייחודיים של הפרויקט, על ידי הגדרת קובץ תצורה יחיד של .idx/dev.nix שמתאר:

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

במאמר העזרה בנושא dev.nix מפורטת רשימה מלאה של האפשרויות הזמינות.

Nix ו-Firebase Studio

Firebase Studio משתמש ב-Nix כדי להגדיר את תצורת הסביבה לכל סביבת עבודה. באופן ספציפי, Firebase Studio משתמש ב:

  • שפת התכנות Nix כדי לתאר סביבות של סביבות עבודה. Nix היא שפת תכנות פונקציונלית. המאפיינים וספריות החבילות שאפשר להגדיר בקובץ dev.nix פועלים לפי התחביר של קבוצת המאפיינים של Nix.

  • מנהל החבילות Nix כדי לנהל את כלי המערכת שזמינים בסביבת העבודה. הכלי הזה דומה למנהלי חבילות ספציפיים למערכת הפעלה, כמו APT‏ (apt ו-apt-get), ‏ Homebrew‏ (brew) ו-dpkg.

הסביבות של Nix הן ניתנות לשכפול ודקלרטיביות, ולכן בהקשר של Firebase Studio, המשמעות היא שאפשר לשתף את קובץ התצורה של Nix כחלק ממאגר Git כדי לוודא שלכל מי שעובד על הפרויקט תהיה אותה הגדרת סביבה.

דוגמה בסיסית

בדוגמה הבאה מוצגת הגדרת סביבה בסיסית שמאפשרת להציג תצוגות מקדימות:

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];

  # Sets environment variables in the workspace
  env = {
    SOME_ENV_VAR = "hello";
  };

  # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
  idx.extensions = [
    "angular.ng-template"
  ];

  # Enable previews and customize configuration
  idx.previews = {
    enable = true;
    previews = {
      web = {
        command = [
          "npm"
          "run"
          "start"
          "--"
          "--port"
          "$PORT"
          "--host"
          "0.0.0.0"
          "--disable-host-check"
        ];
        manager = "web";
        # Optionally, specify a directory that contains your web app
        # cwd = "app/client";
      };
    };
  };
}

הוספת כלי מערכת

כדי להוסיף כלים מערכתיים לסביבת העבודה, כמו קומפילרים או תוכניות CLI לשירותי ענן, מחפשים את מזהה החבילה הייחודי במרשם החבילות של Nix ומוסיפים אותו לאובייקט packages בקובץ dev.nix, עם הקידומת'pkgs.‎:

{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];
  ...
}

זה שונה מהאופן הרגיל שבו מתקינים חבילות מערכת באמצעות מנהלי חבילות ספציפיים למערכת הפעלה, כמו APT‏ (apt ו-apt-get), Homebrew‏ (brew) ו-dpkg. תיאור מפורש של חבילות המערכת הנדרשות מאפשר לכם לשתף ולשכפל את סביבות העבודה של Firebase Studio בקלות רבה יותר.

שימוש בקובצי בינאריים מקומיים של צמתים

בדיוק כמו במכונה המקומית, אפשר להריץ קבצים בינאריים שקשורים לחבילות של צמתים שהותקנו באופן מקומי (לדוגמה, חבילות שמוגדרות ב-package.json) בחלונית של Terminal באמצעות הפקודה npx.

יתרון נוסף הוא שאם אתם נמצאים בספרייה עם תיקיית node_modules (למשל, ספריית השורש של פרויקט אינטרנט), תוכלו להפעיל קובצי בינארי שהותקנו באופן מקומי ישירות, בלי הקידומת npx.

הוספת רכיבים של gcloud

הגדרת ברירת המחדל של CLI של gcloud עבור Google Cloud זמינה לכל סביבות העבודה של Firebase Studio.

אם אתם צריכים רכיבים נוספים, אתם יכולים להוסיף אותם לקובץ dev.nix:

{ pkgs }: {
  packages = [
    ...
    (pkgs.google-cloud-sdk.withExtraComponents [
      pkgs.google-cloud-sdk.components.cloud-datastore-emulator
    ])
    ...
  ];
}

הוספת תוספים לסביבת הפיתוח המשולבת (IDE)

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

  • בחלונית Extensions ב-Firebase Studio תוכלו למצוא ולהתקין תוספים. הגישה הזו מתאימה במיוחד לתוספים ספציפיים למשתמש, כמו:

    • ערכות צבעים בהתאמה אישית
    • חיקוי של עורך, כמו VSCodeVim

  • מוסיפים תוספי dev.nix לקובץ. התוספים האלה יותקנו באופן אוטומטי כשתשתפו את הגדרות סביבת העבודה. הגישה הזו מתאימה במיוחד לתוספים ספציפיים לפרויקט, כמו:

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

לגבי הגישה השנייה, אפשר לכלול תוספי IDE בקובץ dev.nix על ידי חיפוש מזהה התוסף המלא (בפורמט <publisher>.<id>) והוספתו לאובייקט idx.extensions כך:

{ pkgs, ... }: {
  ...
  # Search for the extensions you want on https://open-vsx.org/ and use the format
  # "<publisher>.<id>"
  idx.extensions = [
    "angular.ng-template"
  ];
  ...
}

הוספת שירותים נפוצים

ב-Firebase Studio יש גם הגדרה ופישוט של שירותים נפוצים שעשויים להידרש במהלך הפיתוח, כולל:

  • קונטיינרים
    • Docker‏ (services.docker.*)
  • העברת הודעות
    • אמולטור Pub/Sub (services.pubsub.*)
  • מסדי נתונים
    • MySQL‏ (services.mysql.*)
    • Postgres‏ (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner‏ (services.spanner.*)

פרטים על הפעלת השירותים האלה בסביבת העבודה מופיעים בחלקים services.* של המסמך העזר dev.nix.

התאמה אישית של התצוגות המקדימות

במאמר תצוגה מקדימה של האפליקציה מוסבר איך להתאים אישית את התצוגות המקדמות של האפליקציה.

הגדרת הסמל של סביבת העבודה

כדי לבחור סמל מותאם אישית למרחב העבודה, צריך להציב קובץ PNG בשם icon.png בתוך הספרייה .idx, באותה רמה שבה נמצא הקובץ dev.nix. Firebase Studio ישתמש בסמל הזה כדי לייצג את סביבת העבודה שלכם בלוח הבקרה.

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

הפיכת ההתאמות האישיות לתבנית

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

הצגת כל אפשרויות ההתאמה האישית

במאמר העזרה בנושא dev.nix מופיע תיאור מפורט של הסכימה של הגדרות הסביבה.

השלבים הבאים