How to use serverless functions in HubSpot: A step-by-step guide

With the change in time, we see a lot of advancement in technologies. Every company creates new technology by keeping the future in mind. One of the futuristic approaches in web development that we are going to discuss today is serverless functions.

Do you ever face issues with the server hosting your site? Well, as your site grows, you'll need to spend more and more time maintaining, managing, or updating your server to make sure that your site runs smoothly. And this, of course, will consume a lot of time and effort as well.

But imagine someone else doing that for you and managing the operational infrastructure of your site? Isn't that nice that you can now focus solely on writing your code? That's where Serverless Functions come into play!

Today, I will walk you through the various aspects of Serverless Functions and how you can easily create Serverless functions on HubSpot CMS.

What are Serverless Functions?

Serverless functions enable you to write server-side code that interacts with HubSpot and third-party services through APIs, thus supporting your website's highly personalized and intelligent components.

Serverless functions are used to execute the backend code by cloud service providers. This service is inbuilt in HubSpot. One of the main perks of using Serverless Functions in HubSpot is that developers do not need to buy any server space for their webpages to execute backend code. 

The all new HubSpot CMS provides all necessary APIs to store data in HubDB, with which Serverless Functions can be used to store data. In HubSpot, serverless functions are executed in node.js (which means we will use node.js to write the backend code).

Well, honestly, I had my fair share of hiccups while creating my first serverless function. That's why I decided to write this article to help all the HubSpot enthusiasts out there. So let's get started.

Why Use Serverless Functions?

• Serverless Functions make the deployment of new code faster, simpler, and easy to automate.
• Serverless Functions also significantly decrease the probability of downtime during deployment. 
• Serverless functions enhance the performance of your application and improve the end-user experience.
• Going serverless can prove to be really cost-effective since most platforms offer a pay-as-you-go model. So you only pay for what resources you use.
• Serverless Functions demand less overhead and are thus easier to scale as the business grows.

How to Create Serverless Functions?

We can create and execute serverless code in a few simple steps.

• Firstly, go to design tools.

• Click on the file and create a functions folder.

• In this folder, we will create a serverless.json file and congrats.js file. Serverless.json file will store the endpoints, and congrats .js will contain the actual backend code to be executed.

• Serverless.json file will be used to store all the endpoints of serverless functions.

• We will change this default congrats.js code to your simple code to get started.
• Replace the congrats.js file code with this simple code.

  // your code will be called when the function is executed

 var functions =  "Congrats! You've just deployed a Serverless Function.";    sendResponse({body: functions, statusCode: 200});  

 };

• Now we will create an HTML template to call our serverless functions in the webpage.

• We will add script code to call the serverless function.

   <script>       

    var requestOptions = {

     'method': 'GET',

     'headers': {

      'Content-Type': 'application/json',

     }

     };

   fetch("your portal url/_hcms/api/endpoint", requestOptions)

   .then(response => response.text())

   .then(result => console.log(result))

   .catch(error => console.log('error', error));

   </script>

• Copy the above code and replace the "your portal URL" with your actual URL and "endpoint" with "congrats" because we have defined the congrats endpoint in our serverless.json file.

• You can get your default portal URL by following the below-mentioned steps.

   Go to Settings>Websites>Domain URLs.

   Select Language settings.

   Choose any one default URL of your portal.

• Your serverless function has been created successfully. You can now check it by hitting the URL in the browser as shown below screenshot or using the sample.html template on the web page.

Time to See the Result

We can also use a sample HTML template on the web page to show the result.

• Goto Marketing>Websites>Website Pages.

• Click on create and select the website page option.
• Go to “all of your templates” option and then search the sample template that we have to create earlier and select it.

• After selecting the template, add the internal page name. It could be any.

• Now go to settings, add the title of the page and select the same URL used in the sample template. After that, click on the publish button.

• Now, open the page.

• You see the output by clicking ctrl+shift+i together and open the console window of the browser.

Watch this video to learn how you can set-up your Serverless Functions in HubSpot.

Points to Keep in Mind

1) Serverless functions are designed to be fast and have a narrow focus. That speed empowers them to be perfect companions to the front-end of websites and applications, supporting a quick call and response. However, HubSpot serverless functions are restricted to:

• 50 secrets per account
• 128MB of memory
• Not more than 100 endpoints per HubSpot account
• You have to use contentType application/JSON while calling a function.

2) Execution limits

• Every function has a maximum of 10 seconds of execution time
• Every account is confined to 600 total execution seconds per minute.

3) This means either of these two scenarios can occur within 1 minute:

• Up to 60 function executions take 10 seconds each to perform.
• Up to 6,000 function executions take 100 milliseconds to perform.

Functions that exceed these limits will yield an error. As a result, execution count and time limits will return a 429 response. You can find the execution time of each function in the serverless function logs.

Wrapping Up

That's it, folks! Now you know how to create a serverless function in HubSpot. You can also set up a local environment for HubSpot serverless functions.

If you have any queries or are still facing problems in implementing the serverless functions, do get in touch with us.

Editor: Richa Sharma