Créer un workflow de développement efficace

La mise en place d'un workflow efficace pour les développeurs vous aidera à travailler plus efficacement lors de la création de sites web sur HubSpot CMS. Selon la nature de votre équipe de développement web, ou la nature d'un projet spécifique, votre workflow peut différer. 

Par exemple, un développeur unique qui crée un nouveau site dans un nouveau compte HubSpot CMS doit moins se soucier des tests et de la collaboration. D'autre part, une équipe de développeurs travaillant sur un site web plus important aura besoin d'un processus de développement et de mise en place plus clair, d'un workflow de déploiement, et d'un code vivant dans le contrôle de source afin de travailler efficacement.

Ce guide est conçu pour vous aider à mettre en place un workflow efficace pour les développeurs, que vous pouvez adapter à vos besoins.

Ce guide suppose que vous créez des sites web à l'aide de CMS CLI. Suivez le tutoriel Démarrage avec le développement local pour commencer. Ce guide suppose également que vous avez parcouru le guide de démarrage rapide du développement sur HubSpot CMS.

Avant de commencer à mettre en place notre workflow de développeur, il est important de reconnaître la portabilité comme un concept clé pour avoir un workflow de développeur efficace. La portabilité de votre projet garantit qu'il est facile de passer d'un environnement à l'autre avec peu de frictions et d'explications, ce qui permet de tester et de mettre en scène les changements avant de les mettre en ligne. 

Le Boilerplate du thème CMS est un exemple de projet portable, qui utilise des fonctionnalités telles que les chemins de fichiers relatifs et le format de fichier réel pour toutes les ressources du projet à l'aide de CMS CLI, ce qui lui permet de vivre dans le contrôle source et de fonctionner dans n'importe quel compte HubSpot. Ce projet est un excellent point de départ ou de référence pour les développeurs travaillant sur un nouveau projet. Tous les thèmes par défaut de HubSpot sont créés à partir de ce boilerplate et peuvent également être utilisés comme point de départ portable et efficace.

Pour votre environnement de développement individuel, chaque développeur de votre équipe doit créer un compte Sandbox pour développeur CMS gratuit. Ces comptes n'expirent jamais et disposent de toutes les fonctionnalités des comptes payants HubSpot CMS (sauf la possibilité de connecter des domaines personnalisés). 

Le CMS CLI permet d'interagir facilement avec plusieurs comptes HubSpot CMS. Créez une nouvelle saisie de configuration pour votre compte Sandbox pour développeur CMS. Définissez le nom de la saisie de votre sandbox comme étant du type « DEV » ou « SANDBOX » afin qu'il soit clair que ce compte est un environnement de développement. En outre, définissez le defaultPortal comme étant votre compte sandbox, de sorte que lorsque vous exécutez des commandes à l'aide du CMS CLI, il interagira automatiquement avec votre sandbox, et réduira les déploiements de production accidentels. À ce stade, votre fichier de configuration ressemblera à quelque chose comme ceci :

Maintenant, lorsque vous exécutez des commandes dans le CMS CLI, comme hs upload si vous n'indiquez pas de portail, les fichiers seront téléchargés sur votre compte « DEV ».

Bien qu'il existe une extension officielle VS Code, il n'y a aucune raison pour que vous ne puissiez pas utiliser un autre éditeur préféré.  HubL est le dérivé privé de HubSpot pour Jinjava, qui est basé sur Jinja. En raison des similitudes syntaxiques, les extensions de la mise en valeur syntaxique Jinja fonctionnent relativement bien. Les extensions et les outils complémentaires varient selon l'éditeur.

Lorsque vous travaillez dans votre environnement de développement, il est prudent d'utiliser la commande consulter pour télécharger automatiquement les modifications lorsque vous enregistrez des fichiers dans votre éditeur de texte pour développer rapidement. Si vous utilisez l'outil « Aperçu en direct avec options d'affichage » du gestionnaire de conception pour un modèle, lorsque vous enregistrez les modifications, elles sont automatiquement reflétées dans le rendu de l'aperçu du modèle. Pour afficher l'aperçu en direct d'un modèle, sélectionnez Aperçu > Aperçu en linge avec les options d'affichage dans l'éditeur de modèle du gestionnaire de conception. 

Un autre élément essentiel de la phase de développement consiste à tester vos modifications dans les outils de création de contenu. Si vous créez des modules ou des modèles destinés à être manipulés dans l'éditeur de contenu, créez des pages dans votre environnement de développement pour vous assurer que l'expérience d'édition de contenu est conforme à vos attentes. Faites glisser les modules dans des configurations bizarres et saisissez du contenu factice pour vous assurer que l'équipe marketing ne peut pas « casser » vos modules lorsqu'ils créent des pages. L'utilisation des éditeurs de contenu vous aidera à illustrer les principes fondateurs que vous souhaitez intégrer dans vos modèles et modules. Actuellement, il n'est pas possible de déplacer du contenu, tel que des pages ou des articles de blog, entre les comptes HubSpot.

Dans l'éditeur de module du gestionnaire de conception, sélectionnez le bouton « Aperçu ». Il ouvrira un éditeur d'aperçu de la façon dont le module et ses champs se comporteront dans les éditeurs de contenu. Ce qui vous permet de tester les champs, les groupes et les répéteurs de votre module avec un contenu factice dans un environnement sûr.

Savoir comment déboguer et résoudre les problèmes de votre site web est essentiel à la santé et au succès de votre site. Familiarisez-vous avec les techniques de débogage lors du développement sur le HubSpot CMS.

Comme indiqué ci-dessus dans la rubrique sur la configuration de votre environnement de développement, vous pouvez créer des comptes gratuits Sandbox pour les développeurs CMS à utiliser pour les tests et comme environnement de développement sûr.

Une fois que vous avez testé vos modifications et que vous êtes prêt à les mettre en ligne, il est temps de déployer vos modifications sur votre portail de production. En fonction de votre configuration locale, vous devrez exécuter la commande Sandbox pour les développeurs CMS avec l'argument --portal pour interagir avec votre compte de production, comme hs upload my-theme/src my-theme --portal=PROD. Lorsque vous téléchargez des fichiers vers votre compte de production, faites attention s'il y a eu des erreurs à diagnostiquer, et assurez-vous de parcourir brièvement votre site web en ligne pour vous assurer qu'il n'y a pas eu de conséquences involontaires du déploiement. 

Si vous travaillez au sein d'une équipe de développement web, il est recommandé d'avoir l'ensemble du centre unique d'informations de votre base de code de production dans le contrôle de version, et de le déployer sur votre portail de produit lorsque les changements sont fusionnés dans référence. Ainsi, votre équipe de développeurs peut utiliser votre système de contrôle de version préféré pour collaborer, suivre les modifications et annuler facilement les modifications. 

Pour en savoir plus sur la mise en place de l'intégration continue avec les référentiels git, suivez ce guide sur l' utilisation des actions GitHub pour déployer vers votre compte de production lorsque des modifications sont fusionnées dans référence.