À la fin du guide ci-dessous, vous aurez un environnement de développement SharePoint Framework vierge connecté à un repository GitLab, prêt à être déployé sur un site SharePoint.

Prérequis :

  • Node.js
  • Yeoman
  • Yeoman SharePoint web part Generator
  • Gulp

Pour en savoir plus sur l’installation des prérequis, consulter la page de documentation Microsoft Learn “Set up your development environment”.

​
Créer un répertoire pour le projet

Créez un répertoire pour votre projet et positionnez-vous dedans. Veillez à respecter les conventions de nommage de l’entreprise.

Généralement, le nom du répertoire est de la forme <année>-<techno>-<client>-<nom du projet>.

Par exemple, pour un projet intitulé “GB IT” pour le client “BNP Paribas” réalisé en 2024, le nom du répertoire pourrait être 2024-spfx-react-bnpp-gb-it.

​
Générer l’environnement de développement avec Yeoman

Une fois positionné dans le répertoire du projet, exécutez la commande suivante pour démarrer la génération : yo @microsoft/sharepoint

Vous pouvez également utiliser l’option --skip-install : yo @microsoft/sharepoint --skip-install

Cette option permet de ne pas installer les dépendances du projet. Vous devrez alors les installer manuellement en exécutant la commande npm install par la suite.

Une série de questions vous sera posée pour configurer le projet.

  • What is your solution name? : Nom du projet. Ce nom sera celui qui apparaîtra dans le catalogue d’applications SharePoint.
  • Which type of client-side component to create? : Type de composant à créer. Ici, choisissez “WebPart”.
  • What is your Web part name? : Nom du WebPart.
  • Which template would you like to use? : Template à utiliser. Ici, choisissez “React”.

Une fois les questions répondues, Yeoman génère l’environnement de développement. Après quelques instants, vous obtenez donc l’architecture suivante dans votre répertoire :

📂 Projet
├── 📂 .vscode
│
├── 📂 config
│   ├── 📄 config.json
│   ├── 📄 deploy-azure-storage.json
│   ├── 📄 package-solution.json
│   ├── 📄 sass.json
│   ├── 📄 serve.json
│   └── 📄 write-manifests.json
│
├── 📂 node_modules (Ne sera pas créé si --skip-install est utilisé)
│   └── 📄 <dépendances>
|
├── 📂 src
│   ├── 📄 index.ts
│   └── 📂 webparts
│       └── 📂 <nom du webpart>
│           ├── 📂 assets
│           │   └── 📄 <fichiers images>
│           │
│           ├── 📂 components
│           │   ├── 📄 I<nom du webpart>Props.ts
│           │   ├── 📄 <nom du webpart>.module.scss
│           │   └── 📄 <nom du webpart>.tsx
│           │
│           ├── 📂 loc
│           │   ├── 📄 en-us.js
│           │   └── 📄 mystrings.d.ts
│           │
│           ├── 📄 <nom du webpart>WebPart.manifest.json
│           └── 📄 <nom du webpart>WebPart.ts
│
├── 📂 teams
│   └── 📄 <fichiers images>
│
├── 📄 .eslintrc.js
├── 📄 .gitignore
├── 📄 .npmignore
├── 📄 .yo-rc.json
├── 📄 gulpfile.js
├── 📄 package-lock.json
├── 📄 package.json
├── 📄 README.md
└── 📄 tsconfig.json

Bravo, vous avez créé votre environnement de développement SharePoint Framework ! Un message de félicitations s’affiche.

Le message nous invite à utiliser gulp serve, mais vous pouvez ignorer cela. Cela nous ferait travailler dans le workbench, mais chez WebepxR, nous déployons directement l’application localement pour travailler dessus. Nous verrons cela à la page suivante.

À ce stade, la prochaine étape va être de connecter notre projet à un repository sur GitLab.

​
Connecter le projet à un repository GitLab

Rendez-vous sur GitLab, et créez un nouveau projet vierge (Create blank project).

  • Project name: reprenez le nom du répertoire que vous avez créé pour le projet.
  • Project URL: veillez à inclure webexpr/sharepoint.
  • Visibility Level: l’option Private devrait être activée par défaut - laissez-la ainsi.
  • Project configuration: décochez la case Initialize repository with a README.
  • Cliquez sur Create project.

Vous arrivez alors sur une page qui vous explique les prochaines étapes à suivre.

Nous allons nous intéresser à l’option “Push an existing folder”. Copiez les lignes de commandes de cette section et faites-les s’exécuter dans le terminal.

Génial ! L’environnement de développement est désormais connecté au repository.
Créer le site SharePointRelier l'environnement de développement au site SharePoint