Última modificación: 12 de septiembre de 2025
‘Usando el CMS de HubSpot, puedes crear aplicaciones web avanzadas basadas en JS. Hay bibliotecas disponibles para que sea más fácil ponerse en marcha.’; Usando el CMS de HubSpot, puedes crear aplicaciones web basadas en JavaScript.

​
¿Qué nivel de CMS de HubSpot se necesita?

Si tu sitio web requiere un código del lado del servidor o un mecanismo de suscripción de contenido, puedes aprovechar las funciones sin servidor de HubSpot y la característica de membresías de contenido si tienes una suscripción Enterprise. Sin embargo, también puedes crear tu propio sistema utilizando proveedores de terceros, como AWS Lambda, combinado con un enlace API para ejecutar el código del lado del servidor. Si estás creando una aplicación web que necesita alcanzar los endpoints de la API que requieren autenticación, como una token de acceso privado a la aplicación, no deberías ejecutar ese código en el navegador. Estarías exponiendo tus credenciales ante cualquiera que vea la página. El método correcto es crear una capa de abstracción entre el navegador y la API autenticada: un endpoint de API personalizada que no requiere exponer tus credenciales y se sirve desde el mismo dominio que el sitio web que lo llama. Al seleccionar el endpoint de la API personalizada, se ejecutará el código del lado del servidor que puede realizar la solicitud autenticada. A continuación, puedes usar cualquier formato para los datos o la lógica que desees mantener en secreto y enviar el resultado al navegador. Comúnmente, se utilizan funciones sin servidor porque tienen una amplia escalabilidad y no requieren gestionar y mantener tu propio servidor. Puedes usar proveedores como AWS Lambda combinados con una puerta de enlace de API o puedes usar las funciones sin servidor de HubSpot. La ventaja de las funciones sin servidor de HubSpot es que no necesitas gestionar múltiples servicios por separado. La experiencia se simplifica y se integra directamente con el mismo sistema de archivos de desarrollador en el que existen temas, plantillas y módulos. Si no necesitas realizar llamadas de API autenticadas, entonces no necesitas Enterprise para tu aplicación. React y Vue son frameworks front end que no necesitan funciones sin servidor para funcionar; es lo que haces con ellos lo que importa.

​
Frameworks y bibliotecas

Para las aplicaciones web, los desarrolladores suelen utilizar frameworks de JavaScript que ayudan a administrar el estado y la interfaz de usuario (IU). CMS Hub no fue diseñado específicamente para trabajar con un framwork específico, pero muchos frameworks de JavaScript comunes funcionan en el CMS de HubSpot. Al crear en HubSpot, es posible que debas pensar en cómo trabajas con esos frameworks de manera diferente. Sin embargo, los elementos básicos necesarios para trabajar con estos frameworks están disponibles: la capacidad de escribir plantillas personalizadas, módulos y JavaScript. También te permitimos hacer tu codificación localmente, para que puedas usar un paso de creación.

​
Lo que debes saber

Estamos colaborando con nuestra comunidad de desarrolladores para establecer las prácticas recomendadas para crear con frameworks de JavaScript comunes en HubSpot. Si bien es posible hacerlo, hay aspectos de cómo funciona el CMS de HubSpot que pueden requerir que configures tu proyecto de manera diferente a como lo harías en una página en HTML. También puede haber algunas partes de tu proceso de desarrollo a las que no te has acostumbrado. Te pedimos que nos des tus comentarios para que podamos mejorar la experiencia de todos los desarrolladores. Actualmente el mejor lugar para hacerlo es nuestro foro para desarrolladores. A medida que experimentamos y aprendemos, continuaremos actualizando nuestra documentación.

​
Cosas que debes considerar al desarrollar

