Cómo optimizar el workflow de desarrollo de HubSpot.

Last updated:

Configurar un workflow eficiente para los desarrolladores te ayudará a trabajar más eficazmente cuando construyas sitios web en el CMS de HubSpot. Dependiendo de la naturaleza de tu equipo de desarrollo web, o de la naturaleza de un proyecto específico, tu workflow puede variar. 

Por ejemplo, un único desarrollador que construye un nuevo sitio en una nueva cuenta CMS de HubSpot debe preocuparse menos por las pruebas y la colaboración. Por otro lado, un equipo de desarrolladores trabajando en un sitio web más grande necesitará un proceso de desarrollo y puesta en escena más claro, un workflow de implementación, y un código que viva en el control de fuentes para poder trabajar de forma eficiente.

Esta guía está diseñada para guiarte en la configuración de un workflow eficiente para el desarrollador, que puedes adaptar a tus necesidades.

Esta guía asume que construyes sitios web utilizando la CLI de CMS, sigue el tutorial de inicio con el desarrollo local para configurarlo. Esta guía también asume que has pasado por la guía de inicio rápido para desarrollar en el CMS de HubSpot.

Construir pensando en la portabilidad

Antes de empezar a configurar nuestro workflow de desarrollador, es importante reconocer la portabilidad como un concepto clave para tener un workflow de desarrollador eficiente. La portabilidad de tu proyecto garantiza que sea fácil pasar de un entorno a otro sin apenas fricciones ni explicaciones, lo que facilita las pruebas y la puesta en escena de los cambios antes de ponerlos en marcha. 

La plantilla de temas de CMS es un proyecto de ejemplo que es portátil, utilizando características como rutas de archivo relativas, y el verdadero formato de archivo para todos los materiales en el proyecto utilizando la CLI de CMS, que le permite vivir en el control de la fuente y trabajar en cualquier cuenta de HubSpot. Este proyecto es un gran punto de partida o de referencia para los desarrolladores que trabajan en un nuevo proyecto. Todos los Temas predeterminados de HubSpot están construidos utilizando esta plantilla, y también pueden ser utilizados como un punto de partida portátil y eficaz.

Configurar el entorno de desarrollo

Para tu entorno de desarrollo individual, cada desarrollador de tu equipo debería crear una cuenta gratuita de CMS Developer Sandbox. Estas cuentas nunca vencen y tienen todas las funcionalidades de las cuentas de pago de HubSpot CMS (excepto poder conectar dominios personalizados). 

La CLI de CMS facilita la interacción con múltiples cuentas de HubSpot CMS. Crea una nueva entrada de configuración para tu cuenta de CMS Developer Sandbox. Establece el nombre de la entrada para tu entorno de pruebas para que sea del tipo "DEV" o "SANDBOX" para que quede claro que esta cuenta es un entorno de desarrollo. Adicionalmente, configura el defaultPortal para que sea tu cuenta de entorno de pruebas, de modo que cuando ejecutes comandos usando la CLI de CMS, interactuará automáticamente con tu entorno de pruebas, y reducirá los despliegues de producción accidentales. En este punto, tu archivo de configuración tendrá un aspecto similar al siguiente:

defaultPortal: DEV portals: - name: PROD portalId: 123 authType: personalaccesskey personalAccessKey: >- xxxxx-xxxxxx-xxxxxxx-xxxxxx-xxxxx-xxxxxxx-xxxxxxxx auth: tokenInfo: accessToken: >- xxxxx-xxxxxx-xxxxxxx-xxxxxx-xxxxx-xxxxxxx-xxxxxxxx expiresAt: '2020-01-01T00:00:00.000Z' - name: DEV portalId: 456 authType: personalaccesskey personalAccessKey: >- xxxxx-xxxxxx-xxxxxxx-xxxxxx-xxxxx-xxxxxxx-xxxxxxxx auth: tokenInfo: accessToken: >- xxxxx-xxxxxx-xxxxxxx-xxxxxx-xxxxx-xxxxxxx-xxxxxxxx expiresAt: '2020-01-01T00:00:00.000Z'

Ahora, al ejecutar comandos en la CLI del CMS, como hs upload si no especificas un portal, los archivos se cargarán a tu cuenta "DEV".

Configurar tu editor de código

Puedes usar tu editor de código preferido cuando construyas en HubSpot, ya sea que prefieras VS Code, u otros editores de código e IDE.

VS Code

Una cantidad significativa de desarrolladores que construyen en HubSpot utilizan Visual Studio Code. Eso inspiró la extensión VS Code de HubSpot. La extensión agrega fragmentos útiles de intellisense, finalización de código HubL, resaltado de sintaxis HubL Linting.  El proyecto es de código abierto y las contribuciones son bienvenidas. Si tienes algún comentario, por favor, introduce una incidencia en el repositorio.

