Primeros pasos con el desarrollo local

La CLI de HubSpot (Command Line Interface) conecta tu workflow local con HubSpot, permitiéndote utilizar el control de versiones, tu editor de texto favorito y varias tecnologías de desarrollo web al desarrollar en CMS Hub.

Esta guía es mejor para la gente que ya está familiarizada con el CMS pero quiere aprender a trabajar con la CLI. Si recién estás comenzando con el desarrollo en CMS Hub, te animamos a consultar la guía de inicio rápido:

La CLI de HubSpot se utiliza para cargar, obtener y ver archivos del sistema de archivos del desarrollador. Construir con la CLI significa que tendrás copias locales de tus materiales.  Como tienes el código localmente puedes usar tu editor de código preferido, puedes usar herramientas de construcción, puedes enviar tu código a un repositorio git.

Además, la CLI tiene funciones de ayuda que pueden acelerar tu desarrollo. Por ejemplo, el comando hs create te ofrece maneras de crear rápidamente diferentes tipos de materiales localmente, desde módulos hasta la creación de un tema a partir de una plantilla.

En esta guía, vamos a caminar a través de la instalación de la CLI, y las características principales de la CLI de recuperación de un proyecto de tu cuenta de HubSpot, y luego cargar los cambios de nuevo a tus herramientas de diseño.

Para conocer más comandos y formatos de archivos locales, consulta la referencia de herramientas de desarrollo local.

Para utilizar la herramienta local, necesitarás:

1. Instalar Node.js, un entorno de tiempo de ejecución de Javascript que permite las herramientas locales. Las versiones 10 o superiores de Node son compatibles, pero recomendamos la versión de soporte a largo plazo (LTS).
2. Para instalar las herramientas de HubSpot globalmente, ejecuta npm install -g @hubspot/cli en tu línea de comandos. Para instalar las herramientas en tu directorio actual, ejecuta npm install @hubspot/cli.

Si lo prefieres, también puedes utilizar Yarn. Homebrew no es requerido pero se recomienda para facilitar la instalación. Si estás utilizando Yarn, los comandos se ejecutan con el prefijo yarn.

A continuación, ejecuta hs init para conectar las herramientas a tu cuenta HubSpot. Este comando te guiará por los siguientes pasos:

• Para conectar la CLI a una cuenta de HubSpot, deberás copiar la clave de acceso personal de la cuenta. Cuando se te solicite, presiona Entrar para abrir hubspot.com en la página clave de acceso personal de la cuenta. Si tienes varias cuentas, se te pedirá en el navegador que selecciones una cuenta primero.
• En la página de claves de acceso personal, puedes generar una nueva clave de acceso personal o copiar el valor de la clave existente si ya existe.
  • Si estás creando una clave por primera vez, selecciona a qué ámbitos tiene acceso la clave. Deberás seleccionar al menos el permiso de Design Manager para interactuar con las herramientas de diseño de la cuenta. 
  • Después de seleccionar los permisos de la clave, haz clic en Generar clave de acceso personal.
• Una vez que se haya generado una clave, copia su valor haciendo clic en Mostrar debajo de la clave y luego en Copiar.
• Pega la tecla en la línea de comandos y luego presiona Intro.

• A continuación, introduce un nombre para la cuenta. Este nombre solo será visto y utilizado por ti cuando ejecutes comandos. Este nombre sólo lo ves y lo utilizas tú. Por ejemplo, puedes utilizar "entornodepruebas" si utilizas un entorno de pruebas de desarrollador o "empresa.com" si utilizas una cuenta de cliente completa. Este nombre no puede contener espacios. 
• Presiona Intro. 

Una vez que hayas completado este sencillo flujo init , verás un mensaje de éxito confirmando que se ha creado un archivo de configuración, hubspot.config.yml, en tu directorio actual.

Tu hubspot.config.yml tendrá el siguiente aspecto:

Por opción predeterminada, HubSpot interactuará con el defaultPortal al ejecutar comandos. Para interactuar con otros portales conectados, puedes incluir un indicador --account= y usar el name o el valor portalId. Por ejemplo, --account=345 y --account=sandbox interactuarán con el ID de cuenta 345 en función del código anterior.

Utilizando el comando fetch , ejecuta hs fetch --account=<name> <src> <dest> para obtener un árbol de carpetas de proyectos completo y archivos de tu cuenta de HubSpot en tu entorno local. El src es la ruta del proyecto en tu herramientas de diseño de HubSpot, y el dest es la ruta del directorio local en el que deseas colocar los archivos, en relación con tu directorio de trabajo actual. Para buscar el proyecto en tu directorio de trabajo actual, puedes omitir el argumento <dest>.

Este es un ejemplo de cómo se obtiene un proyecto de tu cuenta de HubSpot:

Este es el proyecto de Herramientas de diseño que trajimos a nuestro entorno local:

Utilizando el comando upload, ejecuta hs upload --account=<name> <src> <dest> para cargar el proyecto en tu entorno local a tu cuenta de HubSpot. Esto copiará el contenido de <src> y lo cargará a tu cuenta de HubSpot en <dest>. Si estás creando un nuevo proyecto en tus herramientas de diseño, <dest> puede ser una nueva carpeta neta en HubSpot.

A continuación se muestra un ejemplo de cómo cargar el proyecto de ejemplo en tu cuenta de HubSpot:

Ejecuta hs watch --account=<name> <src> <dest> para vigilar tu directorio local y cargar automáticamente los cambios a tu cuenta de HubSpot al guardar los archivos.

A continuación se muestra un ejemplo de cómo se ejecutaría ese comando con el comando watch:

Para obtener una documentación completa sobre la CLI de HubSpot, consulta la documentación de referencia. 

• Creación de un workflow de desarrollo eficiente
• ¿Cómo establecer una integración continua con GitHub?
• Primeros pasos a los módulos personalizados
• Primeros pasos para usar temas
• Primeros pasos con las áreas de arrastrar y soltar