Erstellen und Bereitstellen einer einzelseitigen Anwendung in Power Pages

Power Pages unterstützt die Integration von Spa-Code (Single Page Application), der mit KI-unterstützten Tools der nächsten Generation erstellt wurde, z. B. GitHub Copilot. Mit dieser Funktion können Entwickler moderne, komponentenbasierte Front-End-Oberflächen in Power Pages mithilfe natürlicher Sprache als Codierungsschnittstelle integrieren.

Durch die Anleitung, das Testen und die Verfeinerung von KI-generiertem Code können Entwickler ihren Fokus von sich wiederholenden Implementierungsaufgaben auf die Orchestrierung auf höherer Ebene verlagern. Dieser Ansatz ermöglicht eine intuitivere, kreative Entwicklung und gleichzeitig die Beibehaltung von Qualität und Standards auf Unternehmensniveau.

Dieser Artikel zeigt Ihnen, wie das geht:

Erstellen und Einrichten eines SPA-Projekts für Power Pages mithilfe der Power Platform CLI (PAC CLI).
Laden Sie Coderessourcen auf Ihre Power Pages-Seite hoch und herunter.
Eine sichere und wartbare Projektstruktur einrichten.
Lernen Sie wichtige Unterschiede zwischen SPA-basierten und herkömmlichen Power Pages Implementierungen kennen.

Note

Eine SPA-Website ist eine Power Pages Website, die vollständig im Browser des Benutzers ausgeführt wird (clientseitiges Rendering). Im Gegensatz zu herkömmlichen Power Pages Websites verwalten Sie SPA-Websites nur über Quellcode- und Befehlszeilenschnittstellentools (CLI).
Die Git-Integration der Power Platform wird für Single-Page Application (SPA)-Websites in Power Pages nicht unterstützt.

Voraussetzungen

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

Eine Power Pages Umgebung mit admin-Berechtigungen.
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.
JavaScript-Dateiuploads in Dataverse-Umgebungen zulassen.
Ein lokales Git-Repository mit Ihrem benutzerdefinierten Front-End-Projekt, z. B. React, Angular oder Vue.

JavaScript-Dateiuploads zulassen

Standardmäßig blockieren einige Dataverse-Umgebungen den Upload von JavaScript-Dateien (.js). Wenn der Fehler "Import fehlgeschlagen: Die Anlage ist entweder kein gültiger Typ oder zu groß. Sie kann weder hoch- noch heruntergeladen werden." auftritt, aktualisieren Sie Ihre Umgebungseinstellungen, um das Hochladen dieses Dateityps zu erlauben.

Um die Einstellungen im Power Platform Admin Center für eine Umgebung einzurichten, gehen Sie wie folgt vor:

Melden Sie sich im Power Platform Admin Center an.
Wählen Sie im Navigationsbereich die Option Verwalten aus.
Wählen Sie im Bereich VerwaltenUmgebungen aus.
Wählen Sie eine Umgebung aus.
Wählen Sie in der Befehlsleiste Einstellungen aus.
Erweitern Sie Produkt und wählen Sie dann Datenschutz und Sicherheit aus.
Im Abschnitt "Blockierte Anlagen" entfernen Sie js aus der Liste der Dateierweiterungen.
Wählen Sie Speichern aus.

Eine SPA-Website entwickeln und bereitstellen

Power Pages SPA-Websites werden mithilfe der PAC CLI-Befehle upload-code-site und download-code-site verwaltet. Nachdem Sie eine Website hochgeladen haben, wird sie in Power Pages in der Liste Inaktive Websites angezeigt. Aktivieren der Website, um Sie für Benutzer verfügbar zu machen.

SPA-Website hochladen

Verwenden Sie den Befehl pac pages upload-code-site, um Ihre lokale Quelle und kompilierte Ressourcen in Ihre Power Pages Umgebung hochzuladen.

Syntax

pac pages upload-code-site `
  --rootPath <local-source-folder> `
  [--compiledPath <build-output-folder>] `
  [--siteName <site-display-name>]

Parameter

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

Beispiel

pac pages upload-code-site `
  --rootPath "../your-project" `
  --compiledPath "./build" `
  --siteName "Contoso Code Site"

