Vytvoření a nasazení jednostrákové aplikace v Power Pages

Power Pages podporuje integraci kódu jednostránkové aplikace (SPA) vytvořeného s nástroji s asistencí umělé inteligence nové generace, jako je GitHub Copilot. Tato funkce umožňuje vývojářům přenést moderní front-endová prostředí založená na komponentách do Power Pages pomocí přirozeného jazyka jako programovacího rozhraní.

Vedením, testováním a vylepšováním kódu generovaného umělou inteligencí mohou tvůrci posunout své zaměření od opakujících se implementačních úloh až po orchestraci na vyšší úrovni. Tento přístup umožňuje intuitivnější a kreativní vývoj při zachování kvality a standardů na podnikové úrovni.

V tomto článku se dozvíte, jak:

Vytvořte a nastavte projekt SPA pro Power Pages pomocí rozhraní příkazového řádku Power Platform CLI (PAC CLI).
Nahrávejte a stahujte datové zdroje kódu na svůj web Power Pages a z něj.
Nastavte bezpečnou a udržovatelnou strukturu projektu.
Seznamte se s klíčovými rozdíly mezi implementacemi založenými na SPA a tradičními Power Pages.

Note

Web SPA je web Power Pages, který běží zcela v prohlížeči uživatele (vykreslování na straně klienta). Na rozdíl od tradičních Power Pages webů spravujete weby SPA pouze prostřednictvím zdrojových kódů a nástrojů rozhraní příkazového řádku (CLI).
Integrace Power Platform Git není podporována pro weby typu jednostránková aplikace (SPA) v Power Pages.

Předpoklady

Než začnete, ujistěte se, že máte:

Prostředí Power Pages s oprávněními správce .
Power Platform CLI (PAC CLI) verze 1.44.x nebo novější je instalované a ověřené.
Web Power Pages ve verzi 9.7.4.x nebo novější.
Povolte nahrávání souborů JavaScriptu v prostředích Dataverse.
Místní úložiště Git s vlastním front-endovým projektem, jako je React, Angular nebo Vue.

Povolit nahrávání souborů JavaScriptu

Ve výchozím nastavení některá prostředí Dataverse blokují nahrávání souborů JavaScriptu (.js). Pokud dojde k chybě Import se nezdařil: Příloha není platným typem nebo je příliš velká. Soubor nelze nahrát ani stáhnout.", aktualizujte nastavení prostředí tak, aby umožňovalo tento typ souboru.

Chcete-li upravit nastavení prostředí v centru pro správu Power Platform, postupujte takto:

Přihlaste se do Centra pro správu Power Platform.
V navigačním podokně vyberte Spravovat.
V podokně Spravovat vyberte Prostředí.
Vyberte prostředí.
V příkazovém řádku vyberte možnost Nastavení.
Rozbalte Produkt a vyberte Ochrana osobních údajů a zabezpečení.
V části Blokované přílohy odeberte js ze seznamu přípon souborů.
Vyberte Uložit.

Vytvoření a nasazení webu SPA

Power Pages weby SPA se spravují pomocí příkazů PAC CLI upload-code-site a download-code-site. Po nahrání se web zobrazí v seznamu Power Pages v seznamu Inactive sites. Aktivujte web, aby byl k dispozici uživatelům.

Nahrání webu SPA

Pomocí příkazu pac pages upload-code-site nahrajte svůj místní zdrojový kód a kompilované prostředky do prostředí Power Pages.

Syntax

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

Parameters

Parameter	Alias	Povinné	Description
`--rootPath`	`-rp`	Ano	Místní složka se zdrojovými soubory webu
`--compiledPath`	`-cp`	Ne	Cesta ke zkompilovaným prostředkům, jako je React `build`
`--siteName`	`-sn`	Ne	Zobrazovaný název webu Power Pages

Příklad

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

Pokud nemáte existující projekt, vyzkoušejte ukázkové implementace webů SPA pomocí Reactu, Angular a Vue.

Definování parametrů nahrání pomocí `powerpages.config.json`

Přizpůsobte chování upload-code-site příkazu zahrnutím powerpages.config.json souboru do kořenové složky webu. Pokud je tento soubor k dispozici, spusťte upload-code-site pouze s parametrem --rootPath . Příkaz přečte zbývající hodnoty z konfiguračního souboru. Pokud zadáte argumenty příkazového řádku i hodnoty konfigurace, budou mít přednost argumenty příkazového řádku.

Pole konfigurace

