Maintenant que les APIs pour faciliter ALM avec le SharePoint Framework (SPFx) et les addins sont disponibles, nous pouvons envisager une chaîne de build / release sereinement. Cette série de billets va vous présenter la mise en place dans Visual Studio Online de la gestion des builds et des releases pour les applications réalisées à l'aide du SPFx. Et voici le menu :

1. Mise en place d'une build dans Visual Studio Online pour les applications SPFx
2. Mise en place d'une release dans VSO pour les applications SPFx
3. Scénarios et paramétrage avancés

Je proposerai aussi sans doute plus tard la même chose pour les addins "provider hosted".

Introduction

Avant d'aller plus loin, je vous conseille de prendre connaissance de la documentation sur cette API : https://dev.office.com/blogs/alm-apis-for-sharepoint-framework-solutions-and-add-ins.

Voici les points importants à retenir :

• Une API REST permet de gérer l'ajout et la publication des addins et apps SPFx dans le catalogue du tenant, puis de déployer ou retirer ceux-ci sur le site de votre choix
  
• Un wrapper est disponible via le projet PnP PowerShell (https://github.com/SharePoint/PnP-PowerShell et https://msdn.microsoft.com/en-us/pnp_powershell/pnp-powershell-overview pour plus d'infos), ce qui nous sera d'autant plus utile pour scripter notre chaîne d'intégration continue. Ce module ajoute de nombreuses commandes supplémentaires aux existantes, en se basant notamment sur le CSOM.

Enfin, si vous n'avez encore jamais sauté le pas pour créer votre première application avec le SPFx, sachez qu'il y a un tutoriel disponible sur https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/build-a-hello-world-extension. Dans cet article, nous ciblons une instance SharePoint Online puisqu'actuellement les API ne sont supportées que dans cet environnement (en espérant prochainement l'arrivée On-Premise).

Fonctionnement de la build

Dans cette build, nous allons à la fois générer les fichiers, la solution (le fichier sppkg), déployer les fichiers dans un blob Azure et recopier la solution dans un drop folder pour la release. Nous allons simplement nous appuyer sur les tâches Gulp disponibles avec le SPFx pour cette première partie, puis, dans le prochain billet nous nous occuperons d'utiliser la nouvelle API ALM pour déployer l'application dans un site SharePoint.

Tout ceci permettra par exemple de disposer d'une chaîne d'intégration continue pour avoir un environnement de test toujours à jour, ou tout simplement pour publier à la demande plus facilement (et proprement) vos projets.

Création de la définition de build

Pour commencer, créez une définition vide, sélectionnez votre repo / projet et ajouter les tâches suivantes : 

• npm
• gulp (x3)
• publish artifact

Pour la première tâche, on va donc installer tous les packages nécessaires à la build avec un simple "npm install"

Ensuite, on va générer tous nos assets (a minima vos fichiers javascript) via un simple appel à Gulp avec le paramètre --ship pour que les fichiers soient minifiées et présents dans le bon répertoire pour le déploiement (temp\deploy).

On génère ensuite la solution avec la 2ème tâche Gulp et le paramètre "package-solution", toujours avec le flag --ship

 On va déployer ensuite nos fichiers dans Azure via la tâche Gulp "deploy-azure-storage". On part du principe que son paramétrage est déjà présent dans les fichiers de config (deploy-azure-storage.json et write-manifests.json), mais j'expliquerai comment le faire via la build dans le 3ème article.

Et pour finir, on va publier notre package dans les artefacts pour le récupérer dans la release, ce qui nous permettra de choisir ensuite où déployer l'application. Le chemin utilisé correspond au répertoire de sortie de la tâche "package-solution", le reste des fichiers ne nous intéressant pas.

Il n'y a plus qu'à lancer la build et vérifier que tout fonctionne et que notre package se trouve bien dans les artefacts :

Maintenant que votre build est prête, la prochaine étape sera de gérer la partie déploiement via Release Management dans le prochain article.

Bonne build !