Tutoriel : Créer et déployer une application monopage à l’aide de GitHub Spark et de Codespaces

La nouvelle prise en charge de l’application monopage offre aux développeurs une plus grande flexibilité : vous pouvez créer, personnaliser et gérer entièrement des sites Power Pages dans le code source. Avec la version récente de GitHub Spark, les développeurs peuvent désormais créer un site, le modifier directement dans un espace de code GitHub et le déployer dans un environnement Power Pages sans quitter leur navigateur. Ce didacticiel vous guide tout au long du flux de travail complet.

GitHub Spark est une nouvelle plateforme en langage naturel alimenté par l’IA de GitHub Copilot. Il est conçu pour aider les développeurs à démarrer rapidement des applications web modernes. En cas de combinaison avec GitHub Codespaces pour la modification du code, Spark fournit les éléments suivants :

  • Référentiel de modèles prêt à l’emploi pour votre projet.
  • Conteneurs de développement préconfigurés pour des environnements cohérents.
  • Plateforme basée sur l’IA et en langage naturel à partir de GitHub Copilot.

Pour les développeurs Power Pages, cela signifie que vous pouvez commencer par un modèle de site prêt à l’utilisation, le personnaliser et le déployer sans la configuration locale traditionnelle.

À la fin de cet article, vous saurez comment :

  1. Créez un site Power Pages prototype à l’aide de GitHub Spark.
  2. Configurez votre espace de code pour la prise en charge de .NET et PAC CLI.
  3. Construisez et téléchargez votre application à page unique dans un environnement Power Pages.
  4. Réactivez et testez votre site directement à partir de Power Pages.

Prerequisites

Avant de commencer, assurez-vous d’avoir :

  • Un environnement Power Pages avec des privilèges d’administrateur.
  • Power Platform CLI (PAC CLI) version 1.44.x ou ultérieure installée et authentifiée.
  • Un site Power Pages sur la version 9.7.4.x ou ultérieure.
  • Licence GitHub Spark avec Codespaces pour votre projet front-end personnalisé.

Note

  • Pour utiliser GitHub Spark, vérifiez que vous disposez des licences GitHub appropriées.
  • La prise en charge de GitHub Spark ou de Codespaces est disponible via l’équipe du support technique Spark.

Étape 1 : Démarrer avec le modèle GitHub Spark

  1. Accédez à l’outil GitHub Spark et générez un nouveau site à l’aide du langage naturel.
  2. Une fois créé, cliquez sur Ouvrir dans Codespaces.

Cela vous donne un environnement de développement cloud dans lequel vous pouvez travailler sur votre projet Power Pages sans configuration locale.

Étape 2 : Mettre à jour la configuration du conteneur de développement

Dans le référentiel, recherchez le fichier :

.devcontainer/devcontainer.json

Modifiez la section fonctionnalités pour ajouter la prise en charge de .NET 9.0. Votre configuration doit ressembler à ceci :

"features": {
  "ghcr.io/devcontainers/features/sshd:1": {
    "version": "latest"
  },
  "ghcr.io/devcontainers/features/dotnet:2.3.0": {
    "version": "9.0"
  }
}

Reconstruire le conteneur

Après avoir enregistré vos modifications :

  1. Appuyez Ctrl + Shift + P sur (ou Command + Shift + P sur Mac) pour ouvrir la palette de commandes.
  2. Tapez Codespaces : regénérer le conteneur et sélectionnez-le.
  3. Le conteneur redémarre. Pendant ce processus, .NET 9 et toutes les autres dépendances seront installées.
  4. Attendez quelques secondes pour que l’installation se termine avant de continuer.

Cette étape garantit que votre environnement Codespace est actualisé avec la nouvelle configuration. Cela garantit que votre Codespace inclut l'environnement d'exécution nécessaire pour les outils de développement Power Pages.

Étape 3 : Installer les outils Power Platform

À partir de votre terminal Codespaces :

  1. Installez les outils Power Platform (disponibles en tant qu’extension VS Code).
  2. Cette installation intègre également l’interface CLI PAC, une interface de ligne de commande qui vous permet d’authentifier, télécharger et charger des sites.

Étape 4 : Se connecter à votre environnement Power Platform

Utilisez l’interface CLI PAC pour vous authentifier auprès de votre environnement cible :

pac auth create -u https://org12x34x45.crm.dynamics.com

Remplacez l’URL par l'URL réelle de votre environnement Power Platform.

Étape 5 : Créer votre site

Avant de déployer, générez votre code de site :

npm run build

Cette commande compile votre site et génère les artefacts dans un dist dossier.

Étape 6 : Charger votre site

Déployez votre site dans l’environnement Power Pages à l’aide de :

pac pages upload-code-site --rootPath "./spark-template" --compiledPath "./dist" --siteName "YourSiteName"

Paramètres

Paramètre Alias Descriptif
--rootPath -rp Dossier local contenant les fichiers source de votre site
--compiledPath -cp Chemin d’accès aux actifs compilés, comme React build
--siteName -sn Nom d’affichage de votre site Power Pages

Étape 7 : Réactiver et tester

  1. Une fois le chargement effectué, votre site apparaît sous Sites inactifs dans Power Pages.
  2. Accédez aux sites inactifs, recherchez votre site, puis sélectionnez Réactiver.
  3. Lorsque le site devient actif, ouvrez son URL pour confirmer le déploiement.

Étapes suivantes : Sécuriser et étendre votre site

Maintenant que votre site est déployé :

  • Last updated on