自定义 Firebase Studio 工作区

借助 Firebase Studio，您可以通过定义一个描述以下内容的 .idx/dev.nix 配置文件，根据项目的独特需求定制工作区：

  • 您需要能够运行的系统工具（例如，从终端运行），例如编译器或其他二进制文件。
  • 您需要安装的扩展程序（例如，编程语言支持）。
  • 应用预览应如何显示（例如，运行 Web 服务器的命令）。
  • 在工作区中运行的本地服务器可用的全局环境变量。

如需查看可用内容的完整说明，请参阅 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 软件包注册表中查找唯一的软件包 ID，并将其添加到 dev.nix 文件的 packages 对象中，前缀为“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 中定义的软件包）就像在本地机器上一样，可以通过在终端面板中使用 npx 命令调用它们来执行。

为了进一步提高便利性，如果您位于包含 node_modules 文件夹的目录（例如 Web 项目的根目录），则可以直接调用本地安装的二进制文件，而无需使用 npx 前缀。

添加 gcloud 组件

适用于 Google Cloud 的 gcloud CLI 的默认配置可供所有 Firebase Studio 工作区使用。

如果您需要其他组件，可以将其添加到 dev.nix 文件中：

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

添加 IDE 扩展程序

您可以通过 OpenVSX 扩展程序注册表在 Firebase Studio 中安装扩展程序，方法有两种：

  • 使用 Firebase Studio 中的扩展程序面板查找和安装扩展程序。此方法最适合特定于用户的扩展程序，例如：

    • 自定义颜色主题
    • 编辑器模拟，例如 VSCodeVim

  • 将扩展程序添加到 dev.nix 文件中。当您共享工作区配置时，系统会自动安装这些扩展程序。此方法最适合项目专用扩展程序，例如：

    • 编程语言扩展程序，包括特定于语言的调试程序
    • 项目中使用的云服务的官方扩展程序
    • 代码格式化工具

对于后一种方法，您可以通过查找完全限定的扩展程序 ID（采用 <publisher>.<id> 的形式）并将其添加到 idx.extensions 对象中，在 dev.nix 文件中添加 IDE 扩展程序，如下所示：

{ 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.*)

如需详细了解如何在工作区中启用这些服务，请参阅dev.nix参考文档的services.*部分。

自定义预览

如需详细了解如何自定义应用预览，请参阅预览应用。

设置工作区图标

您可以为工作区选择自定义图标，方法是将名为 icon.png 的 PNG 文件放置在 .idx 目录中，与 dev.nix 文件位于同一级别。然后，Firebase Studio 会使用此图标在信息中心中表示您的工作区。

由于此文件可以提交到源代码控制系统（例如 Git），因此这是帮助项目团队成员在使用 Firebase Studio 时看到项目相同图标的好方法。由于该文件在各个 Git 分支中可能有所不同，因此您可以使用此图标直观地区分 Beta 版应用工作区和正式版应用工作区，以及将此图标用于其他用途。

将自定义设置转换为模板

如需将您的环境配置转换为任何人都可以用于构建新项目的“起始环境”，请参阅创建自定义模板的文档。

探索所有自定义选项

如需详细了解环境配置架构，请参阅 dev.nix 参考文档。

下载文件

如需将文件下载为 zip 文件，请执行以下操作：

  • 在“探索器”窗格中右键点击任意目录，然后选择压缩并下载。

如需下载项目目录中的所有内容，请执行以下操作：

  1. 选择文件 > 打开文件夹。

  2. 接受默认的 /home/user 目录。

  3. 文件加载完毕后，右键点击工作目录，然后选择压缩并下载。如果使用 App Prototyping agent，您的工作目录将是 studio。如果使用的是模板或已上传的项目，则此处将显示项目名称。

  4. 当系统提示您重新构建环境时，点击取消。

  5. 下载完成后，从文件菜单中重新打开工作目录，以返回到工作区。

后续步骤