Publier un complément développé avec Visual Studio Code

  • Article

Cet article explique comment un complément Office que vous avez créé à l’aide du générateur Yeoman et développé avec Visual Studio Code (VS Code) ou un autre éditeur.

Remarque

Publication d’un complément pour accéder à d’autres utilisateurs

Un complément Office comprend une application Web et un fichier manifeste. L’application Web définit l’interface utilisateur et les fonctionnalités du complément, tandis que le manifeste spécifie l’emplacement de l’application Web et définit les paramètres et fonctionnalités du complément.

Pendant que vous développez, vous pouvez exécuter le complément sur votre serveur web local (localhost). Lorsque vous êtes prêt à le publier pour que d’autres utilisateurs puissent y accéder, vous devez déployer l’application web et mettre à jour le manifeste pour spécifier l’URL de l’application déployée.

Lorsque votre complément fonctionne comme vous le souhaitez, vous pouvez le publier directement via Visual Studio Code à l’aide de l’extension Stockage Azure.

Utilisation de Visual Studio Code pour publier

Remarque

Ces étapes fonctionnent uniquement pour les projets créés avec le générateur Yeoman et qui utilisent le manifeste au format XML. Elles ne s’appliquent pas si vous avez créé le complément à l’aide du Kit de ressources Teams ou si vous l’avez créé avec le générateur Yeoman et qu’il utilise le manifeste unifié pour Microsoft 365.

  1. Ouvrez votre projet à partir de son dossier racine dans Visual Studio Code (VS Code).

  2. Sélectionnez Afficher les>extensions (Ctrl+Maj+X) pour ouvrir la vue Extensions.

  3. Recherchez l’extension Stockage Azure et installez-la.

  4. Une fois installée, une icône Azure est ajoutée à la barre d’activité. Sélectionnez-la pour accéder à l’extension. Si la barre d’activité est masquée, ouvrez-la en sélectionnant Afficher> labarre d’activitéd’apparence>.

  5. Sélectionnez Se connecter à Azure pour vous connecter à votre compte Azure. Si vous n’avez pas encore de compte Azure, créez-en un en sélectionnant Créer un compte Azure. Suivez les étapes fournies pour configurer votre compte.

    Bouton Se connecter à Azure sélectionné dans l’extension Azure.

  6. Une fois que vous êtes connecté, vos comptes de stockage Azure apparaissent dans l’extension. Si vous n’avez pas encore de compte de stockage, créez-en un à l’aide de l’option Créer un compte de stockage dans la palette de commandes. Nommez votre compte de stockage un nom global unique, en utilisant uniquement « a-z » et « 0-9 ». Notez que par défaut, cela crée un compte de stockage et un groupe de ressources portant le même nom. Il place automatiquement le compte de stockage dans la région USA Ouest. Cela peut être ajusté en ligne via votre compte Azure.

    Sélectionnez Comptes de stockage > Créer un compte de stockage dans l’extension Azure.

  7. Cliquez avec le bouton droit sur votre compte de stockage et sélectionnez Configurer le site web statique. Vous serez invité à entrer le nom du document d’index et le nom du document 404. Remplacez le nom du document d’index par défaut index.html par taskpane.html. Vous pouvez également modifier le nom du document 404, mais vous n’y êtes pas obligé.

  8. Cliquez à nouveau avec le bouton droit sur votre compte de stockage, puis sélectionnez Cette fois-ci Parcourir le site web statique. Dans la fenêtre du navigateur qui s’ouvre, copiez l’URL du site web.

  9. Ouvrez le fichier manifeste de votre projet (manifest.xml) et remplacez toutes les références à votre URL localhost (par https://localhost:3000exemple) par l’URL que vous avez copiée. Ce point de terminaison est l’URL de site web statique pour votre compte de stockage nouvellement créé. Enregistrez les modifications apportées à votre fichier manifeste.

  10. Ouvrez une invite de ligne de commande ou une fenêtre de terminal et accédez au répertoire racine de votre projet de complément. Exécutez la commande suivante pour préparer tous les fichiers pour le déploiement de production.

    npm run build

    Une fois la build terminée, le dossier dist dans le répertoire racine de votre projet de complément contient les fichiers que vous allez déployer dans les étapes suivantes.

  11. Dans VS Code, accédez au Explorer, cliquez avec le bouton droit sur le dossier dist, puis sélectionnez Déployer sur un site web statique via stockage Azure. Lorsque vous y êtes invité, sélectionnez le compte de stockage que vous avez créé précédemment.

    Sélectionnez le dossier dist, cliquez avec le bouton droit, puis sélectionnez Déployer sur un site web statique via Stockage Azure.

  12. Une fois le déploiement terminé, cliquez avec le bouton droit sur le compte de stockage que vous avez créé précédemment et sélectionnez Parcourir le site web statique. Le site web statique s’ouvre et affiche le volet Office.

  13. Enfin, chargez une version test du fichier manifeste et le complément se charge à partir du site web statique que vous venez de déployer.

Déployer des fonctions personnalisées pour Excel

Si votre complément a des fonctions personnalisées, il existe quelques étapes supplémentaires pour les activer sur le compte stockage Azure. Tout d’abord, activez CORS afin qu’Office puisse accéder au fichier functions.json.

  1. Cliquez avec le bouton droit sur le compte de stockage Azure et sélectionnez Ouvrir dans le portail.

  2. Dans le groupe Paramètres, sélectionnez Partage de ressources (CORS). Vous pouvez également utiliser la zone de recherche pour le trouver.

  3. Créez une règle CORS avec les paramètres suivants.

    Propriété Valeur
    Origines autorisées *
    Méthodes autorisées GET
    En-têtes autorisés *
    En-têtes exposés Access-Control-Allow-Origin
    Âge maximal 200

  4. Sélectionnez Enregistrer.

Attention

Cette configuration CORS suppose que tous les fichiers de votre serveur sont accessibles publiquement à tous les domaines.

Ensuite, ajoutez un type MIME pour les fichiers JSON.

  1. Créez un fichier dans le dossier /src nommé web.config.

  2. Insérez le code XML suivant et enregistrez le fichier.

    <?xml version="1.0"?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
  </system.webServer>
</configuration>

  3. Ouvrez le fichier webpack.config.js.

  4. Ajoutez le code suivant dans la liste de plugins pour copier le web.config dans le bundle lors de l’exécution de la build.

    new CopyWebpackPlugin({
  patterns: [
  {
    from: "src/web.config",
    to: "src/web.config",
  },
 ],
}),

  5. Ouvrez une invite de ligne de commande et accédez au répertoire racine de votre projet de complément. Ensuite, exécutez la commande suivante pour préparer tous les fichiers pour le déploiement.

    npm run build

    Une fois la génération terminée, le dossier dist dans le répertoire racine de votre projet de complément contient les fichiers que vous allez déployer.

  6. Pour déployer, dans le Explorer VS Code, cliquez avec le bouton droit sur le dossier dist, puis sélectionnez Déployer sur un site web statique via stockage Azure. Lorsque vous y êtes invité, sélectionnez le compte de stockage que vous avez créé précédemment. Si vous avez déjà déployé le dossier dist , vous serez invité à remplacer les fichiers dans le stockage Azure avec les dernières modifications.

Déploiement de mises à jour

Lorsque vous ajoutez des fonctionnalités ou corrigez des bogues dans votre complément, vous devez déployer les mises à jour. Si votre complément est déployé par un ou plusieurs administrateurs dans leur organisation, certaines modifications de manifeste nécessitent que l’administrateur consente aux mises à jour. Les utilisateurs seront bloqués du complément jusqu’à ce que leur consentement soit accordé. Les modifications de manifeste suivantes nécessitent que l’administrateur donne à nouveau son consentement.

Remarque

Chaque fois que vous apportez une modification au manifeste, vous devez augmenter le numéro de version du manifeste.

Voir aussi