Déployer votre composant WebPart côté client sur une page SharePoint (Hello World 3e partie)Deploy your client-side web part to a SharePoint page (Hello World part 3)

Assurez-vous que vous avez effectué les procédures décrites dans les articles suivants avant de commencer :Ensure that you have completed the procedures in the following articles before you start:

Vous pouvez également suivre cette procédure en regardant la vidéo suivante sur la chaîne YouTube SharePoint PnP :You can also follow these steps by watching this video on the SharePoint PnP YouTube Channel:



Créer un package du composant WebPart HelloWorldPackage the HelloWorld web part

  1. Dans la fenêtre de la console, accédez au répertoire du projet de composant WebPart créé dans Créer votre premier composant WebPart côté client SharePoint.In the console window, go to the web part project directory created in Build your first SharePoint client-side web part.

    cd helloworld-webpart
    
  2. Si la tâche gulp serve est toujours en cours d’exécution, arrêtez-la en appuyant sur Ctrl+C.If gulp serve is still running, stop it from running by selecting ctrl+C.

Contrairement à ce que vous avez fait dans Workbench, pour pouvoir utiliser les composants WebPart côté client dans les pages SharePoint modernes côté serveur, vous devez déployer le composant WebPart et l’inscrire dans SharePoint.Unlike in the Workbench, to use client-side web parts on modern SharePoint server-side pages, you need to deploy and register the web part with SharePoint. Vous devez d’abord créer un pack pour le composant WebPart.First you need to package the web part.

  1. Ouvrez le projet de composant WebPart HelloWorldWebPart dans Visual Studio Code ou votre IDE préféré.Open the HelloWorldWebPart web part solution in Visual Studio Code, or your preferred IDE.
  2. Ouvrez package-solution.json dans le dossier config.Open package-solution.json from the config folder.

Le fichier package-solution.json définit les métadonnées de package, comme illustré dans le code suivant :The package-solution.json file defines the package metadata as shown in the following code:

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "helloworld-webpart-client-side-solution",
    "id": "3c1af394-bbf0-473c-bb7d-0798f0587cb7",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "isDomainIsolated": false
  },
  "paths": {
    "zippedPackage": "solution/helloworld-webpart.sppkg"
  }
}
  1. Dans la fenêtre de la console, entrez la commande suivante pour intégrer votre solution côté client qui contient le composant WebPart dans un package :In the console window, enter the following command to package your client-side solution that contains the web part:

    gulp package-solution
    

    La commande crée le package dans le dossier sharepoint/solution : helloworld-webpart.sppkgThe command creates the package in the sharepoint/solution folder: helloworld-webpart.sppkg

Contenu du packagePackage contents

Le package utilise la fonctionnalité SharePoint afin de créer un package pour votre composant WebPart.The package uses SharePoint Feature to package your web part. Par défaut, la tâche gulp crée une fonctionnalité pour votre composant WebPart.By default, the gulp task creates a feature for your web part.

Vous pouvez afficher le contenu brut du package dans le dossier sharepoint/debug.You can view the raw package contents in the sharepoint/debug folder.

Le contenu est ensuite mis en package dans le fichier .sppkg. Le format du package est semblable à celui des packages de compléments SharePoint et utilise les spécifications Microsoft Open Packaging Conventions pour créer le package.The contents are then packaged into an .sppkg file. The package format is very similar to a SharePoint add-ins package and uses Microsoft Open Packaging Conventions to package your solution.

Les fichiers JavaScript, CSS et autres ressources sont mis en pack lorsque l’option --ship est utilisée.The JavaScript files, CSS, and other assets are packaged inside of the package when the --ship option is used. Toutefois, dans ce cas, nous testerons d’abord le déploiement et les fonctionnalités en hébergeant les fichiers JavaScript sur l’hôte local.In this tutorial, however, we will first test deployment and capabilities by hosting JavaScript files from localhost. Pack automatisé et option d’hébergement sont expliqués dans le didacticiel suivant.Automated packaging and hosting option is explained in the next tutorial.

Notes

À partir de SharePoint Framework v1.4, les ressources statiques sont incluses par défaut dans le pack sppkg.Starting from the SharePoint Framework v1.4, static assets are by default packaged inside of the sppkg package. Lorsqu’un package est déployé dans le catalogue d’applications, les ressources sont automatiquement hébergées dans le CDN Office 365 (si activé) ou dans l’URL de catalogue d’applications.When a package is deployed in the app catalog, the assets are automatically hosted either from Office 365 CDN (if enabled) or from an app catalog URL. Vous pouvez contrôler ce comportement avec le paramètre includeClientSideAssets dans le fichier package-solution.json.You can control this behavior with the includeClientSideAssets setting in the package-solution.json file.

