Ustvarite in namestite enostransko aplikacijo v Power Pages

Power Pages podpira integracijo enostranske aplikacijske kode (SPA), ustvarjene z orodji naslednje generacije, podprtimi z umetno inteligenco, kot je GitHub Copilot. Ta zmogljivost razvijalcem omogoča, da v Power Pages vnesejo sodobne, komponentno temelječe izkušnje sprednjega dela z uporabo naravnega jezika kot vmesnika za programiranje.

Z vodenjem, testiranjem in izpopolnjevanjem kode, ki jo ustvari umetna inteligenca, lahko ustvarjalci svojo pozornost preusmerijo s ponavljajočih se implementacijskih nalog na orkestracijo na višji ravni. Ta pristop omogoča bolj intuitivni in ustvarjalni razvoj, hkrati pa ohranja kakovost in standarde na ravni podjetja.

V tem članku je prikazano, kako:

Ustvarite in nastavite SPA projekt za Power Pages z uporabo Power Platform CLI (PAC CLI).
Nalagajte in prenašajte kodne vsebine na in z vaše Power Pages strani.
Vzpostavite varno in vzdržno strukturo projekta.
Spoznajte ključne razlike med implementacijami na osnovi SPA in tradicionalnimi Power Pages.

opomba,

SPA stran je Power Pages stran, ki deluje v celoti v uporabnikovem brskalniku (upodabljanje na strani odjemalca). Za razliko od tradicionalnih Power Pages strani upravljate le s pomočjo izvorne kode in ukaznih vmesnikov (CLI).
Power Platform Git integracija ni podprt za spletne strani Single-Page aplikacij (SPA) v Power Pages.

Zahteve

Preden začnete, se prepričajte, da imate:

Okolje Power Pages z administratorskimi pravicami.
Power Platform Nameščen in overjen je vmesnik CLI (PAC CLI) različice 1.44.x ali novejše.
Spletna stran Power Pages v različici 9.7.4.x ali novejši.
Omogočite nalaganje datotek v JavaScript okoljih v Dataverse.
Lokalni Git repozitorij z vašim prilagojenim front-end projektom, kot so React, Angular ali Vue.

Dovolite nalaganje JavaScript datotek

Privzeto nekatera okolja Dataverse blokirajo nalaganje.js JavaScript () datotek. Če naletite na napako "Uvoz neuspešen: Priponka ni veljavna ali je prevelika. Ni ga mogoče naložiti ali prenesti.«, posodobite nastavitve okolja, da dovolite to vrsto datoteke.

Če želite prilagoditi nastavitve v skrbniškem središču za okolje, sledite tem korakom: Power Platform

Vpišite se v skrbniško središče za Power Platform.
V navigacijski plošči izberite Upravljanje.
V podoknu Upravljanje izberite Okolja.
Izberite okolje.
V ukazni vrstici izberite Nastavitve.
Razširite Izdelek in nato izberite Zasebnost + varnost.
V razdelku Blokirane priloge odstranite js iz seznama končnic datotek.
Izberite možnost Shrani.

Ustvarjanje in uvajanje spletnega mesta SPA

Power Pages SPA lokacije se upravljajo z ukazi PAC CLI upload-code-site in download-code-site. Ko naložiš stran, se pojavi v Power Pages na seznamu Neaktivne strani. Aktivirajte spletno mesto, da bo na voljo uporabnikom.

Naložite spletno mesto SPA

Uporabite ukaz pac pages upload-code-site za nalaganje lokalnega izvora in prevedenih sredstev v Power Pages okolje.

Sintaksa

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

Parametri

Parameter	Vzdevek	Zahtevano	Description
`--rootPath`	`-rp`	Da	Lokalna mapa, ki vsebuje izvorne datoteke vaše strani
`--compiledPath`	`-cp`	Ne	Pot do prevedenih sredstev, kot je React `build`
`--siteName`	`-sn`	Ne	Prikazno ime za vašo Power Pages stran

Primer

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

