Dernière modification : 12 septembre 2025
‘Créez votre première fonction sans serveur sur le CMS Hub et obtenez une réponse à partir de celle-ci.’; Les fonctions sans serveur permettent d’exécuter du code JavaScript via HubSpot côté serveur, évitant ainsi toute exposition au client. Cela peut être particulièrement important pour effectuer des requêtes d’API contenant des informations sensibles, telles qu’une clé d’API ou d’autres informations d’identification. Lorsque la fonction est appelée, HubSpot l’exécute sur son back-end, ce qui signifie également que vous n’avez pas besoin de fournir vos propres serveurs back-end pour effectuer des requêtes pour votre site web sur le CMS Hub. Les fonctions sans serveur de HubSpot utilisent l’environnement d’exécution NodeJS. Dans ce guide, vous allez découvrir comment créer une fonction sans serveur simple qui récupère un devis auprès d’un service tiers, puis affiche ce devis sur une page de site web. Pour créer et déployer la fonction sans serveur sur votre compte, vous utiliserez un projet développeur HubSpot. Pour un aperçu de haut niveau des fonctions sans serveur, consultez la présentation des fonctions sans serveur. Vous pouvez également consulter la chaîne YouTube des développeurs HubSpot pour découvrir comment utiliser des fonctions sans serveur dans un projet CMS.

​
Conditions préalables

Avant de commencer ce tutoriel, vous aurez besoin des éléments suivants :

​
1. Créer un projet local

Commencez par créer un projet localement afin de pouvoir le générer et le déployer sur votre compte.
  • Dans le terminal, accédez au répertoire dans lequel vous stockerez votre projet à l’aide de la commande cd.
cd Documents/Dev/serverless-function-project
  • Exécutez hs project create pour créer un nouveau projet.
hs project create
  • Suivez les invites du terminal pour créer votre projet. Pour le modèle, sélectionnez Créer un projet vide (pas de modèle).
Option d'invite de terminal pour créer un projet vide sans modèle
  • Accédez au nouveau répertoire du projet à l’aide de la commande cd. Par exemple, si vous avez nommé votre projet mon nouveau projet :
cd my-new-project

​
2. Ajouter une fonction sans serveur au projet

Une fois votre projet créé, ouvrez-le dans l’éditeur de votre choix, tel que VS Code. HubSpot aura automatiquement créé un répertoire de projet avec un répertoire src vide et un fichier de configuration hsproject.json. Pour ajouter une fonction sans serveur au projet, créez un répertoire app dans le répertoire src, puis ajoutez-y les répertoires et fichiers suivants :
  • app/app.json : le fichier de configuration de l’application.
  • app/app.functions : le répertoire des fonctions sans serveur. Vous pouvez utiliser le nom de votre choix, tant qu’il se termine par .functions.
  • app/app.functions/function.js : le code JavaScript qui sera exécuté lors de l’appel de la fonction.
  • app/app.functions/serverless.json : le fichier de configuration de la fonction sans serveur.
  • app/app.functions/package.json : inclut les dépendances nécessaires.
Structure du projet après l'ajout des fichiers et dossiers ci-dessus au répertoire du projet
  • Copiez l’exemple de code ci-dessous dans vos fichiers locaux respectifs app.json, function.js, serverless.json et package.json. Sous chaque bloc de code .json, vous trouverez également un tableau contenant les définitions des champs.
{
  "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
}
ChampTypeDescription
nameChaîneLe nom de l’application, qui s’affichera dans l’interface utilisateur de HubSpot.
descriptionChaîneLa description de l’application, qui s’affichera dans l’interface utilisateur de HubSpot.
scopesTableauLes domaines auxquels l’application a accès pour authentifier les requêtes avec le jeton d’accès de l’application privée. Les deux domaines ci-dessus sont les domaines minimum requis. Aucun domaine supplémentaire n’est ajouté pour ce tutoriel, car vous n’aurez pas besoin d’utiliser le jeton d’accès de l’application privée pour la requête que vous effectuerez.
uidChaîneL’identifiant unique de l’application. Il peut s’agir de n’importe quelle chaîne, mais doit permettre d’identifier l’application de manière significative l’application. HubSpot identifiera l’application par cet ID afin que vous puissiez modifier le name de l’application localement ou dans HubSpot sans supprimer les données historiques ou d’état, telles que les journaux.
publicChaîneDéfini sur false pour les applications privées.
  • Après avoir ajouté le code ci-dessus, enregistrez vos modifications.

​
3. Charger le projet sur HubSpot

Une fois vos modifications enregistrées, vous pouvez maintenant charger le projet sur HubSpot pour créer et déployer l’application et la fonction sans serveur.
  • Dans le terminal, exécutez hs project upload.
hs project upload
  • Confirmez que vous souhaitez créer le projet dans le compte. Vous n’aurez pas besoin de le confirmer une fois la création initiale terminée. Le terminal affichera l’état actuel des étapes de création et de déploiement au fur et à mesure de leur progression.
  • Une fois le chargement terminé, exécutez hs project open pour afficher le projet dans HubSpot.
hs project open
Dans HubSpot, vous pouvez afficher les détails du projet, créer et déployer des journaux, des journaux de fonctions sans serveur ou encore gérer le projet et l’application. En savoir plus sur la gestion de projets dans HubSpot.

​
4. Tester la fonction