Déploiement du package HelloWorld sur le catalogue d’applicationsDeploy the HelloWorld package to app catalog

Vous devez ensuite déployer le package qui a été généré dans le catalogue d’applications.Next, you need to deploy the package that was generated to the app catalog.

Notes

Si vous n’avez pas de catalogue d’applications, un administrateur SharePoint Online peut en créer un en suivant les instructions de ce guide : Utilisation du catalogue d’applications pour rendre des applications métier disponibles pour votre environnement SharePoint Online.If you do not have an app catalog, a SharePoint Online Admin can create one by following the instructions in this guide: Use the App Catalog to make custom business apps available for your SharePoint Online environment.

  1. Accédez au catalogue d’applications de votre site.Go to your site's app catalog.

  2. Chargez ou faites glisser le fichier helloworld-webpart.sppkg dans le catalogue d’applications.Upload or drag and drop the helloworld-webpart.sppkg to the app catalog.

    Charger la solution dans le catalogue d’applications

    Cette action déploie le package de la solution côté client.This deploys the client-side solution package. Comme il s’agit d’une solution côté client entièrement fiable, SharePoint affiche une boîte de dialogue et vous demande d’approuver la solution côté client à déployer.Because this is a full trust client-side solution, SharePoint displays a dialog and asks you to trust the client-side solution to deploy.

    Approuver la solution côté client à déployer

  3. Sélectionnez Déployer.Select Deploy.

Vous pouvez voir si le package contient des problèmes ou des exceptions à l’aide de la colonne Message d’erreur du package d’application dans le catalogue d’applications.Notice that you can see if there's any exceptions or issues in the package by looking the App Package Error Message column in the app catalog.

Installer la solution côté client sur votre siteInstall the client-side solution on your site

  1. Accédez à votre collection de sites développeur ou collection de sites que vous voulez utiliser pour les testsGo to your developer site collection or site collection which you want to use for testing

  2. Sélectionnez l’icône représentant un engrenage sur la barre de navigation supérieure, à droite, et sélectionnez Ajouter une application pour accéder à votre page Applications.Select the gears icon on the top nav bar on the right, and then select Add an app to go to your Apps page.

  3. Dans la zone Rechercher, entrez helloworld et sélectionnez Entrée pour filtrer vos applications.In the Search box, enter helloworld, and select Enter to filter your apps.

    Ajouter l’application au site

  4. Sélectionnez l’application helloworld-webpart-client-side-solution pour l’installer sur le site.Select the helloworld-webpart-client-side-solution app to install the app on the site.

    Approuver l’application

    La solution côté client et le composant WebPart sont installés sur votre site Développeur.The client-side solution and the web part are installed on your developer site.

La page Contenu du site indique l’état de l’installation de votre solution côté client.The Site Contents page shows you the installation status of your client-side solution. Assurez-vous que l’installation est terminée avant de passer à l’étape suivante.Make sure the installation is complete before going to the next step.

Afficher un aperçu du composant WebPart sur une page SharePointPreview the web part on a SharePoint page

Maintenant que vous avez déployé et installé la solution côté client, ajoutez le composant WebPart à une page SharePoint.Now that you have deployed and installed the client-side solution, add the web part to a SharePoint page. N’oubliez pas que les ressources telles que JavaScript et CSS sont disponibles à partir de l’ordinateur local. donc l’affichage des composants WebPart échouera, sauf si votre hôte local est en cours d’exécution.Remember that resources such as JavaScript and CSS are available from the local computer, so rendering of the web parts will fail unless your localhost is running.

  1. Ouvrez <your-webpart-guid>.manifest.json à partir du dossier \dist.Open the <your-webpart-guid>.manifest.json from the \dist folder.

    Vous pouvez remarquer que la propriété internalModuleBaseUrls de l’entrée loaderConfig fait toujours référence à votre ordinateur local :Notice that the internalModuleBaseUrls property in the loaderConfig entry still refers to your local computer:

    "internalModuleBaseUrls": [
      "https://`your-local-machine-name`:4321/"
    ]
    
  2. Avantd’ajouter le composant WebPart à une page SharePoint côté serveur, exécutez le serveur local.Before adding the web part to a SharePoint server-side page, run the local server.

  3. Dans la fenêtre de la console qui comporte le répertoire du projet helloworld-webpart, exécutez la tâche Gulp pour commencer à récupérer des données à partir de l’hôte local :In the console window that has the helloworld-webpart project directory, run the gulp task to start serving from localhost:

    gulp serve --nobrowser
    

    Notes

    --nobrowser ne lance pas automatiquement l’atelier SharePoint car ce n’est pas nécessaire dans ce cas puisque nous hébergerons le composant WebPart directement dans la page SharePoint.--nobrowser will not automatically launch the SharePoint Workbench as that's not needed in this case as we will host the web part directly in SharePoint page.