Če nimate obstoječega projekta, poskusite vzorčne implementacije spletnih mest SPA z uporabo React, Angular in Vue.

Določanje parametrov nalaganja z `powerpages.config.json`

Prilagodite obnašanje ukaza upload-code-site tako, da datoteko powerpages.config.json vključite v korensko mapo vaše strani. Ko je ta datoteka prisotna, zaženite upload-code-site samo s parametrom --rootPath . Ukaz prebere preostale vrednosti iz konfiguracijske datoteke. Če navedete tako ukazne argumente kot konfiguracijske vrednosti, imajo ukazni argumenti prednost.

Polja konfiguracije

Polje	Tip	Zahtevano	Description
`siteName`	niz	Da	Prikazno ime za spletno stran Power Pages.
`compiledPath`	niz	Da	Pot do prevedene izhodne mape (na primer mape Vite `dist` ali React `build` ), glede na `powerpages.config.json`.
`defaultLandingPage`	niz	Da	HTML stran je postrežena ob odprtju korena strani, glede na `compiledPath` (običajno `index.html`).
`bundleFilePatterns`	niz []	Ne	Seznam nepredvidljivih vzorcev, ki identificirajo datoteke na straneh `web-files` , ki jih CLI odstrani pred nalaganjem nove različice. Uporabite to polje za čiščenje zastarelih, vsebinsko zgoščenih paketov, da se stari elementi ne kopičijo na strani. Glej razdeljevanje kode in čiščenje paketov.
`includeSource`	Logična vrednost	Ne	Ko `true`, ukaz naloži vašo izvorno kodo poleg prevedenih sredstev. Privzeto je .`false`
`sourceExcludePatterns`	niz []	Ne	Vzorce z nepredvidljivimi znaki za izvorne datoteke, ki jih je treba izključiti iz nalaganja. Velja le, ko `includeSource` je ( `true` na primer za preskok `node_modules` ali lokalne okoljske datoteke).

Za najbolj natančno in up-to-datumsko referenco na polje glejte shemopowerpages.config.json. Dodajte lastnost ujemanja $schema v svojo konfiguracijsko datoteko, da omogočite validacijo in samodejno dopolnjevanje v urejevalnikih, ki podpirajo JSON Schema.

Vzorec `powerpages.config.json`

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

Prenesite spletno mesto SPA

Z ukazom pac pages download-code-site prenesite kodo obstoječega spletnega mesta v lokalni imenik za namene urejanja ali varnostnega kopiranja.

Sintaksa

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

Parametri

Parameter	Vzdevek	Zahtevano	Description
`--environment`	`-env`	Ne	Dataverse okolje (GUID ali celoten URL). Privzeto se uporabi vaš aktivni profil za preverjanje pristnosti
`--path`	`-p`	Da	Lokalni imenik za prenos kode spletnega mesta
`--webSiteId`	`-id`	Da	GUID zapisa spletne strani Power Pages SPA
`--overwrite`	`-o`	Ne	Prepiši obstoječe datoteke v ciljnem imeniku, če obstajajo

Primer

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

Aktivirajte in preizkusite svojo spletno stran

Pojdi na Power Pages.
Izberite Neaktivna spletna mesta, poiščite svoje spletno mesto in izberite Ponovno aktiviraj.
Ko je spletno mesto aktivno, pojdite na URL svojega spletnega mesta, da preverite uvajanje.

Nasvet

Vsak kasnejši ukaz samodejno posodobi aktivno spletno mesto. upload-code-site

Struktura in konfiguracija projekta

Dosledna postavitev projekta pomaga zagotoviti pravilno delovanje nalaganja.

/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

Za prilagoditev delovanja ukaza powerpages.config.json uporabite izbirno datoteko upload-code-site .

Razdeljevanje kode in čiščenje paketov

