Get started with serverless functions

​

Prerequisites

• A Content Hub Enterprise account, or a CMS developer sandbox account.
• The HubSpot CLI (latest version recommended), installed and authenticated with the account you’re using. To check which accounts are authenticated, run hs accounts list. Learn more about getting started with local development.
• Node.js and npm, to install the function’s dependencies locally.

​

Create a project

• In the terminal, navigate to the directory where you’ll be storing your project using the cd command.

cd Documents/Dev

• Run the command below to create a project named zen-quote-project on version 2026.09, with an app that includes a public endpoint function.

hs project create --name zen-quote-project --dest zen-quote-project --project-base app --distribution private --auth static --platform-version 2026.09 --features app-function-endpoint

• Navigate into the new project directory:

cd zen-quote-project

​

Add a serverless function to the project

zen-quote-project/
├── hsproject.json
└── src/
    └── app/
        ├── app-hsmeta.json
        └── functions/
            ├── endpoint-function-hsmeta.json
            ├── NewEndpointFunction.js
            └── package.json

• hsproject.json: the project configuration file. Its platformVersion field is set to 2026.09.
• src/app/app-hsmeta.json: the app configuration file.
• src/app/functions/: the serverless functions directory. Each function is a pair of files: a *-hsmeta.json configuration file and the JavaScript file it points to.
• src/app/functions/package.json: the dependencies for every function in the directory.

• Delete endpoint-function-hsmeta.json and NewEndpointFunction.js.
• In src/app/functions/, create fetch-quote-hsmeta.json and fetch-quote.js, then copy the code below into each file.
• Update package.json and app-hsmeta.json as shown in their tabs.

{
  "uid": "fetch_quote_function",
  "type": "app-function",
  "config": {
    "entrypoint": "/app/functions/fetch-quote.js",
    "secretKeys": [],
    "endpoint": {
      "path": "fetch-quote",
      "methods": ["GET"]
    }
  }
}

const axios = require('axios');

exports.main = async (context) => {
  try {
    // Make a GET request to the Zen Quotes API
    const response = await axios.get('https://zenquotes.io/api/random');

    // Extract the quote data (first item in the array)
    const quoteData = response.data[0];

    // Log the quote and author to the app's logs
    console.log(`"${quoteData.q}" — ${quoteData.a}`);

    // Return the response with a status code, body, and headers
    return {
      statusCode: 200,
      body: quoteData,
      headers: {
        'Content-Type': 'application/json',
      },
    };
  } catch (error) {
    // Log the error, and return a generic message to the caller
    console.error('Error fetching quote:', error.message);

    return {
      statusCode: 500,
      body: { error: 'Failed to fetch quote' },
      headers: {
        'Content-Type': 'application/json',
      },
    };
  }
};

{
  "name": "zen-quote-function",
  "version": "0.1.0",
  "dependencies": {}
}

npm install axios

{
  "uid": "zen_quote_project_app",
  "type": "app",
  "config": {
    "description": "Runs a serverless function that fetches a quote from the Zen Quotes API.",
    "name": "Zen Quotes serverless function",
    "distribution": "private",
    "auth": {
      "type": "static",
      "requiredScopes": ["oauth"],
      "optionalScopes": [],
      "conditionallyRequiredScopes": []
    },
    ...
  }
}

​

Upload the project to HubSpot

• In the terminal, validate the project, then upload it:

hs project validate

hs project upload

• If this is the first upload, confirm that you want to create the project in the account. The terminal displays the status of the build and deploy steps as they progress. The build is deployed as soon as it succeeds, so the function is live once the upload completes.
• Once the upload completes, run hs project open to view the project in HubSpot.

hs project open

​

Test the function

• <domain>: any domain connected to the account. For example, if both website.com and subdomain.brand.com are connected to the account, you could call the function using https://website.com/hs/serverless/<path> or https://subdomain.brand.com/hs/serverless/<path>.
• <path>: the value of config.endpoint.path in the function’s *-hsmeta.json file.

curl https://<domain>/hs/serverless/fetch-quote

​

Invoke the function from a website page

• In your local environment, create a new directory to contain your page template, outside of this tutorial’s project directory. Page templates are uploaded to the design manager, not as part of the project.
• In the terminal, navigate into that directory using the cd command.

cd Documents/Dev/serverless-page

• Run the command below to create a page template named serverless-template.

hs cms template create serverless-template --template-type page-template

• Open the new serverless-template.html file in your editor, then replace the boilerplate code with the code below. The template calls the function with a relative URL (/hs/serverless/fetch-quote), so the request goes to the same domain as the page, whichever domain that is.

<!--
    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 a quote with the 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 the returned data to the "data-container" element -->
    <script>
      const dataButton = document.getElementById('data-button');
      const dataContainer = document.getElementById('data-container');

      dataButton.addEventListener('click', function (e) {
        // Show loading state
        dataContainer.innerText = 'Loading...';

        // A relative URL calls the function on the page's own domain
        fetch('/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) => {
            // Clear the container
            dataContainer.innerText = '';

            // Create the paragraph element
            const newDataElement = document.createElement('p');
            newDataElement.innerText = `"${data.q}" — ${data.a}`;
            dataContainer.appendChild(newDataElement);
          })
          .catch((error) => {
            console.error(error);
            dataContainer.innerText = 'Something went wrong. Try again.';
          });
      });
    </script>
  </body>
</html>

• Save the file, then upload it to the design manager:

hs cms upload serverless-template.html serverless-template.html

• Navigate to the website pages dashboard of your HubSpot account by running hs open website-pages.

hs open website-pages

• In your browser, click Create in the upper right to create a new page.
• In the dialog box, select a domain to use, then assign a Page name.
• Click Create page.
• On the template selection screen, search for your new template. You can use the label or the file name to search for the template (for example, “Serverless function example template”). The template appears under Other templates, as it’s not part of a theme.

• Click Select template.
• In the page editor, click Preview in the upper right.

• Click Open in a new tab.

​

Next steps

• Authenticate requests to HubSpot APIs with the app’s built-in access token, or to other authenticated APIs with secrets.
• Move the button and JavaScript into a module rather than hard-coding them in the page template. This makes the function easier to reuse, since you can add the module to any page. To do so, create a module, then add the HTML to the module’s module.html file and the JavaScript to its module.js file.

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

const dataButton = document.getElementById('data-button');
const dataContainer = document.getElementById('data-container');

dataButton.addEventListener('click', function (e) {
  dataContainer.innerText = 'Loading...';

  // A relative URL calls the function on the page's own domain
  fetch('/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) => {
      // Clear the container
      dataContainer.innerText = '';

      // Create the paragraph element
      const newDataElement = document.createElement('p');
      newDataElement.innerText = `"${data.q}" — ${data.a}`;
      dataContainer.appendChild(newDataElement);
    })
    .catch((error) => {
      console.error(error);
      dataContainer.innerText = 'Something went wrong. Try again.';
    });
});

• Review the serverless functions reference for the full function configuration, the context object, and limits.