Última modificación: 12 de septiembre de 2025
‘Crea tu primera función sin servidor en el CMS de HubSpot y obtén una respuesta.’; Las funciones sin servidor proporcionan una forma de ejecutar JavaScript a través de HubSpot en el lado del servidor, evitando que quede expuesto al cliente. Esto puede ser importante para realizar solicitudes a la API que contengan información sensible, como una clave de API u otras credenciales. Cuando se invoca la función, HubSpot la ejecuta en su back end, lo que también significa que no necesitas proporcionar tus propios servidores back end para hacer solicitudes a tu sitio web CMS. Las funciones sin servidor de HubSpot utilizan el tiempo de ejecución NodeJS. En esta guía, aprenderás a crear una función sin servidor sencilla que obtenga una cotización de un servicio de terceros y la muestre en una página web. Para crear y desplegar la función sin servidor en tu cuenta, utilizarás un proyecto de desarrollador de HubSpot. Para una revisión de general de las funciones sin servidor, consulta el resumen general de las funciones sin servidor. También puedes consultar el canal de YouTube de HubSpot Developers para ver un tutorial sobre el uso de funciones sin servidor en un proyecto en el CMS.

​
Requisitos previos

Antes de empezar este tutorial, necesitarás:

​
1. Crear una nueva carpeta de proyecto

Empieza creando un proyecto de forma local para que puedas crearlo y desplegarlo en tu cuenta.
  • En el terminal, navega hasta el directorio donde guardarás tu proyecto utilizando el comando cd.
cd Documents/Dev/serverless-function-project
  • Ejecuta hs project create para crear una propiedad nueva.
hs project create
  • Sigue los prompts del terminal para crear tu proyecto. Para la plantilla, selecciona Crear un proyecto vacío (sin plantilla).
Opción prompt del terminal para crear un proyecto vacío sin plantilla
  • Navega hasta el directorio del nuevo proyecto utilizando el comando cd. Por ejemplo, si llamas a tu proyecto mi nuevo proyecto:
cd my-new-project

​
2. Añade una función sin servidor al proyecto

Una vez creado tu proyecto, ábrelo en tu editor preferido, como VS Code. HubSpot habrá creado automáticamente un directorio de proyecto junto con un directorio vacío src y un archivo de configuración hsproject.json. Para añadir una función sin servidor al proyecto, crea un directorio app dentro del directorio src y luego añade los siguientes directorios y archivos dentro de él:
  • app/app.json: el archivo de configuración de la aplicación.
  • app/app.functions: el directorio de funciones sin servidor. Puedes utilizar el nombre que quieras, siempre que termine en .functions.
  • app/app.functions/function.js: el código JavaScript que se ejecutará cuando se invoque la función.
  • app/app.functions/serverless.json: el archivo de configuración de la función sin servidor.
  • app/app.functions/package.json: incluye las dependencias necesarias.
Estructura del proyecto tras añadir los archivos y carpetas anteriores al directorio del proyecto
  • Copia el código de ejemplo que aparece a continuación en tus respectivos archivos locales app.json, function.js, serverless.json, y package.json. Debajo de cada bloque de código .json, también encontrarás una tabla con definiciones de campos.
{
  "name": "Serverless function app",
  "description": "This app runs a serverless function to fetch a quote using the Zen Quotes API.",
  "scopes": ["crm.objects.contacts.read", "crm.objects.contacts.write"],
  "uid": "serverless-function-app",
  "public": false
}
CampoTipoDescripción
nameCadenaEl nombre de la aplicación, que se mostrará en la interfaz de usuario de HubSpot.
descriptionCadenaLa descripción de la aplicación, que se mostrará en la interfaz de usuario de HubSpot.
scopesMatrizLos permisos a los que tiene acceso la aplicación para autenticar las solicitudes con el token de acceso privado a la aplicación. Los dos permisos anteriores son los permisos mínimos requeridos. No se añaden permisos adicionales para este tutorial, ya que no necesitarás utilizar el token de acceso a la aplicación privada para la solicitud que harás.
uidCadenaEl identificador único de la aplicación. Puede ser cualquier cadena, pero debe identificar significativamente a la aplicación. HubSpot identificará la aplicación mediante este ID para que puedas cambiar el name de la aplicación de forma local o en HubSpot sin eliminar los datos históricos o de estado, como los registros.
publicCadenaAjuste a false para aplicaciones privadas.
  • Después de añadir el código anterior, guarda los cambios.