Ko enostranska aplikacija raste, postane en sam JavaScript paket velik in počasen za nalaganje. Sodobna orodja za gradnjo odpravijo to težavo z razdelitvijo kode. Ta tehnika prekine aplikacijo na manjše dele, ki jih brskalnik prenese na zahtevo (na primer le, ko se uporabnik premakne na določeno pot). Vsak kos je prikazan z vsebinsko zgoščeno vrednostjo v imenu datoteke, na primer Dashboard-BSbmIXoe.js, tako da ga lahko brskalniki shranijo v predpomnilnik za daljša obdobja in ga ponovno prenesejo šele, ko se vsebina spremeni.

Deljenje kode uvaja vidik nameščanja, ki je edinstven za Power Pages SPA lokacije: ker vsaka različica ustvari nova zgoščena imena datotek, so ponavljajoči upload-code-site zagoni pustili stare zgoščene datoteke na strani. Skozi številne namestitve se ti osiroteli deli kopičijo v območju web-fileslokacije. Polje bundleFilePatterns obstaja powerpages.config.json zato, da jih očisti.

Omogočite razdeljevanje kode

Razdeljevanje kode ureja vaše orodje za front-end gradnjo, ne Power Pages, zato je pristop odvisen od ogrodja in bundlerja, ki ga uporabljate. Najpogostejša tehnika je nalaganje delov aplikacije z dinamičnimi uvozi, ki se pogosto uporabljajo na ravni poti ali pogleda, tako da se vsak del prenese šele, ko uporabnik pride do njega (leno nalaganje).

Bundlerji, kot so Vite, webpack in esbuild, lahko prav tako eksplicitno združujejo module v poimenovane dele. Za natančno konfiguracijo si oglejte dokumentacijo za vaš framework in 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

Ne glede na to, kateri pristop izberete, je rezultat enak in to je tisto, kar je pomembno za uvajanje: gradnja prikaže več izhodnih datotek, vsaka z vsebinskim hashom v imenu. Ker se te zgoščene vrednosti spremenijo vsakič, ko se vsebina datoteke spremeni, vsaka različica ustvari drugačen nabor imen datotek. Naslednji razdelki pojasnjujejo, kako ohraniti svoja okolja v Dataverse čista, ko se ta imena spreminjajo.

Kako `upload-code-site` očisti zastarele snope

Pred nalaganjem prevedenih vsebin izbriše vse datoteke na straniupload-code-site, web-files ki ustrezajo nepredvidljivemu vzorcu v , bundleFilePatternsnato naloži trenutno različico. To obnašanje brisanja in nalaganja ohranja nameščeni nabor datotek enak vašemu najnovejšemu prevedenemu izhodu, namesto da bi vsako gradnjo nalagali na prejšnjo.

Da bi čiščenje delovalo, morajo vzorci wildcard v bundleFilePatterns ustrezati imenom datotek, ki jih izda vaša gradnja. Obstajata dva načina, kako jih ohraniti natančne, odvisno od tega, kako vaše orodje za gradnjo poimenuje datoteke.

Možnost 1: Neposredno navedete vzorce divjih kart

Mnoga orodja za gradnjo ohranijo predpono stabilnega imena in spremenijo le hash vsebine, kot je .index-[hash].js Ko imena izhodnih datotek sledijo predvidljivemu vzorcu, kot je ta, navedite vzorec za vsako bundleFilePatternsv . Dodatna orodja niso potrebna:

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

Vzorec divjih kartic, kot je primer, se ujema index-*.js s to datoteko pri vsaki sestavi, ne glede na hash. Dodaj en vnos na izhodno datoteko in dodaj nov vzorec vsakič, ko tvoja gradnja začne ustvarjati novo izhodno datoteko.

Možnost 2: Generirajte vzorce divjih kart s skripto po sestavi

Uporabite ta pristop, kadar imena izhodnih datotek ne sledijo predvidljivemu vzorcu ali ko aplikacija ustvari veliko datotek, katerih imena se spreminjajo, ko dodajate in odstranjujete poti, kar naredi ročno vzdrževan seznam nagnjen k napakam. Kratek skript, ki se izvede po sestavi, pregleda prevedeni izhod in ga ponovno napiše bundleFilePatterns z vzorcem wildcard za vsako izdano datoteko. Na primer, ko orodje za gradnjo poimenuje datoteke kot [name]-[hash].[ext], se skripta reducira Dashboard-BSbmIXoe.js na vzorec 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)
}

