Opplæring: Opprette og distribuere et enkeltsideprogram ved hjelp av GitHub Spark og Codespaces

Den nye programstøtten på én side gir utviklere større fleksibilitet: Du kan opprette, tilpasse og administrere Power Pages-nettsteder helt i kildekoden. Med den nylige utgivelsen av GitHub Spark kan utviklere nå redigere et nettsted, redigere det direkte i et GitHub Codespace og distribuere det til et Power Pages-miljø uten å forlate nettleseren. Denne opplæringen veileder deg gjennom hele arbeidsflyten.

GitHub Spark er en ny AI-drevet naturlig språkplattform fra GitHub Copilot. Det er utformet for å hjelpe utviklere bootstrap moderne webprogrammer raskt. Når spark kombineres med GitHub Codespaces for koderedigering, gir Spark:

  • Et klar til bruk-malrepositorium for prosjektet.
  • Forhåndskonfigurerte utviklerbeholdere for konsekvente miljøer.
  • AI-drevet, naturlig språkplattform fra GitHub Copilot.

For Power Pages-utviklere betyr dette at du kan starte med en ferdiggjort nettstedsmal, tilpasse den og distribuere den uten det tradisjonelle lokale oppsettet.

På slutten av denne artikkelen vet du hvordan du gjør følgende:

  1. Opprett et power pages-nettsted for prototype ved hjelp av GitHub Spark.
  2. Konfigurer kodeområdet for støtte for .NET og PAC CLI.
  3. Bygg og last opp et enkeltsideprogram til et Power Pages-miljø.
  4. Aktiver på nytt og test området direkte fra Power Pages.

Forutsetning

Før du begynner, må du kontrollere at du har:

  • Et Power Pages-miljø med administratorrettigheter.
  • Power Platform CLI (PAC CLI) versjon 1.44.x eller nyere installert og autentisert.
  • Et Power Pages-nettsted på versjon 9.7.4.x eller nyere.
  • GitHub Spark-lisens med kodeområder for det egendefinerte frontend-prosjektet.

Note

  • Hvis du vil bruke GitHub Spark, må du kontrollere at du har de riktige GitHub-lisensene.
  • Støtte for GitHub Spark eller Codespaces er tilgjengelig via Spark-støtteteamet.

Trinn 1: Start med GitHub Spark-malen

  1. Gå til GitHub Spark-verktøyet, og generer et nytt nettsted ved hjelp av naturlig språk.
  2. Når du er opprettet, klikker du Åpne i kodeområder.

Dette gir deg et skybasert utviklingsmiljø der du kan arbeide på Power Pages-prosjektet uten lokal konfigurasjon.

Trinn 2: Oppdater konfigurasjonen av utviklingsbeholderen

Finn filen i repositoriet:

.devcontainer/devcontainer.json

Endre funksjonsdelen for å legge til støtte for .NET 9.0. Konfigurasjonen skal se slik ut:

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

Gjenoppbygge beholderen

Når du har lagret endringene:

  1. Trykk Ctrl + Shift + P (eller Command + Shift + P på Mac) for å åpne kommandopaletten.
  2. Skriv Codespaces: Gjenoppbygg beholderen og velg den.
  3. Beholderen starter på nytt. Under denne prosessen installeres .NET 9 og alle andre avhengigheter.
  4. Vent noen sekunder før installasjonen fullføres før du fortsetter.

Dette trinnet sikrer at Codespace-miljøet oppdateres med den nye konfigurasjonen. Dette sikrer at kodeområdet inneholder den nødvendige kjøretiden for byggverktøy for Power Pages.

Trinn 3: Installere Verktøy for Power Platform

Fra Codespaces-terminalen:

  1. Installer Power Platform-verktøy (tilgjengelig som en VS Code-utvidelse).
  2. Denne installasjonen henter også inn PAC CLI, et kommandolinjegrensesnitt som gjør det mulig å godkjenne, laste ned og laste opp nettsteder.

Trinn 4: Koble til Power Platform-miljøet

Bruk PAC CLI til å godkjenne mot målmiljøet:

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

Erstatt URL-adressen med den faktiske nettadressen for Power Platform-miljøet.

Trinn 5: Bygge området

Før du distribuerer, bygg nettstedskoden.

npm run build

Denne kommandoen kompilerer området og sender artefaktene til en dist mappe.

Trinn 6: Laste opp området

Distribuer nettstedet til Power Pages-miljøet ved hjelp av:

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

Parametere

Parameter Alias Beskrivelse
--rootPath -rp Lokal mappe som inneholder nettstedets kildefiler
--compiledPath -cp Bane til kompilerte ressurser, for eksempel React build
--siteName -sn Visningsnavn for Power Pages-nettstedet

Trinn 7: Aktivere på nytt og teste

  1. Etter opplastingen vises nettstedet under Inaktive nettsteder i Power Pages.
  2. Gå til Inaktive områder, finn området, og velg Aktiver på nytt.
  3. Når området blir aktivt, åpner du nettadressen for å bekrefte distribusjonen.

Neste trinn: Sikre og utvide området

Nå som nettstedet er distribuert:

  • Last updated on