​
3. Subir el proyecto a HubSpot

Una vez guardados los cambios, ya puedes subir el proyecto a HubSpot para crear y desplegar la aplicación y la función sin servidor.
  • En la terminal, ejecuta hs project upload.
hs project upload
  • Confirma que quieres crear el proyecto en la cuenta. No necesitarás confirmarlo de nuevo después de la creación inicial. El terminal mostrará el estado actual de los pasos de compilación y despliegue a medida que avanzan.
  • Una vez que la subida se haya completado, ejecuta hs project open para ver el proyecto en HubSpot.
hs project open
En HubSpot, puedes ver los detalles del proyecto, los registros de creación y despliegue, los registros de funciones sin servidor, gestionar el proyecto y la aplicación, y mucho más. Más información sobre la gestión de proyectos en HubSpot.

​
4. Probar la acción

Con la función sin servidor desplegada, puedes invocarla usando su URL pública. Las funciones sin servidor creadas con proyectos de desarrollador tienen la siguiente estructura de URL pública: https://<domain>/hs/serverless/<endpoint-path-from-config>.
  • <domain>: puedes utilizar cualquier dominio conectado a la cuenta. Por ejemplo, si tanto el sitio web.com como el subdominio.marca.com están conectados a la cuenta, podrías llamar a la función utilizando https://website.com/hs/serverless/<path> o https://subdomain.brand.com/hs/serverless/<path>.
  • <endpoint-path-from-config>: el valor del campo path en serverless.json.
Basándonos en el código de ejemplo proporcionado en este tutorial, la URL pública para invocar la función será: https://<domain>/hs/serverless/fetch-quote. Para ver el resultado de la función, navega hasta esa URL en tu navegador, sustituyendo el dominio por uno de tus dominios alojados en HubSpot. Si no has conectado un dominio personalizado, puedes utilizar uno de los dominios predeterminados que HubSpot proporciona: <hubId>.hs-sites.com (por ejemplo, 123456.hs-sites.com). Tu navegador debería mostrar los datos devueltos por la API de cotizaciones Zen. Navegador que muestra los datos devueltos por la API de cotizaciones Zen

​
5. Invocar la función desde una página web

Ahora que has creado la función sin servidor y has confirmado que devuelve datos, impleméntala en una página para ver los datos devueltos en un contexto más real. Para este tutorial, crearás una plantilla de página que contenga algo de JavaScript personalizado y HTML para ejecutar la función y mostrar los datos de respuesta. Primero, crea una plantilla para una página nueva:
  • En tu entorno local, crea un nuevo directorio que contenga la plantilla de la página. A efectos de este tutorial, crea este directorio fuera del directorio del proyecto creado por hs project create.
  • En el terminal, navega hasta ese directorio utilizando el comando cd. 
cd Documents/Dev/serverless-page
  • Ejecuta hs create template "serverless-template" para crear una nueva plantilla llamada serverless-template.
hs create template "serverless-template"
  • Selecciona el tipo de plantilla de la página.
  • Abre el archivo de plantilla de la página recién creado en tu editor y luego, sustituye el código de la plantilla por el código que aparece a continuación. Asegúrate de sustituir <domain> en la URL del endpoint de la función (fetch('http://<domain>/hs/serverless/fetch-quote')) por un dominio que esté conectado a tu cuenta de HubSpot.
<!--
    templateType: page
    label: Serverless function example template
    isAvailableForNewContent: true
