Personalizar seu espaço de trabalho do Firebase Studio

O Firebase Studio permite que você personalize seu espaço de trabalho de acordo com as necessidades específicas do projeto definindo um único arquivo de configuração .idx/dev.nix que descreve:

  • As ferramentas do sistema que você precisa executar (por exemplo, no Terminal), como compiladores ou outros binários.
  • As extensões que você precisa instalar (por exemplo, suporte a linguagem de programação).
  • Como as visualizações do app vão aparecer (por exemplo, os comandos para executar o servidor da Web).
  • Variáveis de ambiente globais disponíveis para servidores locais em execução no seu espaço de trabalho.

Consulte a referência dev.nix para uma descrição completa do que está disponível.

Nix e Firebase Studio

O Firebase Studio usa o Nix para definir a configuração do ambiente para cada espaço de trabalho. Especificamente, Firebase Studio usa:

  • A linguagem de programação Nix para descrever ambientes de espaço de trabalho. O Nix é uma linguagem de programação funcional. Os atributos e as bibliotecas de pacotes que você pode definir no arquivo dev.nix seguem a sintaxe do conjunto de atributos Nix.

  • O gerenciador de pacotes Nix para gerenciar as ferramentas do sistema disponíveis no seu espaço de trabalho. Isso é semelhante a gerenciadores de pacotes específicos do SO, como APT (apt e apt-get), Homebrew (brew) e dpkg.

Como os ambientes Nix são reproduzíveis e declarativos, no contexto de Firebase Studio, isso significa que você pode compartilhar seu arquivo de configuração do Nix como parte do repositório Git para garantir que todos que trabalham no projeto tenham a mesma configuração de ambiente.

Um exemplo simples

O exemplo a seguir mostra uma configuração básica do ambiente que ativa as visualizações:

{ 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";
      };
    };
  };
}

Adicionar ferramentas do sistema

Para adicionar ferramentas do sistema ao seu espaço de trabalho, como compiladores ou programas de CLI para serviços de nuvem, encontre o ID de pacote exclusivo no registro de pacotes Nix e adicione-o ao objeto packages do arquivo dev.nix, com o prefixo "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
  ];
  ...
}

Isso é diferente de como você normalmente instala pacotes do sistema usando gerenciadores de pacotes específicos do SO, como APT (apt e apt-get), Homebrew (brew) e dpkg. A descrição declarativa de quais pacotes de sistema são necessários significa que os espaços de trabalho Firebase Studio são mais fáceis de compartilhar e reproduzir.

Usar binários de nó locais

Assim como na máquina local, os binários relacionados a pacotes de nó instalados localmente (por exemplo, pacotes definidos no package.json) podem ser executados em um painel do Terminal, invocando-os com o comando npx.

Como conveniência adicional, se você estiver em um diretório com uma pasta node_modules, como o diretório raiz de um projeto da Web, os binários instalados localmente poderão ser invocados diretamente, sem o prefixo npx.

Adicionar componentes gcloud

Uma configuração padrão da CLI gcloud para Google Cloud está disponível para todos os espaços de trabalho Firebase Studio.

Se você precisar de outros componentes, adicione-os ao arquivo dev.nix:

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

Adicionar extensões de ambiente de desenvolvimento integrado

É possível instalar extensões no Firebase Studio usando o registro de extensão OpenVSX de duas maneiras:

  • Use o painel Extensions no Firebase Studio para descobrir e instalar extensões. Essa abordagem é melhor para extensões específicas do usuário, como:

    • Temas de cores personalizados
    • Emulação de editor, como o VSCodeVim

  • Adicione extensões ao arquivo dev.nix. Essas extensões serão instaladas automaticamente quando você compartilhar a configuração do espaço de trabalho. Essa abordagem é melhor para extensões específicas do projeto, como:

    • Extensões de linguagem de programação, incluindo depuradores específicos de linguagem
    • Extensões oficiais para serviços de nuvem usados no seu projeto
    • Formatadores de código

Para a última abordagem, é possível incluir extensões do ambiente de desenvolvimento integrado no arquivo dev.nix encontrando o ID de extensão totalmente qualificado (do formulário <publisher>.<id>) e adicionando-o ao objeto idx.extensions da seguinte maneira:

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

Adicionar serviços comuns

O Firebase Studio também oferece configuração e configuração simplificadas para serviços comuns que você pode precisar durante o desenvolvimento, incluindo:

  • Contêineres
    • Docker (services.docker.*)
  • Mensagens
    • Emulador do Pub/Sub (services.pubsub.*)
  • Bancos de dados
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

Para saber como ativar esses serviços no seu espaço de trabalho, consulte as partes services.* da referência dev.nix.

Personalizar visualizações

Para saber como personalizar as prévias do app, consulte Visualizar seu app.

Definir o ícone do seu espaço de trabalho

Para escolher um ícone personalizado para o espaço de trabalho, coloque um arquivo PNG chamado icon.png dentro do diretório .idx no mesmo nível do arquivo dev.nix. O Firebase Studio vai usar esse ícone para representar seu espaço de trabalho no painel.

Como esse arquivo pode ser verificado no controle de origem (como o Git), essa é uma boa maneira de ajudar todos que trabalham no projeto a ver o mesmo ícone ao usar Firebase Studio. Como o arquivo pode variar de acordo com as filiais do Git, use esse ícone para distinguir visualmente os espaços de trabalho de apps beta e de produção, entre outras finalidades.

Transformar as personalizações em um modelo

Para transformar a configuração do ambiente em um "ambiente inicial" que qualquer pessoa pode usar para criar novos projetos, consulte a documentação sobre Criar modelos personalizados.

Conheça todas as opções de personalização

Confira a referência dev.nix para uma descrição detalhada do esquema de configuração do ambiente.

Próximas etapas