Wenn Sie noch kein Projekt haben, probieren Sie die Beispielimplementierungen von SPA-Websites mit React, Angular und Vue aus.

Definieren von Uploadparametern mit `powerpages.config.json`

Passen Sie das Verhalten des upload-code-site Befehls an, indem Sie eine powerpages.config.json Datei in den Stammordner Ihrer Website einfügen. Wenn diese Datei vorhanden ist, führen Sie upload-code-site nur mit dem --rootPath-Parameter aus. Der Befehl liest die verbleibenden Werte aus der Konfigurationsdatei. Wenn Sie sowohl Befehlszeilenargumente als auch Konfigurationswerte angeben, haben die Befehlszeilenargumente Vorrang.

Konfigurationsfelder

Feld	Typ	Erforderlich	Description
`siteName`	string	Ja	Anzeigename für die Power Pages-Website.
`compiledPath`	string	Ja	Pfad zum kompilierten Ausgabeverzeichnis (z. B. vite `dist` - oder React-Ordner `build` ) relativ zu `powerpages.config.json`.
`defaultLandingPage`	string	Ja	Die HTML-Seite, die beim Öffnen des Websitestamms bereitgestellt wird, relativ zu `compiledPath` (in der Regel `index.html`).
`bundleFilePatterns`	string[]	No	Eine Liste von Platzhaltermustern, mit denen Dateien in `web-files` der Website identifiziert werden, die die CLI vor dem Hochladen des neuen Builds entfernt. Verwenden Sie dieses Feld, um veraltete Bundles mit Content-Hash zu entfernen, damit sich keine alten Ressourcen auf der Website ansammeln. Siehe Codeaufteilung und Bündelbereinigung.
`includeSource`	boolean	No	Wenn `true`, lädt der Befehl ihren Quellcode zusätzlich zu den kompilierten Ressourcen hoch. Wird standardmäßig auf `false` festgelegt.
`sourceExcludePatterns`	string[]	No	Wildcardmuster für Quelldateien, die vom Upload ausgeschlossen werden sollen. Gilt nur, wenn `includeSource` auf `true` gesetzt ist (z. B. um `node_modules` oder lokale Umgebungsdateien zu überspringen).

Die genaueste und up-to-Date-Feldreferenz finden Sie im powerpages.config.json Schema. Fügen Sie der Konfigurationsdatei die entsprechende $schema Eigenschaft hinzu, um validierung und autovervollständigen in Editoren zu aktivieren, die JSON-Schema unterstützen.

Beispiel `powerpages.config.json`

{
  "$schema": "https://www.schemastore.org/powerpages.config.json",
  "siteName": "Contoso Bank",
  "compiledPath": "dist",
  "defaultLandingPage": "index.html",
  "bundleFilePatterns": [
    "index-*.js",
    "index-*.css"
  ]
}

Eine SPA-Website herunterladen

Verwenden Sie den Befehl Pac-Seiten download-code-site Befehl, um den Code eines vorhandenen Standorts zu Bearbeitungs- oder Sicherungszwecken in ein lokales Verzeichnis herunterzuladen.

Syntax

pac pages download-code-site `
  [--environment <env-url-or-guid>] `
  --path <local-target-folder> `
  --webSiteId <site-guid> `
  [--overwrite]

Parameter

Parameter	Alias	Erforderlich	Description
`--environment`	`-env`	No	Dataverse -Umgebung (GUID oder vollständige URL). Standardmäßig wird Ihr aktives Authentifizierungsprofil verwendet
`--path`	`-p`	Ja	Lokales Verzeichnis zum Herunterladen des Standortcodes
`--webSiteId`	`-id`	Ja	Websitedatensatz-GUID der Power Pages SPA-Website
`--overwrite`	`-o`	No	Vorhandene Dateien im Zielverzeichnis überschreiben, falls sie bereits existieren

Beispiel

pac pages download-code-site `
  --environment "https://contoso.crm.dynamics.com" `
  --path "./downloaded-site" `
  --webSiteId "11112222-bbbb-3333-cccc-4444dddd5555" `
  --overwrite

Website aktivieren und testen

Wechseln Sie zu Power Pages.
Wählen Sie Inaktive Sites suchen Sie Ihre Site und wählen Wieder aktivieren.
Wenn die Website aktiv ist, rufen Sie die URL Ihrer Website auf, um die Bereitstellung zu überprüfen.

