Crear un workflow de desarrollo eficiente

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.

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.

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:

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

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.

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. 

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.

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.

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.

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.

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.