Primeros pasos con el desarrollo local

Last updated:

La CLI (interfaz de línea de comandos) de HubSpot conecta tu entorno local a HubSpot, lo que significa que tendrás copias locales de tus recursos web de HubSpot. Esto te permite utilizar el control de versiones, tu editor de texto favorito y varias tecnologías de desarrollo web al desarrollar en el CMS Hub. 

Esta guía es mejor para quienes ya están familiarizados 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:

Quick start to CMS Hub development

En este tutorial, aprenderás:

  • Cómo instalar la CLI y conectarla a tu cuenta de HubSpot.
  • Cómo obtener un módulo de tu cuenta de HubSpot.
  • Cómo actualizar el módulo localmente y luego cargar los cambios.
  • Cómo usar el comando Watch para continuar cargando los cambios guardados.

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

Instalar dependencias

Para desarrollar en HubSpot localmente, deberás:

  1. Instalar Node.js, un entorno de tiempo de ejecución de Javascript que permite las herramientas locales. Las versiones 16 o superiores de Node son compatibles, pero recomendamos la versión de soporte a largo plazo (LTS).
  2. Ejecuta npm install -g @hubspot/cli en tu línea de comandos para instalar las CLI de HubSpot globalmente. Para instalar las herramientas únicamente 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.

¿Se produce un error de EACCES al instalar?
Consulta NPM Resolver errores de permisos EACCESS al instalar paquetes globalmente.

1 1. Crear un directorio de trabajo

Crea una carpeta para el trabajo que harás a continuación. Para fines de este tutorial, nombra la carpeta local-dev-tutorial.

Puedes hacer esto localmente ejecutando mkdir local-dev-tutorial en la línea de comandos, que creará el directorio. Luego, ejecuta cd local-dev-tutorial para navegar a ese directorio.

2. Configurar las herramientas de desarrollo local

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:

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
NombreDescription
defaultPortal
Opcional

La cuenta con la que se interactúa por opción predeterminada cuando se ejecutan comandos CLI.

Para interactuar con una cuenta autenticada que no está configurada como predeterminada, puedes agregar una marca --account= al comando, seguido del nombre o ID de la cuenta. Por ejemplo, --account=12345 o --account=mainProd.

name
Opcional

En portals encontrarás una entrada para cada cuenta conectada. name especifica el nombre de la cuenta. Puedes usar este nombre al configurar una nueva cuenta predeterminada o al especificar una cuenta con la marca --account.

portalId
Requerido

El ID de la cuenta.

defaultMode
Opcional

Al cargar en la cuenta, establece el estado predeterminado para cargar el contenido. Puede ser draft o publish.

authType
Requerido

La forma de autenticación utilizada para autenticar la cuenta. 

sandboxAccountType
Opcional

Si la cuenta es una cuenta de entorno de pruebas, indica el ID de la cuenta de producción principal.

parentAccountId
Opcional

parentAccountId

El archivo hubspot.config.yml admite varias cuentas. Para autenticar más cuentas, ejecuta hs auth y sigue las indicaciones.

3. Crear un recurso para recuperarlo en HubSpot

Para los fines de este tutorial, primero crearás un nuevo recurso en HubSpot para que puedas recuperarlo en tu entorno local utilizando la CLI. 

  • En tu cuenta de HubSpot, navega a Marketing > Archivos y plantillas > Herramientas de diseño. Esto abrirá el gestor de diseño, que es donde puedes acceder a los archivos que subes usando la CLI. Este árbol de archivos y carpetas también se conoce como el sistema de archivos del desarrollador.
  • En la barra lateral izquierda del administrador de diseño, selecciona la carpeta @hubspot para ver los recursos predeterminados de HubSpot, como los temas y los módulos.
    design-manager-hubspot-folder
  • En la barra lateral izquierda, desplázate hacia abajo y haz clic con el botón derecho en el módulo icono, y luego selecciona Clonar módulo. El módulo se clonará en la raíz del sistema de archivos del desarrollador y la nueva copia del módulo se abrirá a la derecha.
    default-icon-module-cloned
  • En la parte superior de la barra lateral izquierda, haz clic en Acciones y, a continuación, selecciona Copiar ruta. Esto copiará la ruta relativa al módulo en el sistema de archivos del desarrollador, la cual utilizarás en el siguiente paso para obtener el módulo localmente. 
    module-actions-copy-path

4. Llevar el módulo a su entorno local

