Introdução ao desenvolvimento local

Last updated:

A CLI (Interface de Linha de Comando) conecta seu ambiente local ao HubSpot, o que significa que você terá cópias locais dos seus ativos web do HubSpot. Isso permite que você use o controle de versão, seu editor de texto favorito e várias tecnologias de desenvolvimento web ao desenvolver no HubSpot CMS. 

Este guia é ideal para pessoas que já estão familiarizadas com o CMS, mas que querem aprender sobre como trabalhar com a CLI. Caso seja sua primeira vez trabalhando com desenvolvimento no HubSpot CMS Hub, consulte o guia de início rápido:

Quick start to CMS Hub development

Neste tutorial, você aprenderá:

  • Como instalar a CLI e conectá-la à sua conta da HubSpot.
  • Como obter um módulo da sua conta da HubSpot.
  • Como atualizar o módulo localmente e carregar suas alterações.
  • Como usar o comando watch para continuar carregando as alterações salvas.

Para ver mais comandos e formatos de arquivo locais, consulte a Referência de ferramentas de desenvolvimento local.

Instalar dependências

Para desenvolver no HubSpot localmente, você precisará:

  1. Instalar o Node.js, um ambiente Javascript em tempo de execução que possibilita as ferramentas locais. A versão 16 ou superior do Node é suportada, mas recomendamos a versão de suporte a longo prazo (LTS).
  2. Execute npm install -g @hubspot/cli na sua linha de comando para instalar a CLI da HubSpot globalmente. Para instalar as ferramentas em seu diretório atual, execute npm install @hubspot/cli.

se preferir, você também pode usar o Yarn.O Homebrew não é necessário, mas é recomendado para facilitar a instalação. Se você estiver usando o Yarn, os comandos serão executados com o prefixo yarn.

1. Criar um diretório de trabalho

Crie uma pasta para o trabalho que fará abaixo. Para este tutorial, nomeie a pasta como local-dev-tutorial.

Você pode fazer isso localmente executando o mkdir local-dev-tutorial na linha de comando, o que criará o diretório. Depois, execute cd local-dev-tutorial para navegar até esse diretório.

2. Configurar as ferramentas de desenvolvimento local

Em seguida, execute hs init para conectar o os instrumentos à sua conta da HubSpot. Este comando oferecerá orientação pelas etapas abaixo.

  • Para conectar a CLI a uma conta da HubSpot, você precisará copiar a chave de acesso pessoal da conta. Se solicitado, pressione Enter para abrir hubspot.com na página da chave de acesso pessoal da conta. Se você tiver várias contas, será solicitado no navegador que selecione uma conta primeiro.
  • Na página da chave de acesso pessoal, você pode gerar uma nova chave de acesso pessoal ou copiar o valor da chave existente, se já existir.
    • Se estiver criando uma chave pela primeira vez, selecione a quais escopos a chave tem acesso. Você precisará selecionar pelo menos a permissão do Gerenciador de Design para interagir com as ferramentas de design da conta. 
    • Depois de selecionar as permissões da chave, clique em Gerar chave de acesso pessoal.
  • Depois que uma chave for gerada, copie o valor clicando primeiro em Mostrar sob a chave e em Copiar.
  • Cole a tecla na linha de comando e pressione Enter.
  • Em seguida, insira um nome para a conta. Esse nome só será visto e usado por você ao executar comandos. Por exemplo, você pode usar "sandbox" se estiver usando um sandbox de desenvolvedor ou "company.com" se estiver usando uma conta de cliente completa. Esse nome não pode conter espaços. 
  • Pressione Enter. 

Depois de concluir o fluxo init , você verá uma mensagem de sucesso confirmando que o arquivo de configuração, hubspot.config.yml foi criado no diretório atual.

O hubspot.config.yml será parecido com isso:

defaultPortal: mainProd portals: - name: mainProd portalId: 123456 defaultMode: publish authType: personalaccesskey auth: tokenInfo: accessToken: >- {accessTokenValue} expiresAt: '2023-06-27T19:45:58.557Z' personalAccessKey: >- {personalAccessKeyValue} sandboxAccountType: null parentAccountId: null
Use this table to describe parameters / fields
NomeDescription
defaultPortal
Opcional

A conta com a qual se interage por padrão ao executar comandos da CLI.

Para interagir com uma conta autenticada que não está definida como padrão, você pode adicionar um sinalizador --account= ao comando, seguido pelo nome ou ID da conta. Por exemplo, --account=12345 ou --account=mainProd.

name
Opcional

Em portals, você encontrará uma entrada para cada conta conectada. name especifica o nome fornecido para a conta. Você pode usar esse nome ao definir uma nova conta padrão ou especificar uma conta com o sinalizador --account.

portalId
Obrigatório

O ID da conta.

defaultMode
Opcional

Ao carregar na conta, define o estado padrão no qual carregar o conteúdo. Pode ser draft ou publish.

authType
Obrigatório

A forma de autenticação usada para autenticar a conta. 

sandboxAccountType
Opcional

Se a conta for uma conta de sandbox, indica o ID da conta de produção principal.

parentAccountId
Opcional

parentAccountId

O arquivo hubspot.config.yml permite várias contas. Para autenticar mais contas, execute hs auth e siga as instruções.

3. Criar um recurso para buscar no HubSpot

