Introdução ao desenvolvimento local

A CLI (Interface de Linha de Comando) do HubSpot conecta o seu fluxo de trabalho local ao HubSpot, permitindo-lhe utilizar o controle de versão, o seu editor de texto favorito e várias tecnologias de desenvolvimento web para desenvolver no CMS Hub.

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:

A CLI do HubSpot é usada para fazer upload, buscar e monitorar arquivos do sistema de arquivos do desenvolvedor. Ao construir usando a CLI, você tem cópias locais dos seus ativos.  Como o código está disponível localmente, você pode usar seu editor de código preferido, usar ferramentas de compilação, enviar seu código para um repositório git.

Além disso, a CLI tem uma funcionalidade auxiliar que pode acelerar o seu desenvolvimento. Por exemplo, o comando hs create permite criar de forma rápida diferentes tipos de ativos localmente, desde módulos até à criação de um tema com base no boilerplate.

Neste guia, vamos falar sobre a instalação da CLI e suas principais características ao buscar um projeto na sua conta da HubSpot e depois carregar as alterações de em suas Ferramentas de design.

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

Para usar as ferramentas locais, você precisará:

1. Instalar o Node.js, um ambiente Javascript em tempo de execução que possibilita as ferramentas locais. A versão 10 ou superior do Node são suportadas, mas recomendamos a versão de suporte a longo prazo (LTS).
2. Para instalar as ferramentas da HubSpot globalmente, execute npm install -g @hubspot/cli na sua linha de comandos. 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.

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:

Por padrão, o HubSpot interagirá com o defaultPortal ao executar comandos. Para interagir com outros portais conectados, você pode incluir um  sinalizador --account= e usará o valor name ou portalId. Por exemplo, --account=345 e --account=sandbox interagem com o ID de conta 345 com base no código acima.

Usando o comando fetch, executehs fetch --account=<name> <src> <dest> para obter toda a árvore de pastas e arquivos da sua conta da HubSpot no seu ambiente local. O src é o caminho do projeto nas suas ferramentas de design da HubSpot, e o dest é o caminho para o diretório local no qual você gostaria que os arquivos fossem colocados, em relação ao diretório de trabalho atual. Para buscar o projeto em seu diretório de trabalho atual, você pode deixar de fora o argumento <dest>.

Veja um exemplo de como buscar um projeto da sua conta da HubSpot:

Este é o projeto das Ferramentas de design que buscamos em nosso ambiente local:

Usando o comando upload, execute hs upload --account=<name> <src> <dest> para fazer upload do projeto do seu ambiente local para sua conta da HubSpot. Isso copiará o conteúdo do <src> e o carregará na sua conta da HubSpot no <dest>. Se estiver criando um novo projeto nas suas Ferramentas de design, o <dest> pode ser uma nova pasta no HubSpot.

Veja um exemplo de como fazer upload do projeto de exemplo na sua conta da HubSpot:

Execute  hs watch --account=<name> <src> <dest>para monitorar seu diretório local e fazer upload automaticamente das alterações na sua conta da HubSpot.

Veja um exemplo de como executar esse comando usando o comando watch:

Para ver a documentação completa sobre a CLI da HubSpot, consulte a documentação de referência. 

• Criar um fluxo de trabalho de desenvolvimento eficaz
• Como configurar integração contínua com o GitHub
• Introdução aos módulos personalizados
• Introdução aos temas
• Introdução às áreas de arrastar e soltar