Tip

Bei jedem späteren upload-code-site Befehl wird die aktive Site automatisch aktualisiert.

Projektstruktur und Konfiguration

Ein konsistentes Projektlayout trägt dazu bei, ein korrektes Upload-Verhalten sicherzustellen.

/your-project
│
├─ src/                       ← Your source code, like React components
├─ build/                     ← Compiled assets, output of the `npm run build` command
├─ powerpages.config.json     ← Optional CLI configuration file
└─ README.md

Verwenden Sie die optionale powerpages.config.json Datei, um die Funktionsweise des upload-code-site Befehls anzupassen.

Code-Splitting und Bundle-Bereinigung

Wenn eine einzelseitige Anwendung wächst, wird ein einzelnes JavaScript-Bündel groß und langsam geladen. Moderne Buildtools lösen dieses Problem mit codeaufteilung. Mit dieser Technik wird die App in kleinere Abschnitte unterteilt, die der Browser bei Bedarf herunterlädt (z. B. nur, wenn der Benutzer zu einer bestimmten Route navigiert). Jeder Chunk wird mit einem Inhaltshash in seinem Dateinamen ausgegeben, wie etwa Dashboard-BSbmIXoe.js, sodass Browser ihn über lange Zeit zwischenspeichern und nur dann erneut herunterladen, wenn sich sein Inhalt ändert.

Durch die Codeteilung wird eine Bereitstellungsüberlegung eingeführt, die für Power Pages SPA-Websites eindeutig ist: Da jeder Build neue Hashdateinamen erzeugt, würden wiederholte upload-code-siteAusführungen die alten Hashdateien auf der Website hinter sich lassen. Im Laufe vieler Bereitstellungen sammeln sich diese verwaisten Chunks in web-files der Website an. Das bundleFilePatterns Feld in powerpages.config.json dient dazu, sie zu bereinigen.

Aktivieren der Codeaufteilung

Die Codeteilung wird von Ihrem Front-End-Buildtool behandelt, nicht durch Power Pages, sodass der Ansatz von dem framework und dem Bundler abhängt, das Sie verwenden. Die am häufigsten verwendete Technik besteht darin, Teile der App mit dynamischen Importen zu laden, die häufig auf Route- oder Ansichtsebene angewendet werden, sodass jeder Abschnitt nur heruntergeladen wird, wenn ein Benutzer zu der App navigiert (faules Laden).

Bundler wie Vite, webpack und esbuild können Module auch explizit in benannte Blöcke gruppieren. Die genaue Konfiguration finden Sie in der Dokumentation für Ihr Framework und Bundler.

dist/assets/
├─ index-BJltBIP-.js        ← app entry
├─ index-DMwMk7hv.css       ← styles
├─ Dashboard-BSbmIXoe.js    ← lazy route chunk
├─ InvoiceList-DwjrGrAI.js  ← lazy route chunk
└─ InvoiceDetail-D3DVGkeM.js← lazy route chunk

Je nachdem, welcher Ansatz Sie auswählen, ist das Ergebnis gleich, und es ist der Teil, der für die Bereitstellung wichtig ist: Der Build gibt mehrere Ausgabedateien aus, die jeweils mit einem Inhaltshash im Namen enthalten sind. Da sich diese Hashes ändern, wenn sich der Inhalt einer Datei ändert, erzeugt jeder Build einen anderen Satz von Dateinamen. In den nächsten Abschnitten wird erläutert, wie Ihre Dataverse-Umgebungen sauber bleiben, wenn sich diese Namen ändern.

Wie `upload-code-site` veraltete Bundles bereinigt

Bevor Sie Ihre kompilierten Ressourcen hochladen, löscht upload-code-site jede Datei in web-files der Website, die mit einem Platzhaltermuster in bundleFilePatterns übereinstimmt, und lädt dann den aktuellen Build hoch. Durch dieses Delete-then-Upload-Verhalten bleibt die bereitgestellte Datei identisch mit Ihrer neuesten kompilierten Ausgabe, anstatt jeden Build über dem vorherigen Build zu überladen.