Para este tutorial, primeiro você criará um novo ativo no HubSpot para poder buscá-lo no seu ambiente local usando a CLI. 

  • Na sua conta da HubSpot, acesse Marketing > Arquivos e modelos > Ferramentas de design. O gerenciador de design será aberto e você poderá acessar os arquivos que deseja carregar usando a CLI. Esta árvore de arquivos e pastas também é conhecida como o sistema de arquivos do desenvolvedor.
  • Na barra lateral esquerda do gerenciador de design, selecione a pasta @hubspot para visualizar os ativos padrão da HubSpot, como temas e módulos.
    design-manager-hubspot-folder
  • Na barra lateral esquerda, role para baixo e clique com o botão direito no módulo icon e, em seguida, selecione Clonar módulo. O módulo será clonado na raiz do sistema de arquivos do desenvolvedor e a sua nova cópia do módulo será aberta à direita.
    default-icon-module-cloned
  • Na parte superior da barra lateral esquerda, clique em Ações e selecione Copiar caminho. O caminho relativo para o módulo no sistema de arquivos do desenvolvedor será copiado e você o usará na próxima etapa para buscar o módulo localmente. 
    module-actions-copy-path

4. Buscar o módulo para seu ambiente local

Com o módulo clonado, agora você usará o comando fetch para trazê-lo ao seu ambiente local.

No terminal, execute hs fetch '/icon copy.module'.

hs fetch '/icon copy.module'
O módulo será transferido como um diretório contendo cinco arquivos:
  • fields.json: contém o código para os vários campos do módulo. Nesse caso, isso inclui o campo de ícone, dois campos de opção de acessibilidade e um conjunto de campos de estilo. Você pode ver esses campos na barra lateral direita do editor de módulos no HubSpot.
  • meta.json: contém as informações básicas do módulo, como seu rótulo, ID e os tipos de modelos em que pode ser usado. Essas informações serão exibidas na barra lateral direita do editor do módulo.
  • module.css: contém o CSS do módulo, que você também pode ver no painel CSS do editor de módulos no HubSpot. 
  • module.html: contém o HTML do módulo, que você também pode ver no painel HubL + HTML do editor de módulos no HubSpot.
  • module.js: contém o JavaScript do módulo, que você também pode ver no painel JS do editor de módulos no HubSpot.
    module-directory-local
Em seguida, você atualizará o arquivo meta.json do módulo, carregará esse arquivo na sua conta e verá a alteração no HubSpot.

5. Fazer alterações e carregar

Primeiro, faça uma alteração no módulo:

  • No editor de código que preferir, abra o arquivo meta.json do módulo.
    module-meta-json-file-open
  • Atualize o campo label de "Icon" para "CMS tutorial module". Salve o arquivo.
    module-meta-json-file-label-updated
Antes de executar o próximo comando, hs upload, vamos detalhar o comando e os argumentos necessários. Esse comando requer dois argumentos: hs upload <src> <dest>
  • src: o caminho relativo da pasta de origem que você está carregando do ambiente local.
  • dest: o caminho do diretório de destino no HubSpot, local em relação à raiz do sistema de arquivos do desenvolvedor. Você pode criar um novo diretório na conta especificando o nome do diretório, como hs upload <src> /new-directory.
  • Com isso em mente, como você está carregando na raiz do sistema de arquivos do desenvolvedor, execute o seguinte comando:
hs upload 'icon copy.module' 'icon copy.module'
  • Depois que a CLI confirmar que o módulo foi carregado com sucesso, atualize o gerenciador de design para ver sua alteração no HubSpot. Agora você deve ver que o campo Rótulo mostra o novo valor.
module-label-updated

6. Executar um comando watch para carregar as alterações automaticamente

Depois de usar o comando upload para carregar de uma vez seus arquivos locais, agora você usará o comando watch para carregar continuamente as alterações salvas. Esse comando usa os mesmos argumentos que o comando upload, de modo que você pode especificar os mesmos <src> e <dest> acima.

  • Executar hs watch 'icon copy.module' 'icon copy.module'
hs watch 'icon copy.module' 'icon copy.module'

Com o comando watch em execução, as alterações salvas serão carregadas automaticamente na conta da HubSpot. Como demonstração, faça a seguinte alteração local no módulo:

  • No arquivo meta.json, atualize o campo host_template_types para remover "BLOG_LISTING" e "BLOG_POST" de modo que o módulo fique disponível apenas para as páginas:

    "host_template_types":["PAGE"]
  • Salve o arquivo. Isso fará com que a CLI carregue automaticamente o arquivo no HubSpot.
  • Com o arquivo carregado, atualize o gerenciador de design no HubSpot para ver a alteração. A seção Tipos de modelos na barra lateral direita agora deve incluir apenas Página.
module-editor-template-type
  • Para encerrar o comando watch, pressione Control + C. É importante observar que você não poderá executar outros comandos na mesma janela de terminal em que o comando Watch está sendo executado. Para executar outros comandos durante a execução de um comando watch, você deve abrir outra janela de terminal.

Próximas etapas

Agora que você aprendeu a usar os comandos fetch, upload e watch, confira o guia completo de referência de comandos da CLI para saber o que mais você pode fazer com a CLI.

Também é recomendado conferir os seguintes tutoriais:

Este artigo foi útil?
Este formulário deve ser usado apenas para fazer comentários sobre esses artigos. Saiba como obter ajuda para usar a HubSpot..