Pole	Typ	Povinné	Description
`siteName`	řetězec	Ano	Zobrazovaný název webu Power Pages.
`compiledPath`	řetězec	Ano	Cesta ke zkompilovanému výstupnímu adresáři (například složka Vite `dist` nebo React `build` ) vzhledem k `powerpages.config.json`.
`defaultLandingPage`	řetězec	Ano	Stránka HTML, která se zobrazí při otevření kořene webu, relativně k `compiledPath` (obvykle `index.html`).
`bundleFilePatterns`	string[]	Ne	Seznam vzorů se zástupnými znaky, které určují soubory v adresáři `web-files` webu a které CLI odstraní před nahráním nového sestavení. Toto pole použijte k odstranění zastaralých balíčků hashovaných podle obsahu, aby se na webu nehromadily staré prostředky. Viz Rozdělení kódu a vyčištění sady.
`includeSource`	boolean	Ne	Když `true`, příkaz kromě zkompilovaných souborů odešle i váš zdrojový kód. Výchozí hodnota je `false`.
`sourceExcludePatterns`	string[]	Ne	Vzory se zástupnými znaky pro zdrojové soubory, které se nemají nahrávat. Platí pouze tehdy, když je `includeSource` nastaveno na `true` (například k přeskočení `node_modules` nebo souborů místního prostředí).

Nejpřesnější a nejaktuálnější referenční přehled polí najdete v dokumentu powerpages.config.jsonschéma. Přidejte do konfiguračního souboru odpovídající $schema vlastnost pro povolení ověřování a automatického dokončování v editorech, které podporují schéma JSON.

Ukázka `powerpages.config.json`

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

Stáhněte si web SPA

Pomocí příkazu pac pages download-code-site stáhněte kód existujícího webu do místního adresáře pro účely úprav nebo zálohování.

Syntax

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

Parameters

Parameter	Alias	Povinné	Description
`--environment`	`-env`	Ne	Prostředí Dataverse (GUID nebo úplná adresa URL). Výchozí nastavení je váš aktivní profil ověřování.
`--path`	`-p`	Ano	Místní adresář pro stažení kódu webu
`--webSiteId`	`-id`	Ano	Identifikátor GUID záznamu webové stránky SPA Power Pages
`--overwrite`	`-o`	Ne	Přepsat existující soubory v cílovém adresáři, pokud existují

Příklad

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

Aktivace a testování webu

Přejděte na Power Pages.
Vyberte Neaktivní weby, vyhledejte svůj web a vyberte Znovu aktivovat.
Když je web aktivní, přejděte na adresu URL webu a zkontrolujte nasazení.

Tip

Jakýkoli pozdější příkaz upload-code-site automaticky aktualizuje aktivní web.

Struktura a konfigurace projektu

Konzistentní rozvržení projektu pomáhá zajistit správné chování při nahrávání.

/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

Pomocí volitelného souboru powerpages.config.json můžete přizpůsobit způsob, jak příkaz upload-code-site funguje.

Rozdělení kódu a vyčištění sady

Jak jednostránková aplikace roste, jeden JavaScriptový balík se zvětšuje a načítá se pomalu. Moderní nástroje sestavení tento problém řeší rozdělením kódu. Tato technika rozdělí aplikaci na menší bloky dat, které prohlížeč stáhne na vyžádání (například jenom v případě, že uživatel přejde na konkrétní trasu). Každý blok dat je generován s hashem obsahu v názvu souboru, například Dashboard-BSbmIXoe.js, aby jej prohlížeče mohly dlouhodobě ukládat do mezipaměti a znovu jej stáhly pouze tehdy, když se jeho obsah změní.

Rozdělení kódu zavádí aspekty nasazení jedinečné pro weby Power Pages SPA: protože každé sestavení vytváří nové názvy souborů hash, opakované spuštění upload-code-site by ponechá staré hashované soubory na webu. V mnoha nasazeních se tyto osamocené bloky dat hromadí ve web-files webu. Pole bundleFilePatterns v powerpages.config.json slouží k jejich vyčištění.

Povolení rozdělení kódu

Rozdělení kódu zajišťuje váš nástroj pro sestavení frontendu, nikoli Power Pages, takže zvolený přístup závisí na frameworku a nástroji pro bundlování, které používáte. Nejběžnější technikou je načítat části aplikace pomocí dynamických importů, často na úrovni routy nebo zobrazení, aby se každá část stáhla teprve tehdy, když na ni uživatel přejde (líné načítání).