Damit die Bereinigung funktioniert, müssen die Platzhaltermuster in bundleFilePatterns den Dateinamen entsprechen, die von Ihrem Build erzeugt werden. Es gibt zwei Möglichkeiten, um sie genau zu halten, je nachdem, wie Ihr Buildtool Dateien benennt.

Option 1: Direktes Auflisten von Wildcardmustern

Viele Build-Tools behalten ein stabiles Namenspräfix bei und ändern nur den Content-Hash, wie etwa index-[hash].js. Wenn die Ausgabedateinamen einem vorhersagbaren Muster wie diesem folgen, geben Sie in bundleFilePatterns für jeden Dateinamen ein Platzhaltermuster an. Es sind keine zusätzlichen Tools erforderlich:

{
  "$schema": "https://www.schemastore.org/powerpages.config.json",
  "siteName": "Contoso Bank",
  "compiledPath": "dist",
  "defaultLandingPage": "index.html",
  "bundleFilePatterns": [
    "index-*.js",
    "index-*.css"
  ]
}

Ein Platzhaltermuster wie z. B. index-*.js entspricht bei jedem Build dieser Datei, unabhängig vom Hash. Fügen Sie pro Ausgabedatei einen Eintrag hinzu, und fügen Sie ein neues Muster hinzu, wenn ihr Build mit der Erstellung einer neuen Ausgabedatei beginnt.

Option 2: Generieren von Wildcardmustern mit einem Postbuildskript

Verwenden Sie diesen Ansatz, wenn Die Ausgabedateinamen nicht einem vorhersagbaren Muster folgen, oder wenn Ihre App viele Dateien erzeugt, deren Namen sich ändern, während Sie Routen hinzufügen und entfernen, wodurch eine handverwendbare Liste fehleranfällig wird. Ein kurzes Skript, das nach dem Build ausgeführt wird, überprüft die kompilierte Ausgabe und schreibt bundleFilePatterns mit einem Wildcardmuster für jede ausgegebene Datei um. Wenn z. B. ein Build-Tool Dateien als [name]-[hash].[ext] benennt, reduziert das Skript Dashboard-BSbmIXoe.js auf das Muster Dashboard-*.js.

scripts/postbuild.js:

#!/usr/bin/env node

/**
 * Post-build script: scans dist/assets/ and updates powerpages.config.json
 * with bundleFilePatterns that match all Vite-generated chunks.
 *
 * This ensures `pac pages upload-code-site` cleans up old hashed bundles
 * on each deploy instead of accumulating stale files.
 *
 * Usage: node scripts/postbuild.js
 * Or via npm: "postbuild": "node scripts/postbuild.js" in package.json
 */

import { readdirSync, readFileSync, writeFileSync } from 'fs'
import { join } from 'path'

const ROOT = join(import.meta.dirname, '..')
const DIST_ASSETS = join(ROOT, 'dist', 'assets')
const CONFIG_PATH = join(ROOT, 'powerpages.config.json')

// Vite output format: [name]-[hash].[ext]
// We want to extract "name" and "ext" to produce "name-*.ext" patterns
const HASH_PATTERN = /^(.+)-[A-Za-z0-9_-]{6,12}\.(js|css)$/

try {
  const files = readdirSync(DIST_ASSETS)
  const patternSet = new Set()

  for (const file of files) {
    const match = file.match(HASH_PATTERN)
    if (match) {
      const [, baseName, ext] = match
      patternSet.add(`${baseName}-*.${ext}`)
    }
  }

  const patterns = [...patternSet].sort()

  if (patterns.length === 0) {
    console.log('No hashed bundles found in dist/assets/ — skipping config update.')
    process.exit(0)
  }

  // Read current config
  const config = JSON.parse(readFileSync(CONFIG_PATH, 'utf-8'))
  const oldPatterns = config.bundleFilePatterns || []

  // Check if update is needed
  const oldSet = new Set(oldPatterns)
  const newSet = new Set(patterns)
  const changed = oldSet.size !== newSet.size || [...newSet].some(p => !oldSet.has(p))

  if (!changed) {
    console.log(`bundleFilePatterns already up-to-date (${patterns.length} patterns).`)
    process.exit(0)
  }

  // Update config
  config.bundleFilePatterns = patterns
  writeFileSync(CONFIG_PATH, JSON.stringify(config, null, 2) + '\n', 'utf-8')

  console.log(`Updated powerpages.config.json with ${patterns.length} bundle patterns:`)
  for (const p of patterns) {
    console.log(`  ${p}`)
  }
} catch (err) {
  console.error('postbuild error:', err.message)
  process.exit(1)
}

