Série SPFx : Préparer un environnement de développement

Dans cet article de blog, nous expliquons tout ce dont vous avez besoin pour développer des composants SharePoint Framework. Bien que le SharePoint Framework fonctionne avec des outils locaux, les éléments suivants doivent être installés globalement (sur l’ensemble de votre système).

Environnement de développement intégré

Un environnement de développement intégré (IDE) est une application logicielle qui aide les développeurs de logiciels à créer des logiciels. Un IDE fournit un certain nombre d’outils pour écrire, tester, déboguer et déployer des logiciels, et intègre ces outils dans une interface facile à utiliser.

Un IDE comprend souvent les fonctionnalités suivantes :

• Éditeur de code : un éditeur de texte qui vous permet d’écrire et de modifier du code.
• Compilateur ou interpréteur : un programme qui convertit ou exécute le code en code machine.
• Débogueur : un outil pour détecter et corriger les erreurs dans le code.
• Construction et gestion de projet : des outils pour construire et organiser le logiciel.
• Intégration avec les systèmes de contrôle de version : tels que Git ou SVN
• Navigation dans le code et autocomplétion : des outils pour naviguer rapidement dans le code et écrire rapidement.

Vous êtes libre d’utiliser n’importe quel IDE, aucun IDE n’est lié au développement de composants SharePoint Framework. L’une des possibilités est d’utiliser l’IDE gratuit Visual Studio Code. Vous pouvez le télécharger via https://code.visualstudio.com

Node.JS

Node.js est un framework JavaScript open-source utilisé pour exécuter des scripts côté serveur. Il est construit sur le moteur JavaScript V8 de Google Chrome et fournit un environnement JavaScript pour le serveur. Cela permet d’utiliser JavaScript pour des tâches back-end telles que la création d’un serveur HTTP, la connexion à une base de données et l’exécution de calculs. Node.js dispose également d’une bibliothèque standard étendue et d’un grand nombre de modules disponibles via npm, le gestionnaire de paquets Node.js, qui aident les développeurs à créer des applications web rapidement.

Node.js se compose de 2 versions :

• Support à long terme (LTS)
• Version actuelle

Le SharePoint Framework ne prend en charge que les versions LTS.

Pour vérifier si votre node.js est déjà installé, vous pouvez exécuter la commande suivante depuis votre ligne de commande :

    node –-version

Si node.js n’est pas encore installé dans votre environnement, vous pouvez le télécharger depuis : https://nodejs.org/en/download

npm

Node Package Manager (NPM) est un gestionnaire de paquets pour le langage de programmation JavaScript. Il est installé par défaut avec Node.js et est utilisé pour installer, gérer et exécuter des modules JavaScript.

Avec npm, vous pouvez facilement installer des bibliothèques et des modules externes qui complètent vos projets JavaScript avec de nouvelles fonctionnalités. Ces modules sont stockés dans un référentiel central appelé npm registry. Cela vous permet d’utiliser les modules dans vos propres projets sans avoir à écrire le code vous-même.

Npm fonctionne via l’interface en ligne de commande (CLI) et vous permet d’exécuter diverses commandes telles que l’installation de paquets, la mise à niveau ou la désinstallation de paquets, l’affichage des versions des paquets, etc.

Lorsque vous installez un paquet, les fichiers associés sont stockés dans un dossier appelé node_modules dans votre dossier de projet. Vous pouvez ensuite importer ces modules dans vos fichiers JavaScript via la syntaxe import ou require.

Npm est un outil puissant pour les développeurs JavaScript, car il leur permet d’accéder rapidement et facilement à un grand nombre de modules et bibliothèques open-source, réduisant leur temps de développement et augmentant leur productivité.

nvm

Le SharePoint Framework dispose de nombreuses versions qui se succèdent rapidement. Lorsque vous développez intensément sur une longue période, vous pouvez développer différents composants avec différentes versions de SPFx. Pour gérer cela, nous recommandons l’utilisation de NVM.

NVM (Node Version Manager) est un outil de ligne de commande que vous pouvez utiliser pour installer et gérer différentes versions de Node.js sur votre ordinateur. C’est utile si vos projets dépendent de versions spécifiques de Node.js ou si vous souhaitez tester la dernière version de Node.js sans perturber vos paramètres existants.

Avec NVM, vous pouvez installer plusieurs versions de Node.js et passer facilement d’une version à l’autre. Par exemple, vous pouvez utiliser une version plus ancienne pour un projet plus ancien et une version plus récente pour un nouveau projet.

L’utilisation de NVM est également utile pour les développeurs qui souhaitent travailler avec différentes versions de Node.js sur un serveur ou dans une machine virtuelle. C’est important car certains modules ne fonctionnent qu’avec des versions spécifiques de Node.js.