Balíčky, jako jsou Vite, webpack a esbuild, můžou také explicitně seskupit moduly do pojmenovaných bloků dat. Přesnou konfiguraci najdete v dokumentaci ke svému frameworku a bundleru.

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

Podle toho, který přístup zvolíte, je výsledek stejný a je to ta část, která je důležitá pro nasazení: sestavení generuje více výstupních souborů, z nichž každý má ve svém názvu hodnotu hash obsahu. Vzhledem k tomu, že se tyto hodnoty hash mění při každé změně obsahu souboru, vytvoří každé sestavení jinou sadu názvů souborů. V dalších částech se dozvíte, jak udržovat prostředí Dataverse čistá při změně těchto názvů.

Jak `upload-code-site` čistí zastaralé balíčky

Před nahráním zkompilovaných assetů upload-code-site odstraní všechny soubory v web-files webu, které odpovídají vzoru se zástupnými znaky v bundleFilePatterns, a poté nahraje aktuální sestavení. Tento postup odstranění a následného nahrání zachovává nasazenou sadu souborů totožnou s vaším nejnovějším zkompilovaným výstupem, místo toho, aby se každé sestavení vrstvilo na předchozí.

Aby vyčištění fungovalo, musí vzory se zástupnými znaky v bundleFilePatterns odpovídat názvům souborů, které generuje vaše sestavení. Existují dva způsoby, jak zachovat jejich přesnost, podle toho, jak váš nástroj pro sestavení pojmenovává soubory.

Možnost 1: Uveďte vzory zástupných znaků přímo

Mnoho nástrojů sestavení uchovává stabilní předponu názvu a mění pouze hodnotu hash obsahu, například index-[hash].js. Pokud se názvy výstupních souborů řídí předvídatelným vzorem, jako je tento, uveďte vzor zástupných znaků pro každý z nich v bundleFilePatternssouboru . Není potřeba žádné další nástroje:

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

Vzor se zástupnými znaky, například index-*.js, odpovídá tomuto souboru při každém sestavení bez ohledu na hash. Přidejte jednu položku na výstupní soubor a pokaždé, když sestavení začne vytvářet nový výstupní soubor, přidejte nový vzor.

Možnost 2: Generování vzorů zástupných znaků pomocí skriptu po sestavení

Tento přístup použijte, když názvy výstupních souborů neodpovídají předvídatelnému vzoru nebo když vaše aplikace vytváří mnoho souborů, jejichž názvy se mění při přidávání a odebírání rout, takže ručně udržovaný seznam je náchylný k chybám. Krátký skript, který se spustí po sestavení, zkontroluje zkompilovaný výstup a přepíše bundleFilePatterns se vzorem zástupných znaků pro každý vygenerovaný soubor. Pokud například nástroj sestavení pojmenuje soubory jako [name]-[hash].[ext], skript se zmenšuje Dashboard-BSbmIXoe.js na vzor 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)
}

Vložte skript do sestavení, aby se vždy spouštěl po bundleru:

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

Nyní k nasazení stačí dva příkazy a web nikdy nehromadí osamocené bloky:

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

Po sestavení powerpages.config.json odpovídá přesně aktuálním balíčkům, například:

{
  "$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"
  ]
}

Autentizace a autorizace

Power Pages weby SPA používají stejný model zabezpečení jako tradiční weby Power Pages.

Konfigurace zprostředkovatelů identity

Přejděte na Power Pages.
Najděte svůj web a vyberte Upravit.
VyberteZabezpečení>zprostředkovatele identity.
Přidejte nebo nastavte poskytovatele identity, například Microsoft Entra ID.
Každá nová lokalita má automaticky výchozího poskytovatele Microsoft Entra ID.

Přístup k uživatelskému kontextu v kódu

Získání metadat ověřování na klientovi:

Adresa URL autority:

Adresa URL autority nebo přihlášení pro Microsoft Entra ID je:
```
https://login.windows.net/<tenantId>
```
Vyhledejte adresu URL Authority pro další nakonfigurované zprostředkovatele identity tak, že přejdete na adresu Power Pages><your site>>Security>Zprostředkovatelé identit> nastavení konfigurace.

Podrobnosti uživatele:

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

Ukázka toku React

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>
    );
};

Použití webových rozhraní API Power Pages

Vývojáři můžou pomocí webových rozhraní API Power Pages načíst obsah do uživatelského rozhraní nebo vytvářet, aktualizovat a odstraňovat záznamy. Před použitím těchto rozhraní API se ujistěte, že jsou povolená požadovaná webová rozhraní API a že jsou správně nakonfigurovaná příslušná oprávnění tabulek a webové role.