Verbinden Sie das Skript mit Ihrem Build, damit es immer nach dem Bundler ausgeführt wird:

{
  "scripts": {
    "build": "tsc -b && vite build && node scripts/postbuild.js"
  }
}

Eine Bereitstellung erfordert jetzt nur noch zwei Befehle, und die Webseite sammelt nie verwaiste Chunks an:

npm run build
pac pages upload-code-site --rootPath .

Nach dem Build bildet powerpages.config.json die aktuellen Bundles exakt ab, z. B.:

{
  "$schema": "https://www.schemastore.org/powerpages.config.json",
  "siteName": "Contoso Bank",
  "compiledPath": "dist",
  "defaultLandingPage": "index.html",
  "bundleFilePatterns": [
    "Dashboard-*.js",
    "InvoiceDetail-*.js",
    "InvoiceList-*.js",
    "index-*.css",
    "index-*.js"
  ]
}

Authentifizierung und Autorisierung

Power Pages SPA-Websites verwenden dasselbe Security-Modell wie herkömmliche Power Pages Websites.

Konfigurieren von Identitätsanbietern

Wechseln Sie zu Power Pages.
Wählen Sie Ihre Website, und wählen Sie dann Bearbeiten aus.
Wählen SieSicherheitsidentitätsanbieter> aus.
Fügen Sie Identity-Anbieter hinzu oder richten Sie sie ein, z. B. Microsoft Entra ID.
Jede neue Seite hat automatisch einen Standard-Microsoft-Entra-ID-Anbieter.

Auf den Benutzerkontext im Code zugreifen

Authentifizierungsmetadaten auf dem Client abrufen:

Autoritative URL:

Die Autoritäts- oder Anmelde-URL für Microsoft Entra ID lautet:
```
https://login.windows.net/<tenantId>
```
Suchen Sie die Authority-URL für andere konfigurierte Identitätsanbieter, indem Sie zu den Power Pages><your site>>Sicherheits>Identitätsanbieter-Konfigurationseinstellungen gehen.

Benutzerdetails:

window["Microsoft"].Dynamic365.Portal.User

Beispiel für einen React-Flow

import { IconButton, Tooltip } from '@mui/material';
import {
    Login,
    Logout
} from '@mui/icons-material';
import React from 'react';
export const AuthButton = () => {
    const username = (window as any)["Microsoft"]?.Dynamic365?.Portal?.User?.userName ?? "";
    const firstName = (window as any)["Microsoft"]?.Dynamic365?.Portal?.User?.firstName ?? "";
    const lastName = (window as any)["Microsoft"]?.Dynamic365?.Portal?.User?.lastName ?? "";
    const tenantId = (window as any)["Microsoft"]?.Dynamic365?.Portal?.tenant ?? "";
    const isAuthenticated = username !== "";
    const [token, setToken] = React.useState<string>("");

    React.useEffect(() => {
        const fetchAntiForgeryToken = async (): Promise<string> => {
            try {
                const tokenEndpoint = "/_layout/tokenhtml";

                const response = await fetch(tokenEndpoint, {});

                if (response.status !== 200) {
                    throw new Error(`Failed to fetch token: ${response.status}`);
                }

                const tokenResponse = await response.text();                
                const valueString = 'value="';
                const terminalString = '" />';
                const valueIndex = tokenResponse.indexOf(valueString);

                if (valueIndex === -1) {
                    throw new Error('Token not found in response');
                }

                const requestVerificationToken = tokenResponse.substring(
                    valueIndex + valueString.length,
                    tokenResponse.indexOf(terminalString, valueIndex)
                );

                return requestVerificationToken || '';
            } catch (error) {
                console.warn('[Impersonation] Failed to fetch anti-forgery token:', error);
                return '';
            }
        };

        const getToken = async () => {
            try {
                const token = await fetchAntiForgeryToken();
                setToken(token);
            } catch (error) {
                console.error('Error fetching token:', error);
            }
        };
        getToken();
    }, []);

    return (
        <div className="flex items-center gap-4">
            {isAuthenticated ? (
                <>
                    <span className="text-sm">Welcome {firstName + " " + lastName}</span>
                    <Tooltip title="Logout">
                        <IconButton color="primary" onClick={() => window.location.href = "/Account/Login/LogOff?returnUrl=%2F"}>
                            <Logout />
                        </IconButton>
                    </Tooltip>
                </>
            ) : (
                <form action="/Account/Login/ExternalLogin" method="post">
                    <input name="__RequestVerificationToken" type="hidden" value={token} />
                    <Tooltip title="Login">
                        <IconButton name="provider" type="submit" color="primary" value={`https://login.windows.net/${tenantId}/`}>
                            <Login />
                        </IconButton>
                    </Tooltip>
                </form>
            )}
        </div>
    );
};

