Commencer avec le développement local

Last updated:

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 la CLI. Si vous êtes complètement novice dans le développement de HubSpot CMS Hub, nous vous conseillons de :

Quick start to CMS Hub development

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.

Installer les dépendances

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 .

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 votre projet local. Par exemple, exécutez mkdir local-cms-dev dans la ligne de commande, ce qui créera un répertoire. Ensuite, exécutez cd local-cms-dev pour atteindre ce répertoire.

2. Configurer les outils de développement local

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 :

defaultPortal: sandbox portals: - name: sandbox portalId: 345 authType: personalaccesskey personalAccessKey: >- xxxxxxxxx-xxxxxxx-xxxxxxx-xxxxxxx-xxxxxxxx auth: tokenInfo: accessToken: >- xxxxxxxxx-xxxxxxx-xxxxxxx-xxxxxxx-xxxxxxxx expiresAt: '2020-02-24T19:38:39.164Z'

hubspot.config.yml prend en charge plusieurs entrées de portail HubSpot. La façon la plus simple d'ajouter des portails supplémentaires après avoir déjà un hubspot.config.yml est d'utiliser hs auth.

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.

3. Récupérer un projet depuis votre compte

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 :

hs fetch cms-project

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

projet local et gestionnaire de conception

4. Effectuez les modifications et chargez-les sur votre compte HubSpot

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 :

hs upload cms-project cms-project

5. Consultez votre projet local et chargez automatiquement les modifications

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  :

hs watch cms-project cms-project

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

Tutoriels et ressources associés


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