Get VS Code Extension

extensión de vs code captura de pantalla animada mostrando la sugerencia de variable hubl

Otros editores de código e IDE

Si bien existe una extensión oficial de VS Code, no hay razón para que no puedas usar un editor diferente que prefieras.  HubL es la bifurcación privada de HubSpot de Jinjava, que se basa en Jinja. Debido a las similitudes en la sintaxis, las extensiones de resaltado de sintaxis de Jinja tienden a funcionar bien. Las extensiones y las herramientas complementarias varían según el editor.

Pruebas

Existen dos métodos principales para probar los cambios:

  • Prueba con watch/upload: cuando trabajes en tu entorno de desarrollo, es seguro utilizar el comando watch para cargar automáticamente los cambios cuando guardes los archivos en tu editor de texto para desarrollar rápidamente. Si utilizas la herramienta "Vista preliminar en directo con opciones de visualización" del Administrador de diseño para una plantilla, a medida que guardes los cambios, los verás reflejados automáticamente en la salida renderizada de la vista previa de la plantilla. Para ver la vista preliminar en directo de una plantilla, selecciona Vista preliminar > Vista preliminar en directo con opciones de visualización dentro del editor de plantillas del Administrador de diseño. 
  • Probar localmente: para obtener una vista preliminar de tus cambios localmente sin cargarlos en la cuenta, puedes ejecutar el comando hs theme preview en el directorio raíz del tema. Este comando ejecutará un servidor proxy local en https://hslocal.net:3000/ que luego puedes usar para obtener una vista preliminar de las plantillas y módulos del tema. Más información sobre el comando de vista previa del tema hs.

Editor

Otra pieza fundamental de la fase de desarrollo es probar los cambios en las herramientas de creación de contenidos. Si estás construyendo módulos, o plantillas diseñadas para ser manipuladas en el editor de contenidos, crea páginas en tu entorno de desarrollo para asegurarte de que la experiencia de edición de contenidos es como pretendes. Arrastra los módulos en configuraciones extrañas e introduce contenido ficticio para asegurarse de que los vendedores no puedan "romper" tus módulos cuando construyan páginas. El uso de los editores de contenido te ayudará a ilustrar las barreras de seguridad que deseas construir en tus plantillas y módulos. Actualmente, no es posible mover contenido, como páginas o publicaciones de blog, entre cuentas de HubSpot.

Vista preliminar del módulo

Cuando estés en el editor de módulos dentro del Administrador de diseño, selecciona el botón "Vista preliminar". Esto abrirá un editor de vista preliminar de cómo se comportará el módulo y sus campos en los editores de contenido. Esto te permite probar los campos, grupos y repetidores de tu módulo con contenido ficticio en un entorno seguro.

Vista preliminar del módulo

Depuración

Saber cómo depurar y solucionar los problemas de tu sitio web es fundamental para la salud y el éxito continuos de tu sitio web. Familiarízate con las técnicas de depuración cuando desarrolles en el CMS de HubSpot.

Entornos de pruebas

Como se indicó anteriormente en la sección sobre la configuración de tu entorno de desarrollo, puedes crear cuentas gratuitas de CMS Developer Sandbox para utilizarlas como pruebas y como entorno de desarrollo seguro.

Desplegando

Una vez que hayas probado tus cambios y estén listos para ponerlos en marcha, es el momento de desplegar los cambios en tu portal de producción. Basado en tu configuración local, necesitarás ejecutar el comando CLI de CMS con el argumento --portal para interactuar con tu cuenta de producción, como hs upload my-theme/src my-theme --portal=PROD. Cuando cargas los archivos a tu cuenta de producción, presta atención si hubo algún error que diagnosticar, y asegúrate de navegar brevemente por tu sitio web en directo para asegurarte de que no hubo ninguna consecuencia involuntaria del despliegue. 

Si trabajas como parte de un equipo de desarrollo web, se recomienda tener toda la fuente de la verdad de la base de código de producción en el control de versiones e implementar en el portal de tu producto cuando los cambios se fusionan en el maestro. De esta manera, tu equipo de desarrolladores puede utilizar tu sistema de control de versiones favorito para colaborar, hacer seguimiento y revertir fácilmente los cambios. 

Para obtener más información sobre cómo configurar la integración continua con los repositorios de git, sigue esta guía sobre utilizar acciones de GitHub para implementar en tu cuenta de producción cuando los cambios se fusionan en master.


¿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.