Commencer avec le développement local

La CLI HubSpot (Command Line Interface) connecte votre workflow local à HubSpot, vous permettant d'utiliser le contrôle de version, votre éditeur de texte préféré et diverses technologies de développement Web lors du développement 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.

La CLI de HubSpot est utilisée pour charger, récupérer et surveiller les fichiers du système de fichiers développeur. Développer avec la CLI signifie que vous aurez des copies locales de vos ressources.  Comme vous avez le code localement, vous pouvez utiliser votre éditeur de code préféré, vous pouvez utiliser des outils de développement, vous pouvez envoyer votre code dans un dépôt git.

En outre, la CLI dispose de fonctionnalités d'aide qui peuvent accélérer votre développement. Par exemple, la commande hs create vous permet de créer rapidement différents types de ressources en local, des modules jusqu'à la création d'un thème à partir du boilerplate.

Dans ce guide, nous aborderons l'installation de l'interface CLI, ainsi que les principales fonctionnalités de l'interface CLI : récupération d'un projet depuis votre compte HubSpot, puis le chargement des modifications dans vos outils de conception.

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

Pour utiliser les outils en local, vous devrez :

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

Remarque : 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 .

Exécutez hs init pour connecter les outils à votre compte HubSpot. Cette commande vous guidera dans la procédure pas à pas :

1. Tout d'abord, vous serez guidé dans la création d'une clé d'accès CMS personnelle afin de permettre un accès authentifié à votre compte via les outils de développement locaux. Vous serez invité à appuyer sur « Entrée » lorsque vous serez prêt à ouvrir la page Clé d'accès CMS personnelle dans votre navigateur par défaut. Cette page vous permettra de consulter ou de générer votre clé d'accès personnelle, si nécessaire. (Remarque : Vous devez sélectionner au moins l'autorisation « Gestionnaire de conception » pour terminer ce tutoriel.) Copiez votre clé d'accès et collez-la dans le terminal.
2. Ensuite, vous devez saisir un nom pour le compte. Ce nom n'est vu et utilisé que par vous. Par exemple, vous pouvez utiliser « sandbox » si vous utilisez un développeur sandbox, ou « company.com » si vous utilisez un compte client complet. Ce nom ne doit contenir aucun espace. Ce nom sera utilisé lors de l'exécution des commandes.

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 :

Lors de l'exécution des commandes, name ou portalId peuvent être utilisés dans l'option --account= (par ex. : --account=123 et --account=sandbox interagiront tous les deux avec l'ID de compte 123 selon l'exemple ci-dessus). Si vous définissez un defaultPortal de haut niveau, vous pouvez exclure l'option --account= de vos commandes, les commandes feront référence au portail HubSpot par défaut.

En utilisant la commande fetch , exécutez hs fetch --account=<name> <src> <dest> pour obtenir une arborescence complète de dossiers et des fichiers du projet depuis votre compte HubSpot dans votre environnement local. Le champ src est le chemin d'accès au projet dans vos outils de conception HubSpot, et le champ dest est le chemin d'accès au répertoire local dans lequel vous souhaitez mettre les fichiers, par rapport à votre répertoire de travail actuel. Pour récupérer le projet dans votre répertoire de travail actuel, vous pouvez omettre l'argument <dest> .

Voici un exemple de récupération d'un projet à partir de votre compte HubSpot :

Voici le projet Outils de conception que nous avons adapté à notre environnement local :

En utilisant la commande upload , exécutez hs upload --account=<name> <src> <dest> pour charger le projet depuis votre environnement local vers votre compte HubSpot. Ceci copiera le contenu de <src> et le chargera sur votre compte HubSpot dans le  <dest>. Si vous créez un nouveau projet dans vos outils de conception,  <dest> peut être un nouveau dossier net dans HubSpot.

Voici un exemple de chargement de l'exemple de projet dans votre compte HubSpot :

Exécutez  hs watch --account=<name> <src> <dest> pour surveiller votre répertoire local et charger automatiquement les changements sur votre compte HubSpot lors des sauvegardes de fichiers.

Voici un exemple d'exécution de cette commande avec la commande watch  :

Pour une documentation complète sur la CLI de HubSpot, consultez la documentation de référence. 

• Créer un workflow de développement efficace
• Configurer une intégration continue avec GitHub
• Premiers pas avec les modules personnalisés
• Premiers pas avec les thèmes
• Démarrer avec les zones de glisser-déposer