// 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;
};

Nastavení místního vývoje povolením volání webového rozhraní API z místního hostitele pomocí ověřování Microsoft Entra ID

Vývojáři potřebují rychlejší iterační cykly, místní ladění a možnosti okamžitého načítání změn při vývoji aplikací. SPA podporuje tyto pracovní postupy tím, že umožňuje zabezpečená volání rozhraní webového API z localhost pomocí ověřování Microsoft Entra ID (Azure AD) v1.

Toto nastavení vám umožní:

Spusťte aplikaci místně s plnou podporou ověřování.
Používejte moderní vývojové nástroje, jako Vite, pro rychlé aktualizace a rychlou zpětnou vazbu.
Vyhněte se problémům s CORS při volání webových rozhraní API Power Pages.
Urychlete vývoj bez nasazení změn na portál.

Tato konfigurace umožňuje produktivní místní vývojové prostředí pro SPA, aby vývojáři mohli rychle vytvářet, testovat a iterovat s úplným přístupem k rozhraní API a podporou ověřování.

Important

Používejte pouze koncové body Microsoft Entra v1 pro ověřování.
Ověření pomocí nosiče je podporováno pouze ve verzích portálu 9.7.6.6 nebo novější.
Tato nastavení použijte pouze ve vývojových prostředích.

Kroky konfigurace

Povolit ověřování SPA
1. Na portálu Azure otevřete aplikaci Microsoft Entra zaregistrovanou pro váš portál.
2. Povolte autentizaci pro jednostránkové aplikace (SPA).
3. Přidejte localhost jako identifikátor URI pro přesměrování pomocí konfigurace platformy Single-page application. Další informace najdete v článku Jak přidat identifikátor URI pro přesměrování do aplikace.
  - Identifikátor URI pro přesměrování: http://localhost:<port>/.

Přidání nastavení webu

Přidejte tato nastavení webu v Power Pages:

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

Použití ADAL.js pro ověřování
- Implementace ověřování na straně klienta pomocí ADAL.js.
Note

MSAL.js není kompatibilní, protože Power Pages používá koncové body Microsoft Entra v1, zatímco MSAL používá v2. Formát vystavitele se mezi verzemi liší.
Přidání autorizační hlavičky
- Do všech požadavků webového rozhraní API zahrňte tuto hlavičku:
```
Authorization: Bearer <id_token>
```
Nastavení viditelnosti webu na veřejné
- Toto nastavení umožňuje localhost přístup k webu pro účely vývoje a testování.

Konfigurace vývojového proxy serveru

Pokud používáte Vite, přidejte tento kód, abyste vite.config.js se vyhnuli problémům s CORS:

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

Rozdíly mezi existujícími weby Power Pages

Následující tabulka shrnuje klíčové rozdíly mezi lokalitami SPA vytvořenými s touto funkcí a tradičními weby Power Pages:

funkce	Chování webu SPA
Obnovení na straně serveru	Vždy vrátí kořenovou stránku lokality a směrovač na straně klienta vykreslí dílčí trasy.
Konflikty směrování	Trasy na straně klienta mají přednost a úplné obnovení se vrátí zpět na kořenovou stránku.
Pracovní prostor stránky	Pracovní prostor stránek není podporován. Použijte směrování klienta a stránky webu klienta. Pro zabezpečení na úrovni stránky zkontrolujte přiřazené webové role s globálním objektem uživatele a podmíněně vykreslete uživatelské rozhraní.
Pracovní prostor Formátování	Styling s pracovním prostorem stylů není podporován. Použijte styly vaší architektury, jako jsou CSS, CSS-in-JSnebo třídy nástrojů.
Lokalizace	Podpora jednoho jazyka. Implementujte načítání prostředků na straně klienta.
Šablony Liquid	Kód Liquid a šablony Liquid nejsou podporovány. Přístup k datům pomocí modulu šablon vaší architektury a webových rozhraní API

časté otázky

Jaká podpora je k dispozici pro jednotkové a integrační testování?

V současné době není k dispozici žádná integrovaná podpora pro jednotkové a integrační testování. Tvůrci by měli tyto testy psát a spouštět místně nebo v rámci svých kanálů CI/CD.

Existuje podpora pro integraci Power Fx pomocí WebAssembly?

Tato funkce není momentálně podporována.

Je zdrojový kód k dispozici v Power Pages?