Verwenden von Power Pages Web-APIs

Entwickler können Power Pages Web-APIs verwenden, um Inhalte in die Benutzeroberfläche zu laden oder Datensätze zu erstellen, zu aktualisieren und zu löschen. Stellen Sie vor der Verwendung dieser APIs sicher, dass die erforderlichen Web-APIs aktiviert sind und dass die entsprechenden Tabellenberechtigungen und Webrollen ordnungsgemäß konfiguriert sind.


// Create query to get all cards from Dataverse
const fetchCards = async () => {
    const response = await fetch("/_api/cr7ae_creditcardses");
    const data = await response.json();
    const cards = data.value;
    const returnData = [];

    // Loop through the cards and get the name and id of each card
    for (let i = 0; i < cards.length; i++) {
        const card = cards[i];
        const cardName = card.cr7ae_name;
        const cardId = card.cr7ae_creditcardsid;
        const features = card.cr7ae_features
            ?.split(',')
            .map((feature: string) => feature.trim());
        const type = card.cr7ae_type;
        const image = card.cr7ae_image;
        const category = card.cr7ae_category
            ?.split(',')
            .map((cat: string) => cat.trim());
        
        // ...additional processing/pushing to returnData...
    }

    return returnData;
};

Einrichten der lokalen Entwicklung durch Aktivieren von Web-API-Aufrufen von localhost mithilfe der Microsoft Entra ID-Authentifizierung

Entwickler benötigen schnellere Iterationszyklen, lokales Debuggen und Hot Reload-Funktionen beim Erstellen von Anwendungen. SPA unterstützt diese Workflows, indem sichere Web-API-Aufrufe von localhost mit der Microsoft Entra ID (Azure AD) v1-Authentifizierung ermöglicht werden.

Mit diesem Setup können Sie:

Führen Sie Ihre App lokal mit vollständiger Authentifizierungsunterstützung aus.
Verwenden Sie moderne Entwicklungstools wie Vite für hot reload und schnelles Feedback.
Vermeiden Sie CORS-Probleme beim Aufrufen von Power Pages-Web-APIs.
Beschleunigen Sie die Entwicklung, ohne Änderungen am Portal bereitzustellen.

Diese Konfiguration ermöglicht eine produktive lokale Entwicklungsumgebung für Single-Page-Anwendungen (SPA), sodass Entwickler mit vollständigem API-Zugriff und Authentifizierungsunterstützung schnell erstellen, testen und iterieren können.

Important

Verwenden Sie nur Microsoft Entra v1-Endpunkte für die Authentifizierung.
Die Bearerauthentifizierung wird nur in Den Portalversionen 9.7.6.6 oder höher unterstützt.
Wenden Sie diese Einstellungen nur in Entwicklungsumgebungen an.

Konfigurationsschritte

Aktivieren der SPA-Authentifizierung
1. Öffnen Sie in Azure Portal die für Ihr Portal registrierte Microsoft Entra-App.
2. Aktivieren Sie die Single Page Application (SPA) -Authentifizierung.
3. Fügen Sie localhost mithilfe der Plattformkonfiguration Single-Page-Anwendung als Umleitungs-URI hinzu. Weitere Informationen finden Sie unter Hinzufügen eines Umleitungs-URI in Ihrer Anwendung.
  - Umleitungs-URI: http://localhost:<port>/.

Hinzufügen von Websiteeinstellungen

Fügen Sie diese Websiteeinstellungen in Power Pages hinzu:

