Personalizar seu espaço de trabalho do Firebase Studio

O Firebase Studio permite adaptar o espaço de trabalho às 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, pelo Terminal), como compiladores ou outros binários.
  • As extensões que você precisa instalar (por exemplo, suporte a linguagens de programação).
  • Como as prévias do aplicativo serão exibidas (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 do 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, o 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 podem ser definidos no arquivo dev.nix seguem a sintaxe do conjunto de atributos do 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 o APT (apt e apt-get), Homebrew (brew) e dpkg.

Os ambientes Nix são reproduzíveis e declarativos. Por isso, no contexto do Firebase Studio, é possível 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 com ativação das prévias:

{ 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 exclusivo do pacote 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 o APT (apt e apt-get), Homebrew (brew) e dpkg. A descrição declarativa de quais pacotes de sistema são necessários torna os espaços de trabalho do Firebase Studio 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.

Para maior praticidade, 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 da gcloud

Uma configuração padrão da gcloud CLI para o Google Cloud está disponível a todos os espaços de trabalho do 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 do ambiente de desenvolvimento integrado

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

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

    • Temas de cores personalizadas
    • 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 da linguagem
    • Extensões oficiais para serviços de nuvem usados no seu projeto
    • Formatadores de código

Como última abordagem, é possível incluir extensões do ambiente de desenvolvimento integrado no arquivo dev.nix localizando o ID da extensão totalmente qualificada (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ções simplificadas para serviços comuns que podem ser necessários 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 do dev.nix.

Personalizar prévias

Para saber como personalizar as prévias do aplicativo, 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 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 o Firebase Studio. Como o arquivo pode variar dependendo das ramificações do Git, use esse ícone para distinguir visualmente os espaços de trabalho de aplicativos Beta e em produção, entre outras finalidades.

Transformar suas 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.

Conhecer todas as opções de personalização

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

Baixar seus arquivos

Para baixar seus arquivos como ZIP:

  • Clique com o botão direito do mouse em qualquer diretório no painel do Explorador e selecione Compactar e baixar.

Para baixar tudo no diretório do seu projeto:

  1. Selecione Arquivo > Abrir pasta.

  2. Aceite o diretório padrão /home/user.

  3. Depois que os arquivos carregarem, clique com o botão direito do mouse no diretório de trabalho e selecione Compactar e baixar. Se você usar o App Prototyping agent, o diretório de trabalho será studio. Se você usar um modelo ou projeto enviado, esse será o nome do seu projeto.

  4. Quando for solicitado que recrie o ambiente, clique em Cancelar.

  5. Depois de concluir a transferência, abra novamente o diretório de trabalho pelo menu Arquivo para voltar ao seu espaço de trabalho.

Próximas etapas