Poveži skripto v svoj build, da vedno teče po bundlerju:

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

Zdaj je namestitev dva ukaza, in lokacija nikoli ne nabira osiromulih delov:

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

Po sestavi odraža powerpages.config.json natančne trenutne snope, na primer:

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

Preverjanje pristnosti in avtorizacija

Power Pages SPA strani uporabljajo isti varnostni model kot tradicionalne Power Pages lokacije.

Konfigurirajte ponudnike identitete

Pojdi na Power Pages.
Poiščite svoje spletno mesto in izberite Uredi.
Izberite>Ponudniki varnostnih identitet.
Dodaj ali nastavi identitetne ponudnike, kot Microsoft Entra ID.
Vsaka nova lokacija ima samodejno privzetega ponudnika Microsoft Entra ID.

Dostop do uporabniškega konteksta v kodi

Pridobite metapodatke za preverjanje pristnosti na odjemalcu:

URL avtoritete:

Avtoritativni ali prijavni URL za Microsoft Entra ID je:
```
https://login.windows.net/<tenantId>
```
Poiščite Authority URL za druge konfigurirane ponudnike identitet tako, da obiščete nastavitve konfiguracije Power Pages><your site>>Security>Identity providers> nastavitve konfiguracije.

Podrobnosti o uporabniku:

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

Vzorčni potek delovanja Reacta

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

Uporabite spletne API-je Power Pages

Razvijalci lahko uporabijo spletne API-je Power Pages za nalaganje vsebine v uporabniški vmesnik ali za ustvarjanje, posodabljanje in brisanje zapisov. Pred uporabo teh API-jev se prepričajte, da so potrebni spletni API-ji omogočeni in da so ustrezna dovoljenja za tabele ter spletne vloge pravilno konfigurirana.


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

Nastavitev lokalnega razvoja z omogočanjem spletnih API klicev iz localhosta z uporabo Microsoft Entra ID avtentikacije

Razvijalci potrebujejo hitrejše cikle iteracije, lokalno odpravljanje napak in zmogljivosti vročega ponovnega nalaganja pri gradnji aplikacij. SPA podpira te delovne procese z omogočanjem varnih spletnih API klicev iz localhost z uporabo avtentikacije Microsoft Entra ID (Azure AD) v1.

Ta nastavitev vam omogoča:

Zaženite aplikacijo lokalno s popolno podporo za preverjanje pristnosti.
Uporabite sodobna razvojna orodja, kot je Vite, za vroče ponovno nalaganje in hitre povratne informacije.
Izogibajte se težavam s CORS pri klicanju Power Pages spletnih API-jev.
Pospešite razvoj brez uvajanja sprememb na portalu.

Ta konfiguracija omogoča produktivno lokalno razvojno izkušnjo za SPA, tako da lahko razvijalci hitro gradijo, testirajo in iterirajo s polno podporo za dostop do API-jev in avtentikacijo.

Pomembno

Za avtentikacijo uporabljajte samo Microsoft Entra v1 končne točke.
Preverjanje pristnosti nosilca je podprto samo v različicah portala 9.7.6.6 ali novejših.
Te nastavitve uporabite samo v razvojnih okoljih.

Koraki konfiguracije

Omogočanje preverjanja pristnosti SPA
1. V Azure portalu odprite aplikacijo Microsoft Entra, ki je registrirana za vaš portal.
2. Omogočite preverjanje pristnosti aplikacije za eno stran (SPA ).
3. Dodajte localhost URI kot preusmeritev z uporabo konfiguracije enostranske aplikacijske platforme. Za več informacij glejte Kako dodati URI za preusmeritev v svojo prijavo.
  - URI preusmeritve: http://localhost:<port>/.