-->
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>{{ content.html_title }}</title>
    <meta name="description" content="{{ content.meta_description }}" />
    {{ standard_header_includes }}
  </head>
  <body>
    {% module "page_template_logo" path="@hubspot/logo" label="Logo" %}
    <!-- Button to fetch quote via serverless function -->
    <div class="serverless-container">
      <h2>Get quote</h2>
      <p class="subtitle">Click the button to fetch and display a quote.</p>
      <button id="data-button" type="button">Get quote!</button>
      <div id="data-container">
        <p class="data"></p>
      </div>
    </div>
    <!-- End button section -->

    {{ standard_footer_includes }}

    <!-- JavaScript that invokes the serverless function
     and adds returned data into the "data" text element -->
    <script>
      const dataButton = document.getElementById('data-button');
      const dataContainer = document.getElementById('data-container');

      dataButton.addEventListener('click', function (e) {
        console.log('Button clicked!');

        // Show loading state
        dataContainer.innerText = 'Loading...';
        // Replace <domain> with your own domain
        fetch('http://<domain>/hs/serverless/fetch-quote')
          .then((response) => {
            if (!response.ok) {
              throw new Error(`HTTP error! Status: ${response.status}`);
            }
            // Parse the JSON response
            return response.json();
          })

          .then((data) => {
            console.log('Raw data received:', data);

            // Clear container
            dataContainer.innerText = '';

            // Create the paragraph element
            const newDataElement = document.createElement('p');
            newDataElement.innerText = `"${data.q}" — ${data.a}`;
            dataContainer.appendChild(newDataElement);
          });
      });
    </script>
  </body>
</html>
  • Guarda el archivo, luego ejecuta hs upload para subirlo a HubSpot. Sigue las indicaciones del terminal para seleccionar la ruta local de origen y de destino. Para este tutorial, basta con que pulses Introducir en cada prompt para utilizar las rutas predeterminadas.
Luego, crea una nueva página a partir de la plantilla en HubSpot.
  • Navega al panel de páginas web de tu cuenta de HubSpot ejecutando el comando hs open website-pages.
hs open website-pages
  • En tu navegador, haz clic en Crear en la parte superior derecha para crear una nueva página.
  • En el cuadro de diálogo, selecciona un dominio para utilizarlo y luego, asigna un nombre de página. El dominio de la página tendrá que coincidir con el dominio que estás utilizando para invocar la función sin servidor para evitar errores de origen cruzado (CORS). Puedes seleccionar ese dominio en el menú desplegable o actualizar la URL del endpoint en el código de la plantilla de la página (fetch('http://<domain>/hs/serverless/fetch-quote')) para utilizar el dominio que selecciones en este paso.
  • Haz clic en Crear página.
  • En la pantalla de selección de plantillas, busca tu nueva plantilla. Puedes utilizar la etiqueta o el nombre del archivo para buscar la plantilla (por ejemplo, “Página de ejemplo de función sin servidor”). La plantilla aparecerá en Otras plantillas, ya que no forma parte de un tema.
Sección otras plantillas que muestra la plantilla de página recién creada
  • Haz clic en Seleccionar plantilla.
  • En el editor de páginas, haz clic en Vista previa en la parte superior derecha.
Botón de vista previa del editor de páginas
  • Haz clic en Abrir en una nueva pestaña.
En la nueva pestaña, ahora deberías poder hacer clic en el botón para obtener y mostrar cotizaciones. Demostración de un botón de ejemplo que obtiene y muestra cotizaciones de la API de cotizaciones Zen

​
Próximos pasos

Ahora que has creado e implementado una función sin servidor que interactúa con una API de terceros, hay algunas formas de seguir aumentando el uso de tu función sin servidor, como por ejemplo:
  • Incluir la autenticación en una solicitud para realizar llamadas a las API de HubSpot o a otras API autenticadas de terceros.
  • Implementar el botón y el código JavaScript en un módulo en lugar de codificarlo en la plantilla de la página. Esto te daría una opción más portátil, permitiendo invocar la función desde cualquier página a la que se añada el módulo. Para ello, debes crear un módulo, añadir el HTML en el archivo module.html del módulo y el JavaScript en el archivo module.js.
<div class="serverless-container">
  <h2>Get quote</h2>
  <p class="subtitle">Click the button to fetch and display a quote.</p>
  <button id="data-button" type="button">Get quote!</button>
  <div id="data-container">
    <p class="data"></p>
  </div>
</div>