Authentication/BearerAuthentication/Enabled = true
Authentication/BearerAuthentication/Protocol = OpenIdConnect
Authentication/BearerAuthentication/Provider = AzureAD

Verwenden von ADAL.js für die Authentifizierung
- Implementieren Der clientseitigen Authentifizierung mithilfe von ADAL.js.
Note

MSAL.js ist nicht kompatibel, da Power Pages Microsoft Entra v1-Endpunkte verwendet, während MSAL v2 verwendet. Das Ausstellerformat unterscheidet sich zwischen den Versionen.
Autorisierungsheader hinzufügen
- Fügen Sie diesen Header in alle Web-API-Anforderungen ein:
```
Authorization: Bearer <id_token>
```
Festlegen der Sichtbarkeit der Website auf "Öffentlich"
- Diese Einstellung ermöglicht localhost den Zugriff auf die Website für Entwicklungs- und Testzwecke.

Konfigurieren des Entwicklungsproxys

Wenn Sie Vite verwenden, fügen Sie diesen Code zu vite.config.js hinzu, um CORS-Probleme zu vermeiden:

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/_api': {
        target: 'https://site-foo.powerappsportals.com',
        changeOrigin: true,
        secure: true
      }
    }
  }
});

Unterschiede zwischen vorhandenen Power Pages Websites

In der folgenden Tabelle sind die wichtigsten Unterschiede zwischen SPA-Websites zusammengefasst, die mit diesem Feature und herkömmlichen Power Pages Websites erstellt wurden:

Feature	SPA-Website-Verhalten
Serverseitige Aktualisierung	Gibt immer die Stammseite der Website zurück, und der clientseitige Router rendert Unterrouten.
Weiterleitungskonflikte	Clientseitige Routen haben Vorrang, und eine harte Aktualisierung führt einen Rückgriff auf den Stamm durch.
Seiten-Arbeitsbereich	Der Seiten-Arbeitsbereich wird nicht unterstützt. Verwenden Sie Clientrouting und Clientseitenseiten. Für die Sicherheit auf Seitenebene prüfen Sie die zugewiesenen Webrollen mit dem globalen Benutzerobjekt und rendern Sie die Benutzeroberfläche bedingt.
Arbeitsbereich „Stil“	Die Formatierung mit dem Stil-Arbeitsbereich wird nicht unterstützt. Verwenden Sie das Styling Ihres Frameworks, wie z. B. CSS, CSS-in-JS oder Utility-Klassen.
Lokalisierung	Einsprachen-Unterstützung Implementieren Sie das clientseitige Laden von Ressourcen.
Liquid-Vorlage	Liquid-Code und Liquid-Vorlagen werden nicht unterstützt. Greifen Sie mithilfe des Vorlagenmoduls und der Web-APIs Ihres Frameworks auf Daten zu.

FAQ

Welche Unterstützung gibt es für Unit- und Integrationstests?

Derzeit gibt es keine integrierte Unterstützung für Einheiten- und Integrationstests. Maker sollten diese Tests lokal oder innerhalb ihrer CI/CD-Pipelines schreiben und ausführen.

Gibt es Unterstützung für die Power Fx Integration mit WebAssembly?

Diese Funktion wird derzeit nicht unterstützt.

Ist Quellcode in Power Pages verfügbar?

Derzeit können Entwickler Websites mit TypeScript oder GitHub Copilot Agent erstellen. Auf die kompilierten JavaScript- und CSS-Dateien kann zugegriffen werden und in Visual Studio Code bearbeitet werden. Die direkte und umfassende Bearbeitung von HTML-Dateien wird derzeit nicht unterstützt.

Kann ich eine Komponente extern mithilfe dieses Features erstellen und auf eine Power Pages Website übertragen?

Nein, Sie können eine extern generierte Komponente nicht mithilfe dieses Features auf eine vorhandene Power Pages Website übertragen.

Kann ich Standardkomponenten wie Listen und Formulare hinzufügen?

Das Hinzufügen von Standardkomponenten wie Listen und Formularen wird derzeit nicht unterstützt. Sie können jedoch benutzerdefinierte Formulare und Listen mithilfe des React-Frameworks und web-APIs erstellen.

Kann ich eine SPA-Website im Arbeitsbereich „Einrichten“ als PWA aktivieren?

