Introdução ao desenvolvimento local

Last updated:

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. Se você é completamente novo no desenvolvimento usando o HubSpot CMS Hub, nós o incentivamos a:

Quick start to CMS Hub development

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.

Instalar dependências

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.

Observação: 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 projeto local. Por exemplo, execute mkdir local-cms-dev na linha de comando, que irá criar um diretório. Depois, execute cd local-cms-dev para navegar até esse diretório.

2. Configurar as ferramentas de desenvolvimento local

Execute hs init para conectar o os instrumentos à sua conta da HubSpot. Este comando irá orientá-lo pelos seguintes passos:

  1. Primeiro você será orientado a criar uma chave de acesso pessoal do CMS para permitir o acesso autenticado à sua conta através das ferramentas de desenvolvimento local. Você será solicitado a pressionar "Enter" quando estiver pronto para abrir a página da Chave de acesso pessoal do CMS no navegador padrão. Esta página lhe permitirá visualizar ou gerar a sua chave de acesso pessoal, se necessário. (Observação: você precisará selecionar pelo menos a permissão "Design Manager" para concluir este tutorial) Copie a chave de acesso e cole-a no terminal.
  2. Em seguida, você vai inserir um nome para a conta. Esse nome só é visto e usado por você; por exemplo, você pode usar "sandbox" se estiver usando um ambiente de testes ou "company.com" se estiver usando uma conta de cliente completa. Esse nome não pode conter espaços. Esse nome será usado ao executar comandos.

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

 hubspot.config.yml será parecido com isso:

defaultPortal: sandbox portals: - name: sandbox portalId: 345 authType: personalaccesskey personalAccessKey: >- xxxxxxxxx-xxxxxxx-xxxxxxx-xxxxxxx-xxxxxxxx auth: tokenInfo: accessToken: >- xxxxxxxxx-xxxxxxx-xxxxxxx-xxxxxxx-xxxxxxxx expiresAt: '2020-02-24T19:38:39.164Z'

O hubspot.config.yml suporta várias entradas de portal. A maneira mais fácil de adicionar mais portais depois de já ter um hubspot.config.yml é usar hs auth.

Ao executar comandos, tanto name quanto portalId podem ser usados na opção --account= (por exemplo: --account=123 e --account=sandbox vão interagir com o ID de conta 123 com base no exemplo acima). Se você definir um defaultPortal de nível superior, poderá excluir a opção --account= de seus comandos; os comandos farão referência a esse portal padrão.

3. Buscar um projeto na sua conta

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:

hs fetch cms-project

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

projeto local e do gerenciador de design

4. Fazer alterações e fazer upload da sua conta da HubSpot

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:

hs upload cms-project cms-project

5. Monitorar o seu projeto local e fazer upload de alterações automaticamente

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:

hs watch cms-project cms-project

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

Tutoriais e recursos relacionados


Esse artigo foi útil?
Este formulário é para comentários sobre nossos documentos de desenvolvimento. Se tiver comentários sobre o produto da HubSpot, em vez disso compartilhe sua opinião no Fórum de Ideias.