Dodajanje nastavitev mesta

Dodajte te site settings v Power Pages:

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

Uporabite ADAL.js za avtentikacijo
- Implementirajte avtentikacijo na strani odjemalca z uporabo ADAL.js.
opomba,

MSAL.js ni združljiv, ker Power Pages uporablja Microsoft Entra v1 končne točke, medtem ko MSAL uporablja v2. Oblika izdajatelja se razlikuje med različicami.
Dodajanje avtorizacijske glave
- Vključite to glavo v vse zahteve spletnega API-ja:
```
Authorization: Bearer <id_token>
```
Nastavitev vidnosti spletnega mesta na javno
- Ta nastavitev omogoča localhost dostop do spletnega mesta za namene razvoja in preskušanja.

Konfiguracija razvojnega strežnika proxy

Če uporabljaš Vite, dodaj to kodo, da vite.config.js se izogneš težavam s CORS:

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

Razlike v primerjavi z obstoječimi Power Pages spletnimi stranmi

Naslednja tabela povzema ključne razlike med SPA spletnimi mesti, ustvarjenimi s to funkcijo, in tradicionalnimi Power Pages spletnimi mesti:

Funkcija	Obnašanje spletnega mesta SPA
Osvežitev na strani strežnika	Vedno vrne korensko stran strani, usmerjevalnik na strani odjemalca pa upodablja podpoti.
Konflikti poti	Poti na strani odjemalca imajo prednost, trda osvežitev pa se vrne na koren.
Delovni prostor strani	Delovni prostor strani ni podprt. ... Uporabite usmerjanje odjemalcev in strani spletnega mesta odjemalca. Za varnost na ravni strani preverite dodeljene spletne vloge z globalnim uporabniškim objektom in pogojno upodobite uporabniški vmesnik.
Delovni prostor za slog	Oblikovanje z delovnim prostorom slogov ni podprto. Uporabi oblikovanje svojega ogrodja, kot so CSS, CSS-in-JSali uporabniški razredi.
Lokalizacija	Podpora za en jezik. Implementirajte nalaganje virov na strani odjemalca.
Tekoče predloge	Koda Liquid in predloge Liquid niso podprte. Dostop do podatkov z uporabo predloge vašega ogrodja in spletnih API-jev.

pogosta vprašanja

Kakšna podpora je na voljo za enotno in integracijsko testiranje?

Trenutno ni vgrajene podpore za enotno in integracijsko testiranje. Proizvajalci bi morali te teste napisati in izvesti lokalno ali znotraj svojih cevovodov CI/CD.

Ali obstaja podpora za integracijo z uporabo WebAssembly? Power Fx

Ta zmogljivost trenutno ni podprta.

Ali je izvorna koda na voljo v Power Pages?

Trenutno lahko ustvarjalci izdelujejo spletne strani z uporabo TypeScript ali GitHub Copilot Agent. Prevedene datoteke JavaScript in CSS so dostopne in jih je mogoče urejati v Visual Studio Code. Vendar pa neposredno in obsežno urejanje datotek HTML trenutno ni podprto.

Ali lahko z uporabo te funkcije ustvarim komponento zunaj in jo prenesem na Power Pages spletno stran?

Ne, z uporabo te funkcije ne morete prenesti zunanje generirane komponente na obstoječo Power Pages stran.

Ali lahko dodam vnaprej pripravljene komponente, kot so seznami in obrazci?

Dodajanje vnaprej pripravljenih komponent, kot so seznami in obrazci, trenutno ni podprto. Vendar pa lahko ustvarite prilagojene obrazce in sezname z uporabo React ogrodja in spletnih API-jev.

Ali lahko omogočim mesto SPA kot PWA iz delovnega prostora za nastavitev?