Une fois la fonction sans serveur déployée, vous pouvez l’invoquer en accédant à son URL publique. Les fonctions sans serveur créées avec des projets développeur ont la structure d’URL publique suivante : https://<domain>/hs/serverless/<endpoint-path-from-config>.
  • <domain> : vous pouvez utiliser n’importe quel domaine connecté au compte. Par exemple, si siteweb.com et sous-domaine.brand.com sont tous deux connectés au compte, vous pouvez appeler la fonction en utilisant https://website.com/hs/serverless/<path> ou https://subdomain.brand.com/hs/serverless/<path>.
  • <endpoint-path-from-config> : la valeur dans le champ path dans serverless.json.
Sur la base de l’exemple de code fourni dans ce tutoriel, l’URL publique pour appeler la fonction sera : https://<domain>/hs/serverless/fetch-quote. Pour afficher le résultat de la fonction, accédez à cette URL dans votre navigateur, en remplaçant le domaine par l’un de vos domaines hébergés par HubSpot. Si vous n’avez pas connecté de domaine personnalisé, vous pouvez utiliser l’un des domaines par défaut fournis par HubSpot : <hubId>.hs-sites.com (par exemple, 123456.hs-sites.com). Votre navigateur devrait afficher les données renvoyées par l’API Zen Quotes. Navigateur affichant les données renvoyées par l'API Zen Quotes

​
5. Appeler la fonction depuis une page de site web

Maintenant que vous avez créé la fonction sans serveur et confirmé qu’elle renvoie des données, implémentez-la dans une page pour voir les données renvoyées dans un contexte plus réaliste. Pour ce tutoriel, vous allez créer un modèle de page contenant du code JavaScript et HTML personnalisés pour exécuter la fonction et afficher les données de réponse. Tout d’abord, créez un nouveau modèle de page :
  • Dans votre environnement local, créez un nouveau répertoire pour contenir votre modèle de page. Pour les besoins de ce tutoriel, créez ce répertoire en dehors du répertoire de projet créé par hs project create.
  • Dans le terminal, accédez à ce répertoire à l’aide de la commande cd. 
cd Documents/Dev/serverless-page
  • Exécutez hs create template "serverless-template" pour créer un nouveau modèle nommé serverless-template.
hs create template "serverless-template"
  • Sélectionnez le type de modèle de page.
  • Ouvrez le fichier de modèle de page que vous venez de créer dans votre éditeur, puis remplacez le code du boilerplate par le code ci-dessous. Veillez à remplacer <domain> dans la fonction l’URL de point de terminaison (fetch('http://<domain>/hs/serverless/fetch-quote')) par un domaine connecté à votre compte 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>
  • Enregistrez le fichier, puis exécutez hs upload pour le charger dans HubSpot. Suivez les invites du terminal pour sélectionner la source locale et le chemin de destination. Pour ce didacticiel, appuyez simplement sur Entrée pour chaque requête afin d’utiliser les chemins par défaut.
Ensuite, créez une nouvelle page à partir du modèle dans HubSpot.
  • Accédez au tableau de bord des pages du site web de votre compte HubSpot en exécutant la commande hs open website-pages.
hs open website-pages
  • Dans votre navigateur, cliquez sur Créer dans l’angle supérieur droit pour créer une nouvelle page.
  • Dans la boîte de dialogue, sélectionnez un domaine à utiliser, puis attribuez un nom de page. Le domaine de la page devra correspondre au domaine que vous utilisez pour appeler la fonction sans serveur afin d’éviter les erreurs d’origine croisée (CORS). Vous pouvez sélectionner ce domaine dans le menu déroulant ou mettre à jour l’URL du point de terminaison dans le code de modèle de page (fetch('http://<domain>/hs/serverless/fetch-quote')) pour utiliser le domaine que vous sélectionnez lors de cette étape.
  • Cliquez sur Créer une page.
  • Sur l’écran de sélection de modèle, recherchez votre nouveau modèle. Vous pouvez utiliser le libellé ou le nom de fichier pour rechercher le modèle (par exemple, « Page d’exemple de fonction sans serveur »). Le modèle apparaîtra dans Autres modèles, car il ne fait pas partie d’un thème.
Section Autres modèles montrant le modèle de page nouvellement créé
  • Cliquez sur Sélectionner un modèle.
  • Dans l’éditeur de page, cliquez sur Aperçu dans l’angle supérieur droit.
Bouton d'aperçu de l'éditeur de page
  • Cliquez sur Ouvrir dans un nouvel onglet.
Dans le nouvel onglet, vous devriez désormais pouvoir cliquer sur le bouton pour récupérer et afficher des devis. Exemple de bouton qui récupère et affiche des devis à partir de l'API Zen Quotes

​
Étapes suivantes

Maintenant que vous avez créé et implémenté une fonction sans serveur qui interagit avec une API tierce, il existe plusieurs façons de continuer à développer votre utilisation des fonctions sans serveur, telles que :
  • Inclure l’authentification dans une requête pour effectuer des appels aux API de HubSpot ou à d’autres API authentifiées par des tiers.
  • Implémenter le bouton et le code JavaScript dans un module plutôt que de les coder en dur dans le modèle de page. Cela vous donnerait une option plus portable, permettant à la fonction d’être appelée à partir de n’importe quelle page à laquelle le module est ajouté. Pour ce faire, vous devez créer un module, puis ajouter le HTML dans le fichier module.html du module et le JavaScript dans le fichier 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>