Ajouter le composant WebPart HelloWorld à une page moderneAdd the HelloWorld web part to modern page

  1. Dans votre navigateur, accédez au site sur lequel vous venez d’installer la solution.In your browser, go to your site where the solution was just installed.

  2. Sélectionnez l’icône représentant un engrenage dans la barre de navigation supérieure, à droite, puis Ajouter une page.Select the gears icon in the top nav bar on the right, and then select Add a page.

  3. Modifiez la page.Edit the page.

  4. Ouvrez le sélecteur de composants WebPart et sélectionnez votre composant WebPart HelloWorld.Open the web part picker and select your HelloWorld web part.

    Notes

    Les captures d’écran proviennent d’un site qui utilise l’expérience moderne.Screenshots are from a site which is using modern experience.

Les ressources de composant WebPart sont chargées à partir de l’environnement local.The web part assets are loaded from the local environment. Pour charger les scripts hébergés sur votre ordinateur local, vous devez autoriser le navigateur à charger les scripts potentiellement dangereux.To load the scripts hosted on your local computer, you need to enable the browser to load unsafe scripts. Selon le navigateur que vous utilisez, vous devez activer le chargement de scripts non sécurisés pour cette session.Depending on the browser you are using, make sure you enable loading unsafe scripts for this session.

Vous devez voir le composant WebPart HelloWorld que vous avez créé dans l’article précédent, qui récupère des listes à partir du site actuel.You should see the HelloWorld web part you built in the previous article that retrieves lists from the current site.

Composant WebPart HelloWorld dans une page moderne

Modification des propriétés de composant WebPartEdit web part properties

  1. Sélectionnez l’icône (stylet) Configurer un élément dans le composant WebPart pour ouvrir le volet de propriétés du composant WebPart.Select the Configure element icon (pen) in the web part to open the property pane for the web part.

    Modifier le composant WebPart

    Il s’agit du même volet de propriétés que celui que vous avez construit et prévisualisé dans Workbench.This is the same property pane you built and previewed in the Workbench.

  2. Modifiez la propriété Description et entrez Les composants WebPart côté client c’est génial !Edit the Description property, and enter Client-side web parts are awesome!

    Composant WebPart HelloWorld dans une page moderne

  3. Notez que les comportements sont toujours les mêmes, avec notamment un volet réactif qui met à jour le composant WebPart au fur et à mesure que vous tapez.Notice that you still have the same behaviors such as a reactive pane where the web part is updated as you type.

  4. Sélectionnez l’icône x pour fermer le volet de propriétés côté client.Select the x icon to close the client-side property pane.

  5. Dans la barre d’outils, sélectionnez Enregistrer et fermer pour enregistrer la page.On the toolbar, select Save and close to save the page.

Étapes suivantesNext steps

Félicitations !Congratulations! Vous avez déployé un composant WebPart côté client sur une page SharePoint moderne.You have deployed a client-side web part to a modern SharePoint page.

Vous pouvez continuer à développer votre composant WebPart HelloWorld dans la rubrique suivante, Héberger un composant WebPart côté client dans un CDN Office 365, où vous allez apprendre à déployer et charger les ressources de composant WebPart à partir d’un CDN Office 365 au lieu de l’hôte local, ce qui signifie que vous préparez votre solution à l’envoi ou l’utilisation dans un environnement de production.You can continue building out your Hello World web part in the next topic Hosting client-side web part from Office 365 CDN, where you will learn how to deploy and load the web part assets from an Office 365 CDN instead of localhost, which means that you are preparing this solution for shipping or using it in production environment.

Notes

Si vous trouvez un problème dans la documentation ou dans SharePoint Framework, signalez-le aux ingénieurs SharePoint en utilisant la liste des problèmes dans le référentiel sp-dev-docs ou en ajoutant un commentaire à cet article.If you find an issue in the documentation or in the SharePoint Framework, please report that to SharePoint engineering by using the issue list at the sp-dev-docs repository or by adding a comment to this article. Nous vous remercions par avance pour vos commentaires.Thanks for your input in advance.