Con el módulo clonado, ahora usarás el comando fetch para llevarlo a tu entorno local.

En el terminal, ejecuta hs fetch '/icon copy.module'.

hs fetch '/icon copy.module'
El módulo se descargará como un directorio que contiene cinco archivos:
  • fields.json: contiene el código de los distintos campos del módulo. En este caso, esto incluye el campo de icono, dos campos de opción de accesibilidad y un conjunto de campos de estilo. Puedes ver estos campos en la barra lateral derecha del editor de módulos en HubSpot.
  • meta.json: contiene la información básica del módulo, como su etiqueta, ID y los tipos de plantillas en las que se puede utilizar. Esta información se mostrará en la barra lateral derecha del editor de módulos.
  • module.css: contiene el CSS del módulo, que también puedes ver en el panel CSS del editor de módulos en HubSpot. 
  • module.html: contiene el HTML del módulo, el cual también puedes ver en el panel HubL + HTML del editor de módulos en HubSpot.
  • module.js: contiene el JavaScript del módulo, el cual también puedes ver en el panel JS del editor de módulos en HubSpot.
    module-directory-local
A continuación, actualizarás el archivo meta.json del módulo, lo subirás a tu cuenta y verás el cambio en HubSpot.

5. Realizar cambios y subir

Primero, haz un cambio en el módulo:

  • En tu editor de código preferido, abre el archivo meta.json del módulo.
    module-meta-json-file-open
  • Actualiza el campo de etiqueta de "Icono" a "Módulo tutorial CMS". Luego, guarda el archivo.
    module-meta-json-file-label-updated
Antes de ejecutar el siguiente comando, hs upload, desglosemos el comando y los argumentos que necesita. Este comando tiene dos argumentos: hs upload <src> <dest>
  • src: la ruta relativa de la carpeta de origen que estás cargando desde tu entorno local.
  • dest: la ruta del directorio de destino en HubSpot, local a la raíz del sistema de archivos del desarrollador. Puedes crear un nuevo directorio en la cuenta especificando el nombre del directorio, como hs upload<src>/new-directory.
  • Teniendo esto en cuenta, debido a que estás cargando en la raíz del sistema de archivos del desarrollador, ejecuta el siguiente comando:
hs upload 'icon copy.module' 'icon copy.module'
  • Después de que la CLI confirme que el módulo se ha cargado correctamente, actualiza el administrador de diseño para ver tu cambio en HubSpot. Ahora deberías ver que el campo Etiqueta muestra tu nuevo valor.
module-label-updated

6. Ejecutar un comando watch para cargar automáticamente los cambios

Ahora que has utilizado el comando upload para ejecutar una carga única de sus archivos locales, ahora utilizarás el comando watch para cargar continuamente los cambios guardados. Este comando toma los mismos argumentos que upload, por lo que puedes especificar el mismo <dest> y <src> como arriba.

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

Con el comando watch en funcionamiento, los cambios guardados se cargarán automáticamente en la cuenta de HubSpot. A modo de demostración, haz el siguiente cambio local en el módulo:

  • En el archivo meta.json, actualiza el campo host_template_types para eliminar "BLOG_LISTING" y "BLOG_post" para que el módulo solo esté disponible para las páginas:

    "host_template_types":["PAGE"]
  • Luego, guarda el archivo. Esto debería hacer que la CLI cargue automáticamente el archivo en HubSpot.
  • Una vez subido el archivo, actualiza el administrador de diseño en HubSpot para ver el cambio. La sección Tipos de plantilla de la barra lateral derecha ahora solo debe incluir Página.
module-editor-template-type
  • Para finalizar el reloj, presiona Control + C. Es importante tener en cuenta que no podrás ejecutar otros comandos en la misma ventana de terminal en la que se está ejecutando el comando watch. Para ejecutar otros comandos mientras ejecuta un watch, debes abrir otra ventana de terminal y ejecutar tus comandos allí.

Pasos siguientes

Ahora que has visto cómo usar los comandos fetch, upload y watch, es posible que desees consultar la guía de referencia de comandos de guía de referencia de comandos de CLI completa para saber qué más puedes hacer con la CLI.

También se recomienda consultar los siguientes tutoriales:

¿Te resultó útil este artículo?
Con este formulario puedes enviar tu opinión sobre nuestros documentos para desarrolladores. Si tienes comentarios sobre el producto de HubSpot, puedes enviarlos al Foro de ideas.