No. SPA-Websites unterstützen die Einstellung für progressive Web-Apps (PWA) unter Arbeitsbereich einrichten nicht. Diese Einschränkung bedeutet, dass Sie den Abschnitt "Mobile" nicht verwenden können, um eine Website als PWA zu aktivieren. Um PWA-Funktionen wie installierbare App-Oberflächen und Offlineseiten hinzuzufügen, implementieren Sie sie in Ihrem Frameworkcode. Fügen Sie z. B. ein Web-App-Manifest und einen Service-Worker hinzu.

Wie funktioniert die Quellcodeverwaltung?

Entwickler können die Power Platform Git-Integration für die Quellcodeverwaltung verwenden. Allerdings werden nur die kompilierten Webdateien dem Repository hinzugefügt, nicht der vollständige Quellcode.

Unterstützen diese Websites SEO?

Da SPA-Websites mit dem React-Framework erstellt werden und clientseitiges Rendering verwenden, ist die SEO-Unterstützung begrenzt.

Welche Sicherheits- und Governance-Unterstützung bieten Power Pages für SPA-Websites?

Power Pages erzwingt Tabellenberechtigungen und Sicherheitswebrollen für Web-API-Aufrufe, um sicherzustellen, dass der Datenzugriff mit Benutzerrollen übereinstimmt. Verwenden Sie das window["Microsoft"].Dynamic365.Portal.User Objekt, um grundlegende Benutzereigenschaften abzurufen und Erfahrungen basierend auf Benutzer-Personas anzupassen.

Darüber hinaus unterstützen SPA-Sites Folgendes:

Private und öffentliche Website-Konfigurationen
Governance-Einstellungen, einschließlich Kontrolle über den anonymen Datenzugriff
Authentifizierung und Anbieterkonfigurationen

Diese Features tragen dazu bei, die sichere und kompatible Integration von benutzerdefinierten Komponenten in Power Pages sicherzustellen.

Feedback

War diese Seite hilfreich?

Last updated on 2026-07-21

Erstellen und Bereitstellen einer einzelseitigen Anwendung in Power Pages

Voraussetzungen

JavaScript-Dateiuploads zulassen

Eine SPA-Website entwickeln und bereitstellen

SPA-Website hochladen

Syntax

Parameter

Beispiel

Definieren von Uploadparametern mit powerpages.config.json

Konfigurationsfelder

Beispiel powerpages.config.json

Eine SPA-Website herunterladen

Syntax

Parameter

Beispiel

Website aktivieren und testen

Projektstruktur und Konfiguration

Code-Splitting und Bundle-Bereinigung

Aktivieren der Codeaufteilung

Wie upload-code-site veraltete Bundles bereinigt

Option 1: Direktes Auflisten von Wildcardmustern

Option 2: Generieren von Wildcardmustern mit einem Postbuildskript

Authentifizierung und Autorisierung

Konfigurieren von Identitätsanbietern

Auf den Benutzerkontext im Code zugreifen

Beispiel für einen React-Flow

Verwenden von Power Pages Web-APIs

Einrichten der lokalen Entwicklung durch Aktivieren von Web-API-Aufrufen von localhost mithilfe der Microsoft Entra ID-Authentifizierung

Konfigurationsschritte

Unterschiede zwischen vorhandenen Power Pages Websites

FAQ

Welche Unterstützung gibt es für Unit- und Integrationstests?

Gibt es Unterstützung für die Power Fx Integration mit WebAssembly?

Ist Quellcode in Power Pages verfügbar?

Kann ich eine Komponente extern mithilfe dieses Features erstellen und auf eine Power Pages Website übertragen?

Kann ich Standardkomponenten wie Listen und Formulare hinzufügen?

Kann ich eine SPA-Website im Arbeitsbereich „Einrichten“ als PWA aktivieren?

Wie funktioniert die Quellcodeverwaltung?

Unterstützen diese Websites SEO?

Welche Sicherheits- und Governance-Unterstützung bieten Power Pages für SPA-Websites?

Verwandte Informationen

Feedback

Zusätzliche Ressourcen

Definieren von Uploadparametern mit `powerpages.config.json`

Beispiel `powerpages.config.json`

Wie `upload-code-site` veraltete Bundles bereinigt