NVM est disponible pour Windows, macOS et Linux. Vous pouvez installer NVM en suivant les instructions d’installation sur la page GitHub du projet. (https://github.com/coreybutler/nvm-windows) Une fois installé, vous pouvez installer et gérer différentes versions de Node.js avec des commandes telles que :

• NVM install {numéro de version node} : pour installer une version de node.js
• NVM List : pour afficher les versions de node.js installées.
• NVM use {numéro de version node} : pour passer à une version spécifique de node.js et l’utiliser.

Astuce : Vous pouvez installer les 3 outils suivants avec la commande suivante :

    npm install gulp-cli yo @microsoft/generator-sharepoint –-global

Gulp

Gulp est un exécuteur de tâches ou un outil d’automatisation des tâches, que vous pouvez utiliser pour automatiser les tâches qui surviennent souvent lors du développement d’un site web ou d’une application web. Ces tâches peuvent inclure la minification des fichiers CSS et JavaScript, la conversion de Sass en CSS, l’optimisation des images et l’exécution de tests.

Au lieu d’effectuer ces tâches manuellement, vous pouvez les automatiser avec Gulp. Vous définissez les tâches dans un gulpfile (un fichier JavaScript) et les exécutez ensuite avec une commande dans l’interface de ligne de commande.

Gulp utilise un modèle de pipeline dans lequel les tâches sont exécutées dans l’ordre de leur définition. Par exemple, vous pouvez d’abord exécuter une tâche pour minifier les fichiers CSS, suivie d’une tâche pour déployer ces fichiers dans un environnement de production.

L’un des avantages de Gulp est qu’il est basé sur le code plutôt que sur la configuration. Cela le rend facile à lire et à comprendre pour les développeurs, et offre la flexibilité de créer des tâches personnalisées. Gulp utilise également Node.js, vous pouvez donc utiliser le même langage pour le backend et le frontend de votre projet.

En conjonction avec d’autres outils tels que npm et webpack, vous pouvez utiliser Gulp pour créer un flux de travail efficace et automatisé pour vos projets de développement web.

    npm install gulp-cli –global

Webpack

Webpack est un module bundler pour les applications JavaScript. Il aide à fusionner divers modules JavaScript, ainsi que leurs dépendances, en un seul fichier (ou plusieurs fichiers) afin qu’il puisse être facilement chargé par un navigateur web.

Webpack utilise un fichier de configuration appelé webpack.config.js, dans lequel vous pouvez spécifier les paramètres pour le regroupement. Cela spécifie quels fichiers doivent être traités, quels plugins doivent être utilisés et quelle sortie doit être générée.

Webpack prend également en charge l’utilisation de loaders, qui sont de petits programmes pouvant gérer des types de fichiers spécifiques, tels que Sass en CSS, TypeScript en JavaScript, et les images en URL de données. Cela permet d’utiliser une plus large gamme de types de fichiers dans votre projet.

Webpack est également efficace pour détecter les dépendances entre les modules et réduit donc le nombre de fichiers qui doivent être chargés par le navigateur, ce qui entraîne un temps de chargement de page plus rapide. Webpack est un choix populaire parmi les développeurs, car il offre une solution flexible et puissante pour regrouper les modules JavaScript et réduire la taille du bundle JavaScript. Il peut être utilisé conjointement avec d’autres outils tels que npm et Gulp pour un flux de travail de développement web efficace et automatisé.

Yeoman

Yeoman est un outil de ligne de commande open source que vous pouvez utiliser pour créer rapidement et efficacement des applications web. Il vous aide à automatiser la configuration d’un nouveau projet, notamment la création de la structure de dossiers, l’installation des dépendances et la configuration des outils de build.

Yeoman fonctionne avec des « générateurs » qui fournissent des templates et des configurations spécifiques pour différents types d’applications web. Plusieurs générateurs sont disponibles pour différents frameworks et bibliothèques, tels qu’AngularJS, React, Vue.js, Express, etc.

En utilisant Yeoman, vous pouvez rapidement mettre en place une structure de travail pour votre projet, et vous pouvez consacrer votre temps au développement de la fonctionnalité unique de votre application.

Yeoman vous permet également de créer de nouveaux générateurs, vous permettant de mettre en place la structure qui répond aux exigences spécifiques de votre projet.

En conjonction avec d’autres outils tels que npm et webpack, vous pouvez créer un flux de travail efficace et automatisé pour vos projets de développement web, vous permettant de configurer une application fonctionnelle plus rapidement et de concentrer votre temps sur les aspects uniques de votre projet.

    npm install yo --global

@microsoft/generator-sharepoint

@microsoft/generator-sharepoint est un générateur Yeoman créé par Microsoft pour créer des solutions SharePoint à l’aide du SharePoint Framework (SPFx). Il vous aide à mettre en place rapidement un nouveau projet SPFx avec une structure de projet préconfigurée et un ensemble de dépendances communes.

Ce générateur fournit un certain nombre de templates et d’options pour créer différents types de solutions SharePoint, tels que :

• WebParts
• Extensions
• Composants bibliothèques.

Il comprend également des fonctionnalités supplémentaires telles que la prise en charge de la construction et du déploiement de vos solutions à l’aide d’Azure DevOps et l’intégration avec Office 365 CLI pour la gestion des ressources SharePoint.

Il est important de noter que ce générateur n’est pas la seule option disponible pour créer des solutions SPFx, mais c’est une bonne alternative si vous souhaitez utiliser un outil de Microsoft et tirer le meilleur parti du SharePoint Framework et de ses dernières fonctionnalités.

    npm install @microsoft/generator-sharepoint --global

Faire confiance au certificat de développeur auto-signé

Le serveur web on-premise du SharePoint Framework, utilisé lors du test de vos solutions personnalisées depuis votre environnement de développement, utilise HTTPS par défaut. Cela est implémenté à l’aide d’un certificat SSL signé par les développeurs eux-mêmes. Les certificats SSL auto-signés ne sont pas approuvés par votre environnement de développement. Vous devez d’abord configurer votre environnement de développement pour faire confiance au certificat.

Chaque projet SharePoint Framework inclut une tâche utilitaire sous la forme d’une tâche Gulp. Vous pouvez choisir de le faire maintenant ou d’attendre d’avoir créé votre premier projet.

Après la création d’un projet à l’aide du générateur Yeoman pour le SharePoint Framework, exécutez la commande suivante depuis la racine du projet.

    gulp trust-dev-cert