El CMS de HubSpot tiene un potente sistema de módulos, lo que te permite crear fragmentos reutilizables de CSS, JavaScript y HTML con acceso a HubL, el lenguaje de las plantillas de HubSpot. Los módulos de HubSpot te proporcionan una forma de dar mucho control y poder a los creadores de contenido. Los frameworks de JavaScript modernos a menudo tienen sus propios sistemas de módulos. Todos estos sistemas se crean de forma independiente entre sí y, como resultado, a menudo tienen diferentes soluciones para los problemas que puedas encontrar.

​
Representación del lado del servidor y del lado del cliente

La representación del lado del servidor es cuando el HTML de una página se genera a partir de la lógica de plantilla en el servidor antes de enviar cualquier HTML a un navegador. La representación del lado del cliente es cuando se envía una versión más ligera o “incompleta” del HTML desde el servidor y se utiliza JavaScript para generar el HTML. Esto transfiere el procesamiento de la lógica desde el servidor al navegador web (el cliente). El proceso de hidratación (hydration) es el acto de combinar ambas técnicas. Primero, en el servidor, se genera tanto HTML como sea posible. A continuación, JavaScript evalúa el HTML proporcionado y realiza cambios más pequeños según sea necesario cuando el usuario interactúa con la página o se reciben datos. Esto reduce la carga en el cliente y potencialmente reduce el tiempo que tarda el usuario en ver el contenido cargado. En el CMS de HubSpot, HubL se procesa en el servidor y luego se almacena en caché a nivel de la CDN. Puedes usar JavaScript para “hidratar” o representar del lado del cliente el HTML que el navegador sirve al visitante del sitio.

​
Analíticas de aplicaciones de una sola página (SPA)

Las analíticas son importantes para la capacidad de tu empresa de crecer y adaptarse para ofrecer soluciones a tus clientes y prospectos. Al crear una aplicación de una sola página que contiene varias vistas, es posible que desees rastrear al visitante que accede a diferentes vistas, como páginas. La mayoría de las plataformas de análisis ofrecen una forma de hacerlo con JavaScript, y HubSpot no es la excepción. Pulsa la vista de página cuando la aplicación cambie de vista.

​
Crear tu aplicación utilizando los módulos de HubSpot

El sistema de módulos de HubSpot es un sistema de módulos del lado del servidor, que genera un documento HTML a partir de los parciales de HubL + HTML y que genera CSS y JavaScript minimizados para cada módulo dentro de una página. Si creas usando módulos de HubSpot, hay varios beneficios que vienen con él:
  • Puedes agregar tu módulo a páginas que tengan áreas de arrastrar y soltar o columnas flexibles. También puedes mover y quitar el módulo.
  • Puedes proporcionarle campos al creador de contenido que le permitan configurar tu aplicación.
  • Tu código solo se representa en la página si el módulo se utiliza realmente.
  • Module.css y module.js se minimizan automáticamente.
Una de las implicaciones de usar el sistema de módulos de HubSpot es que requiere que los módulos se compongan de archivos específicos y en lugares diferentes de los que normalmente organizarías el código.

​
Crear una plantilla completa

También puedes crear tu aplicación como una plantilla en lugar de dentro del marco del módulo. Esto te da más flexibilidad en la estructura de archivos. Sin embargo, no obtienes los beneficios que brindan los módulos; los creadores de contenido no podrán agregar esta aplicación a páginas dentro de áreas de arrastrar y soltar y columnas flexibles.

​
Delimitadores

Algunos frameworks de JavaScript utilizan llaves { } para delimitar su código. El lenguaje HubL utiliza estas llaves también. Hay tres estrategias que puedes usar para asegurarte de no tener conflictos entre tu framework y HubL: puedes usar la etiqueta HubL sin procesar para envolver tu JSX, establecer el framework para usar un delimitador diferente o usar un paso de compilación que compile el JavaScript con anticipación.

​
VueJS

El popular framework de Vue.js se puede usar con o sin un paso de compilación. Consulta la documentación de Vue para obtener un desglose más detallado de los pros y los contras de cada método. En HubSpot hay pros y contras específicos que también debes tener en cuenta.

​
Sin un paso de compilación

Integrar Vue.js sin un paso de compilación en un módulo es fácil.

