Configuration de votre environnement de d?veloppement SharePoint Framework

  • Article

Vous pouvez utiliser n’importe quel éditeur de texte pour générer des solutions SharePoint Framework (SPFx). Vous pouvez également utiliser un environnement macOS, Windows ou Linux.

Remarque

Avant de suivre la procédure décrite dans cet article, il est important de configurer votre client Microsoft 365.

Vous pouvez également suivre ces étapes en regardant cette vidéo sur la chaîne YouTube de Microsoft 365 Platform Community (PnP) :

Importante

Les étapes suivantes présument que vous créez des solutions pour Microsoft Office SharePoint Online à l’aide de la dernière version de SharePoint Framework. Si vous créez des solutions pour SharePoint Server 2019 ou SharePoint Server 2016, référez-vous à la documentation supplémentaire citée dans la section Voir aussi ci-dessous.

Installer Node.js.

Installez la version LTS la plus récente de Node.js v16.

Cette version est la version de Node.js actuellement recommandée pour être utilisée avec le SharePoint Framework (sauf indication contraire ci-dessous).

Importante

Node.js est fréquemment mis à jour et disponible sur plusieurs plateformes, notamment macOS, Windows et Linux. Puisque les liens de téléchargement exacts changent fréquemment, ils ne sont pas liés à cette page. Utilisez plutôt les informations ci-dessous pour déterminer le programme d'installation à télécharger pour votre plate-forme.

N’oubliez pas que Node.js conserve en permanence deux versions différentes : LTS & Version actuelle. Le SharePoint Framework n'est pris en charge que sur les versions LTS. Pour plus d’informations sur les versions de support à long terme (LTS) de Node.js, consultez : versionsNode.js>.

Conseil

Le site web Node.js recommande toujours le dernier programme d’installation pour les deux versions actuelles de LTS & . Pour télécharger des versions spécifiques de Node.js versions, utilisez la page Node.js > Téléchargements > versions précédentes .

  • Les utilisateurs Windows peuvent utiliser les programmes d’installation *.msi pour x86 ou x64 en fonction de votre installation Windows. Il n’y a généralement que deux fichiers *.msi disponibles avec des noms similaires à node-v{version-number}-x[86|64].msi.
  • Les utilisateurs macOS peuvent utiliser le programme d’installation *.pkg qui est généralement nommé node-v{version-number}.pkg.

Vous pouvez vérifier si vous avez déjà Node.js installé, y compris la version installée, en exécutant la commande suivante :

node --version

La SharePoint Framework v1.16.0 est prise en charge sur les versions Node.js suivantes :

  • Node.js v16 LTS (v16.13.x - v16.18.x, alias : Gallium)

Attention

Si vous créez des composants SharePoint Framework pour des déploiements SharePoint locaux, référez-vous aux pages supplémentaires répertoriées dans la section Voir aussi pour obtenir plus d’informations.

Installer un éditeur de code

Vous pouvez utiliser n’importe quel éditeur de code ou IDE qui prend en charge le développement côté client pour créer votre composant WebPart, par exemple :

Les étapes et les exemples fournis dans cette documentation utilisent Visual Studio Code, mais vous pouvez utiliser l’éditeur de votre choix.

Installer les prérequis pour la chaîne d’outils de développement

La chaîne d’outils de développement et de création de SharePoint Framework s’appuie sur divers outils open source populaires. Bien que la plupart des dépendances soient incluses dans chaque projet, vous devez installer quelques dépendances sur votre poste de travail.

Conseil

Vous pouvez installer les trois outils suivants en une seule ligne :

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

Installer Gulp

Gulp est un exécuteur de tâches basé sur JavaScript utilisé pour automatiser les tâches répétitives. La chaîne de compilation de SharePoint Framework utilise des tâches Gulp pour créer des projets et des ensembles JavaScript. Elle utilise également les packages obtenus, utilisés pour déployer des solutions.

Entrez la commande suivante pour installer l’interface CLI Gulp :

npm install gulp-cli --global

Installer Yeoman

Yeoman vous permet de lancer de nouveaux projets, et vous fournit des pratiques recommandées et des outils pour vous aider à rester productif. Les outils de développement côté client de SharePoint incluent un générateur Yeoman permettant de créer des composants WebPart. Le générateur fournit des outils de création, du code réutilisable et un site web d’essai vous permettant d’héberger des composants WebPart pour les tester.

Importante

Yeoman v4.x est requis par spFx v1.13.

Entrez la commande suivante pour installer Yeoman :

npm install yo --global

Installation du générateur Yeoman SharePoint

Le générateur de composants WebPart Yeoman de SharePoint vous permet de créer rapidement un projet de solution côté client SharePoint avec la chaîne d’outils et la structure appropriées.

Pour installer le générateur Yeoman de SharePoint Framework globalement, saisissez la commande suivante :

npm install @microsoft/generator-sharepoint --global

