Maintenant que nous avons d’une part créé notre site SharePoint et d’autre part configuré notre environnement de développement, il est temps de relier les deux. En suivant les étapes ci-dessous, vous serez en mesure de réellement commencer à travailler sur votre projet. Les changements dans votre code seront répercutés sur le site SharePoint.

​
Générer le package .sppkg

Dans le terminal de votre environnement de développement, exécutez les commandes suivantes :

gulp bundle
gulp package-solution

Cela va générer un fichier .sppkg dans le dossier sharepoint/solution.

Le nom du fichier généré correspond à celui indiqué dans le fichier config/package-solution.json, dans paths->zippedPackage.

​
Déployer le package sur le site SharePoint

  • Dans les contenus du site, cliquez sur “Applications pour SharePoint”.
  • Effectuez un glissez-déposer du fichier .sppkg généré précédemment.
  • Attendez quelques instants. Une modal va s’ouvrir : cliquez sur “Déployer”.

​
Activer l’application

  • Retournez dans les contenus du site.
  • En haut à gauche de la page, cliquez sur “Nouveau” puis “Application”.
  • Vous devriez voir votre application dans la liste. Cliquez sur “Ajouter”.
  • Une fois ajoutée, vous devriez voir votre application dans la liste des applications du site.

​
Relier l’application à une page SharePoint

OK, l’application est désormais ajoutée au site. Désormais, il n’y a plus qu’à l’associer à une page SharePoint.

  • Retournez dans les contenus du site.
  • Cliquez sur “Pages du site”.
  • Identifiez la page créée par System Account. Cliquez dessus pour l’ouvrir.
  • Depuis cette page, cliquez sur le bouton “Créer” en haut à gauche, puis “Page”.
  • Un panel s’ouvre. Choisissez l’onglet “Applications”. Vous retrouverez votre application dans la liste.
  • Cliquez dessus pour la sélectionner, puis cliquer sur “Créer une page” en bas à droite.

Le nom et la description indiqués dans ce panel correspondent au title et à la description du fichier <Nom de la webpart>Webpart.manifest.json.

​
Renommer et archiver la page

SharePoint crée une page avec un nom généré automatiquement et vous redirige dessus. L’application ne fonctionne pas encore à ce stade : c’est normal. Un volet à droite apparaît et vous demande des informations, vous pouvez l’ignorer.

  • Retournez dans les Contenus du site, à partir de l’icône roue crantée en haut à droite de l’écran. Si le navigateur Web vous demande une confirmation pour quitter la page, confirmez.
  • Retournez dans les Pages du site. Vous allez retrouver la page qui vient d’être créée.
  • Survolez la page avec votre souris pour faire apparaître les trois petits points à droite de la page. Cliquez dessus, puis sur Plus, puis Archiver. Une modale s’ouvre : sélectionnez Version majeure puis cliquez sur Archiver.
  • Cliquez une nouvelle fois sur les trois petits points à droite de la page, puis sur Renommer. Donnez un nom un peu plus parlant à la page, comme Local, puis cliquez sur Enregistrer.
  • Pour rendre la page accessible directement depuis l’URL “https://webexprdev.sharepoint.com/sites/<Nom du site>”, sans avoir à spécifier /SitePages/<Nom de la page>.aspx, cliquez une nouvelle fois sur les trois petits points à droite de la page, puis cliquez sur “Définir en tant que page d’accueil”.

​
Commencer à développer

Bien ! Allez maintenant sur la page que vous venez de créer. Un message en bleu apparaît encore spécifiant qu’un problème est survenu. C’est parce que l’application n’est pas lancée.

Vous devez retourner dans votre éditeur de code. Dans le terminal de votre environnement de développement, exécutez la commande suivante :

gulp serve --nobrowser

Cela va lancer un serveur local qui va écouter les modifications que vous apportez à votre code. Vous pouvez maintenant commencer à développer votre application SharePoint Framework.

Créer l'environnement de développementIntroduction