Ne. Spletna mesta SPA ne podpirajo napredne nastavitve spletnega programa (PWA) v nastavljenem delovnem prostoru. Ta omejitev pomeni, da razdelka Mobile ne morete uporabiti za omogočanje spletnega mesta kot aplikacije PWA. Če želite dodati zmogljivosti programa PWA, kot so izkušnje namestitvene aplikacije in strani brez povezave, jih uvedi v kodo ogrodja. Dodajte na primer manifest spletne aplikacije in servisnega delavca.

Kako deluje nadzor virov?

Razvijalci lahko za nadzor izvorne kode uporabijo integracijo Gita. Power Platform Vendar pa se v repozitorij dodajo samo prevedene spletne datoteke, ne pa celotne izvorne kode.

Ali ta spletna mesta podpirajo SEO?

Ker so spletna mesta SPA zgrajena z ogrodjem React in uporabljajo upodabljanje na strani odjemalca, je podpora za SEO omejena.

Katero podporo za varnost in upravljanje Power Pages ponujajo SPA strani?

Power Pages uveljavlja dovoljenja za tabele in varnostne spletne vloge pri klicih spletnih API-jev, kar zagotavlja, da je dostop do podatkov usklajen z uporabniškimi vlogami. Uporabite objekt window["Microsoft"].Dynamic365.Portal.User za pridobivanje osnovnih uporabniških lastnosti in prilagajanje izkušenj na podlagi uporabniških person.

Poleg tega spletna mesta SPA podpirajo:

Konfiguracije javnih in zasebnih spletnih mest
Nastavitve upravljanja, vključno z nadzorom nad anonimnim dostopom do podatkov
Konfiguracije ponudnika preverjanja pristnosti

Te funkcije pomagajo zagotoviti varno in skladno integracijo prilagojenih komponent znotraj Power Pages.

Povratne informacije

Ali je bila ta stran uporabna?

Last updated on 2026-07-21

Ustvarite in namestite enostransko aplikacijo v Power Pages

Zahteve

Dovolite nalaganje JavaScript datotek

Ustvarjanje in uvajanje spletnega mesta SPA

Naložite spletno mesto SPA

Sintaksa

Parametri

Primer

Določanje parametrov nalaganja z powerpages.config.json

Polja konfiguracije

Vzorec powerpages.config.json

Prenesite spletno mesto SPA

Sintaksa

Parametri

Primer

Aktivirajte in preizkusite svojo spletno stran

Struktura in konfiguracija projekta

Razdeljevanje kode in čiščenje paketov

Omogočite razdeljevanje kode

Kako upload-code-site očisti zastarele snope

Možnost 1: Neposredno navedete vzorce divjih kart

Možnost 2: Generirajte vzorce divjih kart s skripto po sestavi

Preverjanje pristnosti in avtorizacija

Konfigurirajte ponudnike identitete

Dostop do uporabniškega konteksta v kodi

Vzorčni potek delovanja Reacta

Uporabite spletne API-je Power Pages

Nastavitev lokalnega razvoja z omogočanjem spletnih API klicev iz localhosta z uporabo Microsoft Entra ID avtentikacije

Koraki konfiguracije

Razlike v primerjavi z obstoječimi Power Pages spletnimi stranmi

pogosta vprašanja

Kakšna podpora je na voljo za enotno in integracijsko testiranje?

Ali obstaja podpora za integracijo z uporabo WebAssembly? Power Fx

Ali je izvorna koda na voljo v Power Pages?

Ali lahko z uporabo te funkcije ustvarim komponento zunaj in jo prenesem na Power Pages spletno stran?

Ali lahko dodam vnaprej pripravljene komponente, kot so seznami in obrazci?

Ali lahko omogočim mesto SPA kot PWA iz delovnega prostora za nastavitev?

Kako deluje nadzor virov?

Ali ta spletna mesta podpirajo SEO?

Katero podporo za varnost in upravljanje Power Pages ponujajo SPA strani?

Sorodne informacije

Povratne informacije

Dodatni viri

Določanje parametrov nalaganja z `powerpages.config.json`

Vzorec `powerpages.config.json`

Kako `upload-code-site` očisti zastarele snope