​
Agrega la biblioteca de Vue a tu módulo

En el archivo module.html, usa require_js para agregar la biblioteca de Vue asegurándote de que solo se cargará una vez cuando se agregue el módulo a una página.

​
Agrega el código HTML

Copia el código HTML de la introducción de Vue.js y pégalo en tu archivo module.html. Envuelve este código en una etiqueta de HubL sin procesar para evitar que sea evaluado como HubL. 
{# raw prevents code within it from being evaluated as HubL #}

<div id="app">
  {{ message }}
</div>

​
Agrega el código JavaScript

Copia el JavaScript de la introducción de Vue.js y pégalo en tu module.js. Envuelve este código en un listener de eventos para asegurarte de que se ejecute una vez que el contenido DOM haya terminado de cargarse. Publica el módulo y previsualízalo. Ahora deberías ver que tu aplicación básica de Vue funciona. 
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
  },
});

​
Con un paso de compilación

Creamos una plantilla [versión beta] para ayudarte a poner en marcha el método del módulo de HubSpot para crear una aplicación VueJS. La manera más fácil de aprovecharlo es ejecutar el comando hs create vue-app desde la CLI del CMS. Las instrucciones se pueden encontrar en el repositorio. Esta plantilla es nueva y nos encantaría recibir tus comentarios. Cuéntanos qué se podría mejorar y cualquier problema que encuentres. La mejor manera de proporcionar comentarios es enviando las incidencias al repositorio de GitHub.

​
Trabajar con formularios y CTA de HubSpot dentro de los componentes de Vue

Las CTA y los formularios de HubSpot tienen sus propias etiquetas de script y administran su propio HTML. Para asegurarte de que tu componente de Vue no modifique el formulario o la CTA, crea un elemento HTML alrededor del código de incrustación del CTA o formulario. Aplica v-once a ese elemento. Esto garantiza que el código se renderizará una vez y luego su componente Vue lo ignorará.

​
ReactJS

En lugar de usar HubL para crear módulos y parciales, puedes usar JavaScript y React. Además de unir los componentes de React renderizados por el servidor en el HTML generado por HubL, los módulos y parciales de JavaScript admiten la interactividad tanto del lado del servidor como del lado del cliente. Más información en la Introducción a JS Building Blocks de HubSpot. También puedes darle un vistazo a la plantilla React que puedes usar para empezar rápidamente con una aplicación React dentro de un módulo de HubSpot. La manera más fácil de aprovecharlo es ejecutar el comando hs create react-app desde la CLI del CMS. Desde allí, sigue las instrucciones que hay en el repositorio. Esta plantilla es nueva y nos encantaría recibir tus comentarios. Cuéntanos qué se podría mejorar y cualquier problema que encuentres. La mejor manera de proporcionar comentarios es enviando las incidencias al repositorio de GitHub.

​
Otras bibliotecas de JavaScript

Hay muchas bibliotecas de JavaScript disponibles y es imposible para nosotros documentarlas todas. Hay algunas prácticas recomendadas básicas que debes conocer y comprender al usar las bibliotecas de JavaScript en HubSpot.

​
Usar require_js en lugar de etiquetas de script

Puedes tener decenas de módulos y plantillas que usan bibliotecas de JavaScript compartidas y no preocuparte por cargar esas bibliotecas varias veces. Para hacer esto, necesitas usar la función require_js de HubL. Los scripts que se carguen con esta función solo se cargarán una vez por página, independientemente del número de módulos, parciales y la plantilla que los requieran. 
{{ require_js(get_asset_url('/js/jquery-latest.js')) }}

{{ require_js("https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js") }}
El uso de las solicitudes puede ser increíble para el rendimiento, ya que no solo cargarás el archivo una sola vez. Si los materiales de una página no necesitan esa biblioteca, no se cargarán en absoluto. Incluso puedes usar la solicitud con la lógica de HubL para cargar recursos solo cuando realmente los necesites.

​
Tutoriales y guías recomendados