Série SPFx : Créer votre premier WebPart

Dans les articles précédents de cette série, nous avons posé les bases pour créer des solutions avec le SharePoint Framework (SPFx). Depuis la configuration de l’environnement de développement jusqu’à la compréhension des outils et technologies essentiels comme npm, TypeScript, React, SCSS et Fluent UI, vous êtes maintenant prêt à plonger dans la partie amusante — créer votre premier WebPart !

Les WebParts sont les blocs de construction des expériences SharePoint modernes, permettant aux développeurs de créer des composants personnalisés et réutilisables qui améliorent la productivité et l’engagement des utilisateurs. Dans cet article, nous vous guiderons pas à pas dans la création de votre tout premier WebPart SPFx.

Commencer

Prêt à mettre la main à la pâte ? Ouvrez votre invite de commandes (ou PowerShell, les deux fonctionnent parfaitement pour ce processus), naviguez vers le dossier où vous souhaitez que votre solution SPFx réside, et commençons !

Une fois dans le bon répertoire, il est temps de créer le squelette de votre solution SPFx. Exécutez la commande suivante :

yo @microsoft/sharepoint

Votre terminal devrait ressembler à quelque chose comme ceci :

Lorsque vous exécutez le générateur Yeoman avec la commande yo @microsoft/sharepoint, il vous guidera à travers une série d’invites pour configurer votre projet SPFx. Voici un exemple des questions que vous rencontrerez et les réponses utilisées pour ce tutoriel.

? What is your solution name? SPFxWebpart
? Which type of client-side component to create? WebPart
  Add new Web part to solution 'sp-fx-webpart'. (This is an informational message confirming your choice.)
? What is your Web part name? HelloWorld
? Which template would you like to use?
  Minimal
  No framework
❯ React

Une fois que vous avez répondu à toutes les invites, le générateur Yeoman commencera à configurer votre projet SPFx. Cela inclut le téléchargement et l’installation de tous les modules Node.js nécessaires à votre solution.

Attention : Ce processus peut prendre quelques minutes, selon votre connexion internet et les performances de votre système. Ne vous inquiétez pas si cela semble bloquer un moment — laissez-le simplement se terminer. Vous verrez des messages de progression dans votre invite de commandes ou PowerShell au fur et à mesure que les dépendances sont installées.

Lorsque le processus de configuration est terminé, vous aurez une solution SPFx entièrement initialisée et votre terminal devrait ressembler à quelque chose comme ceci :

Ouvrir votre solution

Avec votre solution SPFx maintenant configurée, il est temps de l’ouvrir et de commencer à explorer les fichiers et dossiers. Vous pouvez utiliser n’importe quel IDE ou éditeur de code de votre choix, mais Visual Studio Code est fortement recommandé pour le développement SPFx en raison de son riche écosystème d’extensions et de son intégration transparente avec TypeScript et React.

Si vous utilisez Visual Studio Code, vous pouvez ouvrir la solution directement depuis la ligne de commande en tapant :

code .

Cette commande lance Visual Studio Code et charge votre projet dans le dossier actuel. Si vous utilisez un éditeur différent, ouvrez-le et naviguez vers le dossier où réside votre solution.

Une fois votre projet ouvert, vous remarquerez une structure bien organisée avec des dossiers pour vos fichiers source, la configuration et les dépendances. Dans le prochain article de blog, nous examinerons de plus près la structure du projet et expliquerons à quoi sert chaque partie.

Déployer votre WebPart SPFx

Maintenant que votre solution SPFx est prête, explorons comment la déployer. Le déploiement dans SPFx peut être effectué dans deux scénarios principaux :

• Déploiement de test : Pour les tests locaux ou la validation dans un environnement de développement.
• Déploiement en production : Pour une utilisation réelle dans l’environnement SharePoint de votre organisation.

Déploiement de test

Pour tester votre WebPart SPFx, vous pouvez utiliser le SharePoint Workbench, qui vous permet de prévisualiser et d’interagir avec votre WebPart dans un environnement simulé. Voici comment procéder :

Servir le projet localement

Ouvrez votre terminal dans le dossier du projet et exécutez (L’ouverture de votre terminal dans Visual Studio Code peut être effectuée avec CTRL + %) :

gulp serve

Vous pouvez voir le terminal en bas de la capture d’écran ci-dessous où j’ai tapé gulp serve avant d’appuyer sur Entrée.

Cela construira votre projet, démarrera un serveur local et ouvrira le SharePoint Workbench dans votre navigateur (si vous travaillez sur un site SharePoint Online).

Note : L’URL du Workbench ressemble généralement à ceci :

https://{tenantdomain}/_layouts/workbench.aspx

Remplacez {tenantdomain} par le domaine réel de votre tenant SharePoint.

Tester votre WebPart

Ajoutez votre WebPart depuis la boîte à outils sur le canevas du Workbench. Vous pouvez tester sa fonctionnalité, apporter des ajustements et voir instantanément les changements au fur et à mesure que vous mettez à jour votre code.

Vous pouvez trouver votre WebPart dans la catégorie Local en cliquant sur le signe + dans votre Workbench local :

Si tout s’est bien passé, vous devriez voir votre WebPart comme sur l’image ci-dessous. Vous pouvez maintenant commencer à apporter des modifications et les tester localement avant de les déployer en production.

Déploiement en production

Lorsque votre WebPart est prêt pour une utilisation réelle, vous devez le packager et le déployer dans votre environnement SharePoint. Suivez ces étapes :

• Construire la solution pour la production Exécutez la commande suivante pour créer un bundle prêt pour la production :

gulp bundle --ship
gulp package-solution --ship

Ces commandes optimisent votre code et créent un package déployable dans le dossier sharepoint/solution.

• Charger le package dans le catalogue d’applications

Naviguez vers le site du catalogue d’applications SharePoint.

• Chargez le fichier .sppkg trouvé dans le dossier sharepoint/solution.

• Confirmez l’invite pour rendre le WebPart disponible sur vos sites.

• Ajouter le WebPart à un site

Une fois déployé, le WebPart sera disponible dans la collection de sites où il est installé. Vous pouvez l’ajouter aux pages via la boîte à outils de WebPart.

Avec ces étapes, vous êtes prêt à déployer et utiliser votre WebPart SPFx dans les environnements de développement et de production.