Commencer avec le développement local

Last updated:

L'interface de ligne de commande (ILC) de HubSpot connecte votre environnement local à HubSpot, ce qui signifie que vous aurez des copies locales de vos ressources web HubSpot. Cela vous permet d'utiliser le contrôle des versions, votre éditeur de texte favori et diverses technologies de développement web sur CMS Hub. 

Ce guide s'adresse aux personnes qui se sont déjà familiarisées avec le CMS, mais qui veulent apprendre à travailler avec l'ILC. Si vous êtes complètement novice dans le développement du CMS Hub de HubSpot, nous vous conseillons de consulter le guide de démarrage rapide.

Quick start to CMS Hub development

Dans ce tutoriel, vous découvrirez :

  • comment installer l'ILC et la connecter à votre compte HubSpot ;
  • comment récupérer un module à partir de votre compte HubSpot ;
  • comment mettre à jour le module localement, puis télécharger vos modifications ;
  • comment utiliser la commande watch pour continuer à télécharger les modifications enregistrées.

Pour plus de commandes et de formats de fichiers locaux, consultez la référence sur les outils de développement local.

Installer les dépendances

Pour développer sur HubSpot localement, vous devrez :

  1. Installer Node.js, un environnement d'exécution JavaScript qui permet d'utiliser les outils locaux. Les versions 16 ou supérieures de Node sont prises en charge, mais nous recommandons la version LTS (long-term support).
  2. Exécuter npm install -g @hubspot/cli dans votre ligne de commande pour installer l'ILC de HubSpot de manière globale. Pour installer les outils dans votre répertoire actuel uniquement, exécutez npm install @hubspot/cli.

Si vous préférez, vous pouvez également utiliser Yarn. Homebrew n'est pas nécessaire, mais recommandé pour faciliter l'installation. Si vous utilisez Yarn, les commandes sont exécutées avec le préfixe yarn .

Un message d'erreur EACCES s'affiche lors de l'installation ? 
Voir NPM Résolution des erreurs de permissions EACCESS lors de l'installation globale de packages.

1. Créer un répertoire de travail

Créez un dossier pour le travail que vous effectuerez ci-dessous. Pour les besoins de ce tutoriel, nommez le dossier local-dev-tutorial.

Vous pouvez le faire localement en exécutant mkdir local-dev-tutorial dans la ligne de commande, ce qui créera le répertoire. Ensuite, exécutez cd tutoriel-dev-local pour accéder à ce répertoire.

2. Configurer les outils de développement local

Puis, exécutez hs init pour connecter les outils à votre compte HubSpot. Cette commande vous guidera à travers les étapes ci-dessous.

  • Pour connecter l'ILC à un compte HubSpot, vous devez copier la clé d'accès personnelle du compte. Lorsque vous y êtes invité, appuyez sur Entrée pour ouvrir hubspot.com sur la page de clé d'accès personnelle du compte. Si vous avez plusieurs comptes, vous serez invité dans le navigateur à sélectionner un compte.
  • Sur la page des clés d'accès personnelles, vous pouvez générer une nouvelle clé d'accès personnelle ou copier la valeur de clé existante si elle existe déjà.
    • Si vous créez une clé pour la première fois, sélectionnez les domaines auxquels la clé a accès. Vous devrez sélectionner au moins Gestionnaire de conception pour interagir avec les outils de conception du compte. 
    • Après avoir sélectionné les autorisations de la clé, cliquez sur Générer une clé d'accès personnelle.
  • Une fois que la clé a été générée, copiez sa valeur en cliquant d'abord sur Afficher sous la clé, puis sur Copier.
  • Collez la clé dans la ligne de commande, puis appuyez sur Entrée.
  • Ensuite, saisissez un nom pour le compte. Ce nom sera vu et utilisé uniquement par vous lors de l'exécution des commandes. Par exemple, vous pouvez utiliser « sandbox » si vous utilisez un développeur sandbox ou « entreprise.com » si vous utilisez un compte client complet. Ce nom ne doit contenir aucun espace. 
  • Appuyez sur Entrée. 