V současné době můžou tvůrci vytvářet weby pomocí TypeScriptu nebo agenta GitHub Copilot. Kompilované soubory JavaScriptu a CSS jsou přístupné a lze je upravovat v Visual Studio Code. Přímé a rozsáhlé úpravy souborů HTML však v současné době nejsou podporovány.

Můžu vytvořit komponentu externě pomocí této funkce a přenést ji na Power Pages web?

Ne, pomocí této funkce nemůžete přenést externě vygenerovanou komponentu do existujícího webu Power Pages.

Můžu přidat předem připravené komponenty, jako jsou seznamy a formuláře?

Přidávání předem připravených komponent, jako jsou seznamy a formuláře, se v současné době nepodporuje. Vlastní formuláře a seznamy ale můžete vytvářet pomocí rozhraní React Framework a webových rozhraní API.

Mohu v pracovním prostoru Nastavení povolit web typu SPA jako PWA?

No. Weby typu SPA nepodporují nastavení pro progresivní webovou aplikaci (PWA) v části nastavit pracovní prostor. Toto omezení znamená, že sekci Mobilní nemůžete použít k povolení webu jako aplikace PWA. Pokud chcete přidat možnosti PWA, například instalovatelné aplikace a offline stránky, implementujte je do kódu architektury. Přidejte například manifest webové aplikace a pracovní proces služby.

Jak funguje správa zdrojového kódu?

Vývojáři můžou pro správu zdrojového kódu použít integraci Git Power Platform. Do úložiště jsou však přidány pouze zkompilované webové soubory, nikoli úplný zdrojový kód.

Podporují tyto weby SEO?

Protože weby SPA jsou vytvořeny pomocí frameworku React a používají vykreslování na straně klienta, je podpora SEO omezená.

Jakou podporu zabezpečení a řízení nabízejí weby SPA v rámci Power Pages?

Power Pages vynucuje oprávnění tabulek a webové role zabezpečení u volání webového rozhraní API a zajišťuje, aby přístup k datům odpovídal uživatelským rolím. Pomocí objektu window["Microsoft"].Dynamic365.Portal.User můžete načíst základní vlastnosti uživatele a přizpůsobit prostředí na základě uživatelských osob.

Stránky SPA navíc podporují:

Konfigurace veřejného a privátního webu
Nastavení zásad správného řízení, včetně kontroly nad anonymním přístupem k datům
Konfigurace zprostředkovatele ověřování

Tyto funkce pomáhají zajistit zabezpečenou a vyhovující integraci vlastních komponent v rámci Power Pages.

Váš názor

Byla tato stránka užitečná?

Last updated on 2026-07-21

Vytvoření a nasazení jednostrákové aplikace v Power Pages

Předpoklady

Povolit nahrávání souborů JavaScriptu

Vytvoření a nasazení webu SPA

Nahrání webu SPA

Syntax

Parameters

Příklad

Definování parametrů nahrání pomocí powerpages.config.json

Pole konfigurace

Ukázka powerpages.config.json

Stáhněte si web SPA

Syntax

Parameters

Příklad

Aktivace a testování webu

Struktura a konfigurace projektu

Rozdělení kódu a vyčištění sady

Povolení rozdělení kódu

Jak upload-code-site čistí zastaralé balíčky

Možnost 1: Uveďte vzory zástupných znaků přímo

Možnost 2: Generování vzorů zástupných znaků pomocí skriptu po sestavení

Autentizace a autorizace

Konfigurace zprostředkovatelů identity

Přístup k uživatelskému kontextu v kódu

Ukázka toku React

Použití webových rozhraní API Power Pages

Nastavení místního vývoje povolením volání webového rozhraní API z místního hostitele pomocí ověřování Microsoft Entra ID

Kroky konfigurace

Rozdíly mezi existujícími weby Power Pages

časté otázky

Jaká podpora je k dispozici pro jednotkové a integrační testování?

Existuje podpora pro integraci Power Fx pomocí WebAssembly?

Je zdrojový kód k dispozici v Power Pages?

Můžu vytvořit komponentu externě pomocí této funkce a přenést ji na Power Pages web?

Můžu přidat předem připravené komponenty, jako jsou seznamy a formuláře?

Mohu v pracovním prostoru Nastavení povolit web typu SPA jako PWA?

Jak funguje správa zdrojového kódu?

Podporují tyto weby SEO?

Jakou podporu zabezpečení a řízení nabízejí weby SPA v rámci Power Pages?

Související informace

Váš názor

Další materiály

Definování parametrů nahrání pomocí `powerpages.config.json`

Ukázka `powerpages.config.json`

Jak `upload-code-site` čistí zastaralé balíčky