Pour plus d’informations sur le générateur SharePoint Yeoman, voir Générateur Yeoman pour le SharePoint Framework.

Installer un navigateur web moderne

Vous devez utiliser un navigateur web moderne, tel que Microsoft Edge, Google Chrome ou Firefox, comme navigateur de développement.

Approuver le certificat de développement auto-signé

Le serveur web local de SharePoint Framework, utilisé lors du test de vos solutions personnalisées à partir de votre environnement de développement, utilise HTTPS par défaut. Sa mise en œuvre passe par un certificat SSL de développement auto-signé. 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 de manière à approuver le certificat.

Une tâche utilitaire est incluse dans chaque projet SharePoint Framework sous forme de tâche Gulp. Vous pouvez l’effectuer dès à présent ou attendre d’avoir créé votre premier projet, comme décrit dans le didacticiel Créer votre premier composant WebPart côté client SharePoint (Hello World 1re partie).

Après avoir créé un projet avec le générateur Yeoman pour SharePoint Framework, exécutez la commande suivante à partir du dossier racine du projet.

gulp trust-dev-cert

Remarque

Cela suppose l’installation de toutes les dépendances avec npm install après avoir créé le projet. Cette étape installe toutes les tâches Gulp dans le cadre d’un projet.

Outils facultatifs

Les outils suivants peuvent également être utiles :

Étapes suivantes

Vous êtes maintenant prêt à créer votre premier composant WebPart côté client.

SPFx & SharePoint Server (local)

SpFx est disponible sur SharePoint Online (SPO), SharePoint Server 2019, & SharePoint Server 2016. Les instructions de configuration sur cette page présument que vous créez des solutions à l’aide de la dernière version de SPFx pour Microsoft Office SharePoint Online.

Microsoft Office SharePoint Online contient toutes les versions de SPFx, notamment toutes les versions précédentes et la dernière version. Chaque solution SPFx contient des informations pour indiquer à Microsoft Office SharePoint Online le runtime SPFx dont il dépend.

Si vous créez des solutions pour un déploiement SharePoint Server local, examinez la section Voir aussi pour obtenir des détails sur des versions SharePoint spécifiques. Chaque SharePoint local prend uniquement en charge une version SPFx spécifique. Ceci peut présenter des configurations compliquées d’environnement de développement si vous créez plusieurs solutions pour des déploiements SharePoint différents.

  • SharePoint Server 2016 utilise SharePoint Framework (SPFx) version 1.1.
  • SharePoint Server 2019 utilise SharePoint Framework (SPFx) version 1.4.1.

En fonction de votre scénario, vous devrez maintenir plus environnements de développement. Les développeurs ont utilisé les approches suivantes pour aborder ces défis :

  • Machines virtuelles
  • Docker
  • Node Version Manager (NVM)

Conseil

Pour plus d’informations sur NVM, consultez Better Node.js Install Management with Node Version Manager.

Résolution des problèmes

Vérifier la version des paquets installés globalement

Pour obtenir une liste de tous les paquets installés globalement, exécutez la commande suivante :

npm list --global --depth=0️

Impossible de faire confiance au certificat de développement auto-signé

Si vous rencontrez des difficultés pour approuver votre certificat auto-signé lorsque vous exécutez gulp trust-dev-cert& , vous avez vérifié que les versions correctes de toutes les dépendances sont installées, une solution que nous voyons généralement résoudre le problème consiste à désinstaller tous les packages globalement installés, désinstaller Node.js, redémarrer & .

Dans certains cas, l'exécution de la commande gulp trust-dev-cert , n'a pas l'effet escompté de faire confiance au certificat de développement auto-signé sur votre machine. Dans de rares cas comme celui-ci, vous devrez peut-être supprimer un dossier caché généré dans votre dossier de profil.

Recherchez & le dossier {{homedir}}/.gcb-serve-data pour SPFx version antérieure à v1.12.1. Pour les versions ultérieures, supprimez le dossier {{homedir}}/.rushstack puis réessayez d’approuver le certificat de développement auto-signé. Sinon, l’exécution gulp untrust-dev-cert aura le même effet pour supprimer les fichiers de certificat du dossier de profil.

Si le certificat n’est pas ajouté à l’autorité de certification racine approuvée malgré l’exécution gulp trust-dev-cert en raison de certaines stratégies bloquant l’action, le fichier rushstack-serve.pem du dossier {{homedir}}/.rushstack peut être importé manuellement dans le Gestionnaire de certificats sous Autorité de certification racine approuvée avec un compte d’administrateur local.

Impossible d’installer des packages avec NPM - Proxys d’entreprise

Si votre environnement de développement se trouve derrière un proxy d’entreprise, vous devez configurer NPM de manière à utiliser ce proxy. Reportez-vous aux documents npm config pour savoir comment configurer votre environnement de développement derrière un proxy d’entreprise, et plus particulièrement les paramètres proxy&proxy http. Plus d’informations : Configurer NPM pour un proxy web d'entreprise

Voir aussi