Une fois que vous avez terminé ce flux simple init, un message s'affiche confirmant qu'un fichier de configuration, hubspot.config.yml, a été créé avec succès dans votre répertoire actuel.

Votre  hubspot.config.yml ressemblera à peu près à ceci :

defaultPortal: mainProd portals: - name: mainProd portalId: 123456 defaultMode: publish authType: personalaccesskey auth: tokenInfo: accessToken: >- {accessTokenValue} expiresAt: '2023-06-27T19:45:58.557Z' personalAccessKey: >- {personalAccessKeyValue} sandboxAccountType: null parentAccountId: null
Use this table to describe parameters / fields
NomDescription
defaultPortal
Facultatif

Le compte avec lequel vous interagissez par défaut lors de l'exécution des commandes d'ILC.

Pour interagir avec un compte authentifié qui n'est pas défini par défaut, vous pouvez ajouter un indicateur --account= à la commande, suivi du nom ou de l'ID du compte. Par exemple, --account=12345 ou --account=mainProd.

name
Facultatif

Sous portals, vous trouverez une entrée pour chaque compte connecté. name spécifie le nom du compte. Vous pouvez utiliser ce nom lors de la définition d'un nouveau compte par défaut ou de la spécification d'un compte avec l'indicateur --account.

portalId
Obligatoire

L'ID du compte.

defaultMode
Facultatif

Lors du téléchargement vers le compte, il définit l'état par défaut pour charger le contenu. Il peut s'agir de draft ou de publish.

authType
Obligatoire

La forme d'authentification utilisée pour authentifier le compte. 

sandboxAccountType
Facultatif

Si le compte est un compte sandbox, indique l'ID du compte de production parent.

parentAccountId
Facultatif

parentAccountId

Le fichier hubspot.config.yml prend en charge plusieurs comptes. Pour authentifier plus de comptes, exécutez hs auth et suivez les instructions.

3. Créer une ressource à récupérer dans HubSpot

Dans le cadre de ce tutoriel, vous allez d'abord créer une nouvelle ressource dans HubSpot afin de pouvoir la récupérer dans votre environnement local à l'aide de l'interface de ligne de commande. 

  • Dans votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception. Cela ouvrira le gestionnaire de conception, où vous pouvez accéder aux fichiers que vous téléchargez à l'aide de l'interface de ligne de commande. Cette arborescence de fichiers et de dossiers est également appelée le système de fichiers du développeur.
  • Dans la barre latérale gauche du gestionnaire de conception, sélectionnez le dossier @hubspot pour afficher les ressources par défaut de HubSpot, telles que les thèmes et les modules.
    design-manager-hubspot-folder
  • Dans la barre latérale gauche, faites défiler vers le bas et cliquez avec le bouton droit sur l'icône du module, puis sélectionnez Cloner le module. Le module sera cloné à la racine du système de fichiers du développeur et votre nouvelle copie de module sera ouverte à droite.
    default-icon-module-cloned
  • En haut de la barre latérale gauche, cliquez sur Actions, puis sélectionnez Copier le chemin. Cela copiera le chemin relatif vers le module dans le système de fichiers du développeur, que vous utiliserez à l'étape suivante pour récupérer le module localement. 
    module-actions-copy-path

4. Récupérer le module dans votre environnement local

Une fois le module cloné, vous allez maintenant utiliser la commande fetch pour l'introduire dans votre environnement local.

Dans le terminal, exécutez hs fetch '/icon copy.module'.

hs fetch '/icon copy.module'
Le module sera téléchargé sous la forme d'un répertoire contenant cinq fichiers :
  • fields.json : contient le code des différents champs du module. Dans ce cas, cela inclut le champ d'icône, deux champs d'option d'accessibilité et un ensemble de champs de style. Vous pouvez voir ces champs dans la barre latérale droite de l'éditeur de module dans HubSpot.
  • meta.json : contient les informations de base du module, telles que son libellé, son ID et les types de modèles dans lesquels il peut être utilisé. Ces informations seront affichées dans la barre latérale droite de l'éditeur de module.
  • module.css : contient le CSS du module, que vous pouvez également voir dans le volet CSS de l'éditeur de module dans HubSpot. 
  • module.html : contient le code HTML du module, que vous pouvez également voir dans le volet HubL + HTML de l'éditeur de module dans HubSpot.
  • module.js : contient le code JavaScript du module, que vous pouvez également voir dans le volet JS de l'éditeur de module dans HubSpot.
    module-directory-local
