借助 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,并将其以“pkgs.”为前缀添加到 dev.nix
文件的 packages
对象中。
{ 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.*
)
- Docker (
- 消息传递
- Pub/Sub 模拟器 (
services.pubsub.*
)
- Pub/Sub 模拟器 (
- 数据库
- MySQL (
services.mysql.*
) - Postgres (
services.postgres.*
) - Redis (
services.redis.*
) - Spanner (
services.spanner.*
)
- MySQL (
如需详细了解如何在工作区启用这些服务,请参阅 dev.nix
参考文档中的 services.*
部分。
自定义预览
如需详细了解如何自定义应用预览,请参阅预览应用。
设置工作区图标
您可以将名为 icon.png
的 PNG 文件放在与 dev.nix
文件同级的 .idx
目录中,以设置工作区自定义图标。然后,Firebase Studio 将在信息中心中使用此图标来表示您的工作区。
由于此文件可以签入到源代码控制系统(例如 Git),这样可以确保所有项目成员在使用 Firebase Studio 时看到相同的项目图标。由于该文件在各个 Git 分支中可能有所不同,因此您可以使用此图标直观地区分 Beta 版应用工作区和正式版应用工作区,以及将此图标用于其他用途。
将自定义设置转换为模板
如需将您的环境配置转变为可供任何人用于创建新项目的“起始环境”,请参阅创建自定义模板的文档。
探索所有自定义选项
如需详细了解环境配置架构,请参阅 dev.nix
参考文档。
下载文件
如需将文件打包为 zip 文件下载,请执行以下操作:
- 在“探索器”窗格中右键点击任意目录,然后选择压缩并下载。
如需下载项目目录中的全部内容,请执行以下操作:
选择文件 > 打开文件夹。
接受默认的
/home/user
目录。文件加载完成后,右键点击工作目录,然后选择压缩并下载。如果您使用 App Prototyping agent,工作目录将是
studio
。如果使用模板或上传的项目,工作目录名称将是您的项目名称。当系统提示您重新构建环境时,点击取消。
下载完成后,从文件菜单重新打开工作目录,以返回工作区。