Zelfstudie: Een toepassing met één pagina maken en implementeren met GitHub Spark en Codespaces

De nieuwe ondersteuning voor toepassingen met één pagina biedt ontwikkelaars meer flexibiliteit: u kunt Power Pages-sites volledig in broncode maken, aanpassen en beheren. Met de recente release van GitHub Spark kunnen ontwikkelaars nu een site ontwerpen, deze rechtstreeks bewerken in een GitHub Codespace en deze implementeren in een Power Pages-omgeving zonder hun browser te verlaten. Deze handleiding leidt u door de volledige workflow.

GitHub Spark is een nieuw ai-platform voor natuurlijke taal van GitHub Copilot. Het is ontworpen om ontwikkelaars te helpen moderne webtoepassingen snel te bootstrapen. In combinatie met GitHub Codespaces voor het bewerken van code biedt Spark het volgende:

  • Een kant-en-klare sjabloonopslagplaats voor uw project.
  • Vooraf geconfigureerde dev-containers voor consistente omgevingen.
  • Ai-platform met natuurlijke taal van GitHub Copilot.

Voor Power Pages-ontwikkelaars betekent dit dat u kunt beginnen met een kant-en-klare sitesjabloon, deze aanpassen en implementeren zonder de traditionele lokale installatie.

Aan het einde van dit artikel weet u het volgende:

  1. Maak een power pages-prototypesite met behulp van GitHub Spark.
  2. Configureer uw Codespace voor .NET- en PAC CLI-ondersteuning.
  3. Bouw en upload uw toepassing met één pagina naar een Power Pages-omgeving.
  4. Uw site opnieuw activeren en testen vanuit Power Pages.

Vereiste voorwaarden

Zorg ervoor dat u voordat u begint de volgende zaken paraat hebt:

  • Een Power Pages-omgeving met beheerdersbevoegdheden.
  • Pac CLI (Power Platform CLI) versie 1.44.x of hoger geïnstalleerd en geverifieerd.
  • Een Power Pages-site op versie 9.7.4.x of hoger.
  • GitHub Spark-licentie met Codespaces voor uw aangepaste front-endproject.

Opmerking

  • Als u GitHub Spark wilt gebruiken, moet u ervoor zorgen dat u over de juiste GitHub-licenties beschikt.
  • Ondersteuning voor GitHub Spark of Codespaces is beschikbaar via het Spark-ondersteuningsteam.

Stap 1: Beginnen met de GitHub Spark-sjabloon

  1. Ga naar het GitHub Spark-hulpprogramma en genereer een nieuwe site met natuurlijke taal.
  2. Nadat u het bestand hebt gemaakt, klikt u op Openen in Codespaces.

Dit biedt u een cloudomgeving voor ontwikkeling waar u zonder lokale instellingen aan uw Power Pages-project kunt werken.

Stap 2: de configuratie van de ontwikkelcontainer bijwerken

Zoek het bestand in de opslagplaats:

.devcontainer/devcontainer.json

Wijzig de sectie met functies om ondersteuning voor .NET 9.0 toe te voegen. Uw configuratie moet er als volgt uitzien:

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

De container opnieuw bouwen

Nadat u de wijzigingen hebt opgeslagen:

  1. Druk Ctrl + Shift + P op (of Command + Shift + P op Mac) om het opdrachtenpalet te openen.
  2. Typ Codespaces: Bouw de container opnieuw en selecteer deze.
  3. De container wordt opnieuw opgestart. Tijdens dit proces worden .NET 9 en alle andere afhankelijkheden geïnstalleerd.
  4. Wacht enkele seconden totdat de installatie is voltooid voordat u doorgaat.

Deze stap zorgt ervoor dat uw Codespace-omgeving wordt vernieuwd met de nieuwe configuratie. Dit zorgt ervoor dat uw Codespace de benodigde runtime voor het bouwen van Power Pages-hulpprogramma's bevat.

Stap 3: Installeer de Power Platform tools

Vanuit uw Codespaces-terminal:

  1. Installeer Power Platform-hulpprogramma's (beschikbaar als VS Code-extensie).
  2. Deze installatie bevat ook de PAC CLI, een opdrachtregelinterface waarmee u sites kunt verifiëren, downloaden en uploaden.

Stap 4: Verbinding maken met uw Power Platform-omgeving

Gebruik de PAC CLI om te authentiseren bij uw doelomgeving.

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

Vervang de URL door de werkelijke URL van uw Power Platform-omgeving.

Stap 5: Uw site bouwen

Voordat u deze implementeert, bouwt u de sitecode:

npm run build

Met deze opdracht wordt uw site gecompileerd en worden de artifacts in een dist map geplaatst.

Stap 6: Uw site uploaden

Implementeer uw site in de Power Pages-omgeving met behulp van:

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

Parameterwaarden

Kenmerk Alias Description
--rootPath -rp Lokale map met de bronbestanden van uw site
--compiledPath -cp Pad naar gecompileerde activa, zoals React build
--siteName -sn Weergavenaam voor uw Power Pages-site

Stap 7: Opnieuw activeren en testen

  1. Na het uploaden wordt uw site weergegeven onder Inactieve sites in De Power Pages.
  2. Ga naar inactieve sites, zoek uw site en selecteer Opnieuw activeren.
  3. Wanneer de site actief wordt, opent u de URL om de implementatie te bevestigen.

Volgende stappen: Uw site beveiligen en uitbreiden

Nu uw site is geïmplementeerd:

  • Last updated on