Ensuite, vous allez mettre à jour le fichier meta.json du module, puis le télécharger sur votre compte et afficher la modification dans HubSpot.

5. Apporter des modifications et télécharger

Tout d'abord, apportez une modification au module :

  • Dans votre éditeur de code préféré, ouvrez le fichier meta.json du module.
    module-meta-json-file-open
  • Remplacez le champ label "Icon" par "CMS tutorial module". Puis, enregistrez le fichier.
    module-meta-json-file-label-updated
Avant d'exécuter la commande suivante, hs upload, décomposons la commande et les arguments qu'elle prend. Cette commande prend deux arguments : hs upload <src> <dest>
  • src : le chemin relatif du dossier source que vous téléchargez depuis votre environnement local.
  • dest : le chemin du répertoire de destination dans HubSpot, local vers la racine du système de fichiers du développeur. Vous pouvez créer un nouveau répertoire dans le compte en spécifiant le nom du répertoire, tel que hs upload<src>/new-directory.
  • Dans cet esprit, puisque vous téléchargez vers la racine du système de fichiers du développeur, exécutez la commande suivante :
hs upload 'icon copy.module' 'icon copy.module'
  • Une fois que l'ILC a confirmé que le module a été téléchargé avec succès, actualisez le gestionnaire de conception pour afficher votre modification dans HubSpot. Vous devriez maintenant voir que le champ Libellé affiche votre nouvelle valeur.
module-label-updated

6. Exécuter une commande watch pour télécharger automatiquement les modifications

Maintenant que vous avez utilisé la commande upload pour exécuter un téléchargement unique de vos fichiers locaux, vous allez maintenant utiliser la commande watch pour télécharger en continu les modifications enregistrées. Cette commande prend les mêmes arguments que upload, vous pouvez donc spécifier les mêmes éléments <src> et <dest> que ci-dessus.

  • Exécutez hs watch 'icon copy.module' 'icon copy.module'.
hs watch 'icon copy.module' 'icon copy.module'

Lorsque la commande watch est exécutée, les modifications enregistrées sont automatiquement téléchargées sur le compte HubSpot. À titre de démonstration, apportez les modifications locales suivantes au module :

  • Dans le fichier meta.json, mettez à jour le champ host_template_types pour supprimer "BLOG_LISTING" et "BLOG_POST" afin que le module ne soit disponible que pour les pages :

    "host_template_types" :["PAGE"]
  • Puis, enregistrez le fichier. Ainsi, l'ILC téléchargera automatiquement le fichier sur HubSpot.
  • Une fois le fichier téléchargé, actualisez le gestionnaire de conception dans HubSpot pour afficher votre modification. La section Types de modèles de la barre latérale droite ne doit désormais inclure que Page.
module-editor-template-type
  • Pour mettre fin à la commande watch, appuyez sur Control + C. Il est important de noter que vous ne pourrez pas exécuter d'autres commandes dans la même fenêtre de terminal que celle dans laquelle la commande watch est en cours d'exécution. Pour exécuter d'autres commandes pendant l'exécution de watch, vous devez plutôt ouvrir une autre fenêtre de terminal et y exécuter vos commandes.

Étapes suivantes

Maintenant que vous avez découvert comment utiliser les commandes fetch, upload et watch, vous pouvez consulter le guide de référence complet des commandes d'ILC pour découvrir les autres possibilités de l'ILC.

Il est également recommandé de consulter les tutoriels suivants :

Cet article vous a-t-il été utile ?
Ce formulaire est destiné à recueillir les avis sur la documentation pour les développeurs. Si vous souhaitez faire part de votre avis sur les produits HubSpot, veuillez le partager sur le forum des idéesde la communauté.