Как настроить рабочую область в Firebase Studio

Firebase Studio позволяет вам адаптировать рабочее пространство к уникальным потребностям вашего проекта, определив один файл конфигурации .idx/dev.nix , который описывает:

  • Системные инструменты , которые вам необходимо запустить (например, из Терминала), такие как компиляторы или другие двоичные файлы.
  • Расширения, которые вам необходимо установить (например, поддержка языков программирования).
  • Как должны выглядеть предварительные версии вашего приложения (например, команды для запуска вашего веб-сервера).
  • Глобальные переменные среды, доступные локальным серверам, работающим в вашей рабочей области.

Полное описание доступных возможностей см. в справочнике dev.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 ), можно запускать на панели терминала, вызывая их с помощью команды npx .

Для дополнительного удобства, если вы находитесь в каталоге с папкой node_modules (например, в корневом каталоге веб-проекта), локально установленные двоичные файлы можно вызывать напрямую, без префикса npx .

Добавить компоненты gcloud

Конфигурация gcloud CLI для 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 также предлагает упрощенную установку и настройку для общих служб, которые могут вам понадобиться во время разработки, включая:

  • Контейнеры
    • Докер ( services.docker.* )
  • Обмен сообщениями
    • Эмулятор Pub/Sub ( services.pubsub.* )
  • Базы данных
    • MySQL ( services.mysql.* )
    • Postgres ( services.postgres.* )
    • Redis ( services.redis.* )
    • Гаечный ключ ( services.spanner.* )

Подробную информацию о включении этих служб в вашем рабочем пространстве см. в разделах services.* справочника dev.nix .

Настроить предварительные просмотры

Подробную информацию о настройке предварительного просмотра приложения см. в разделе Предварительный просмотр приложения .

Установите значок вашего рабочего пространства

Вы можете выбрать пользовательский значок для своего рабочего пространства, поместив файл PNG с именем icon.png в каталог .idx на том же уровне, что и ваш файл dev.nix . Затем Firebase Studio будет использовать этот значок для представления вашего рабочего пространства на панели управления.

Поскольку этот файл можно зарегистрировать в системе управления исходным кодом (например, Git), это хороший способ помочь всем, кто работает над вашим проектом, видеть один и тот же значок для вашего проекта при использовании Firebase Studio . И поскольку файл может различаться в разных ветках Git, вы можете использовать этот значок для визуального различения рабочих областей бета- и производственных приложений, а также для других целей.

Превратите свои настройки в шаблон

Чтобы превратить конфигурацию вашей среды в «начальную среду», которую любой желающий сможет использовать для создания новых проектов, см. документацию по созданию пользовательских шаблонов .

Изучите все варианты настройки

Подробное описание схемы конфигурации среды см. в справочнике dev.nix

Загрузите ваши файлы

Чтобы загрузить файлы в виде zip-файла:

  • Щелкните правой кнопкой мыши по любому каталогу на панели проводника и выберите «Заархивировать и загрузить» .

Чтобы загрузить все содержимое каталога вашего проекта:

  1. Выберите Файл > Открыть папку .

  2. Примите каталог по умолчанию /home/user .

  3. После загрузки файлов щелкните правой кнопкой мыши по рабочему каталогу и выберите Zip and Download . Если вы используете App Prototyping agent , вашим рабочим каталогом будет studio . Если вы используете шаблон или загруженный проект, это будет имя вашего проекта.

  4. При появлении запроса на перестройку среды нажмите «Отмена» .

  5. После завершения загрузки снова откройте рабочий каталог из меню «Файл» , чтобы вернуться в рабочее пространство.

Следующие шаги