Freigeben über

Lernprogramm: Erstellen und Bereitstellen einer einzelseitigen Anwendung mithilfe von GitHub Spark und Codespaces

Die neue Einzelseiten-Anwendungsunterstützung bietet Entwicklern mehr Flexibilität: Sie können Power Pages-Websites vollständig im Quellcode erstellen, anpassen und verwalten. Mit der letzten Version von GitHub Spark können Entwickler jetzt eine Website erstellen, sie direkt in einem GitHub Codespace bearbeiten und in einer Power Pages-Umgebung bereitstellen, ohne ihren Browser verlassen zu müssen. Dieses Lernprogramm führt Sie durch den vollständigen Workflow.

GitHub Spark ist eine neue KI-gestützte Natürliche-Sprache-Plattform von GitHub Copilot. Es wurde entwickelt, um Entwicklern zu helfen, moderne Webanwendungen schnell zu bootstrapieren. In Kombination mit GitHub Codespaces für die Codebearbeitung bietet Spark Folgendes:

  • Ein einsatzbereites Vorlagen-Repository für Ihr Projekt.
  • Vorkonfigurierte Entwicklercontainer für konsistente Umgebungen.
  • KI-gestützte, natürliche Sprachplattform von GitHub Copilot.

Für Power Pages-Entwickler bedeutet dies, dass Sie mit einer vorgefertigten Websitevorlage beginnen, sie anpassen und ohne die herkömmliche lokale Einrichtung bereitstellen können.

Am Ende dieses Artikels wissen Sie, wie Sie:

  1. Erstellen Sie einen Prototyp einer Power Pages-Website mithilfe von GitHub Spark.
  2. Konfigurieren Sie Ihren Codespace für .NET- und PAC CLI-Unterstützung.
  3. Erstellen und hochladen Sie Ihre Einzelseitenanwendung in eine Power Pages-Umgebung.
  4. Reaktivieren und testen Sie Ihre Website direkt über Power Pages.

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie folgendes haben:

  • Eine Power Pages-Umgebung mit Administratorberechtigungen.
  • Power Platform CLI (PAC CLI) Version 1.44.x oder höher ist installiert und authentifiziert.
  • Eine Power Pages Website auf Version 9.7.4.x oder höher.
  • GitHub Spark-Lizenz mit Codespaces für Ihr benutzerdefiniertes Frontend-Projekt.

Hinweis

  • Um GitHub Spark zu verwenden, stellen Sie sicher, dass Sie über die entsprechenden GitHub-Lizenzen verfügen.
  • Unterstützung für GitHub Spark oder Codespaces ist über das Spark-Supportteam verfügbar.

Schritt 1: Starten mit der GitHub Spark-Vorlage

  1. Wechseln Sie zum GitHub Spark-Tool, und generieren Sie eine neue Website mit natürlicher Sprache.
  2. Klicken Sie nach der Erstellung auf "In Codespaces öffnen".

Dadurch erhalten Sie eine cloudbasierte Entwicklungsumgebung, in der Sie ohne lokale Einrichtung an Ihrem Power Pages-Projekt arbeiten können.

Schritt 2: Aktualisieren der Konfiguration des Entwicklungscontainers

Suchen Sie im Repository nach der Datei:

.devcontainer/devcontainer.json

Ändern Sie den Abschnitt "Features", um Unterstützung für .NET 9.0 hinzuzufügen. Ihre Konfiguration sollte wie folgt aussehen:

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

Container neu erstellen

Nach dem Speichern der Änderungen:

  1. Drücken Sie Ctrl + Shift + P (oder Command + Shift + P auf dem Mac), um die Befehlspalette zu öffnen.
  2. Geben Sie Codespaces ein: Erstellen Sie den Container neu , und wählen Sie ihn aus.
  3. Der Container wird neu gestartet. Während dieses Vorgangs werden .NET 9 und alle anderen Abhängigkeiten installiert.
  4. Warten Sie einige Sekunden, bis die Installation abgeschlossen ist, bevor Sie fortfahren.

In diesem Schritt wird sichergestellt, dass Ihre Codespace-Umgebung mit der neuen Konfiguration aktualisiert wird. Dadurch wird sichergestellt, dass Ihr Codespace die erforderliche Laufzeit für Power Pages-Entwicklungstools enthält.

Schritt 3: Installieren von Power Platform-Tools

Von Ihrem Codespaces-Terminal aus:

  1. Installieren Sie Power Platform-Tools (verfügbar als VS Code-Erweiterung).
  2. Diese Installation bietet auch die PAC CLI, eine Befehlszeilenschnittstelle, mit der Sie Websites authentifizieren, herunterladen und hochladen können.

Schritt 4: Herstellen einer Verbindung mit Ihrer Power Platform-Umgebung

Verwenden Sie die PAC CLI, um sich bei Ihrer Zielumgebung zu authentifizieren:

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

Ersetzen Sie die URL durch Ihre tatsächliche Power Platform-Umgebungs-URL.

Schritt 5: Erstellen Ihrer Website

Erstellen Sie vor der Bereitstellung Ihren Websitecode:

npm run build

Dieser Befehl kompiliert Ihre Website und gibt die Artefakte in einen dist Ordner aus.

Schritt 6: Hochladen Ihrer Website

Stellen Sie Ihre Website in der Power Pages-Umgebung bereit, indem Sie Folgendes verwenden:

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

Parameter

Parameter Alias Description
--rootPath -rp Lokaler Ordner mit den Quelldateien Ihrer Website
--compiledPath -cp Pfad zu kompilierten Assets, z. B. React build
--siteName -sn Anzeigename für Ihre Power Pages Website

Schritt 7: Reaktivieren und Testen

  1. Nach dem Upload wird Ihre Website unter "Inaktive Websites " in den Power Pages angezeigt.
  2. Wechseln Sie zu "Inaktive Websites", suchen Sie Ihre Website, und wählen Sie "Reaktivieren" aus.
  3. Wenn die Website aktiv wird, öffnen Sie die URL, um die Bereitstellung zu bestätigen.

Nächste Schritte: Sichern und Erweitern Ihrer Website

Nachdem Ihre Website bereitgestellt wurde:

  • Last updated on