Membuat dan menyebarkan aplikasi satu halaman di Power Pages

Power Pages mendukung integrasi kode aplikasi halaman tunggal (SPA) yang dibuat dengan alat yang dibantu AI generasi berikutnya, seperti GitHub Copilot. Kemampuan ini memungkinkan pengembang menghadirkan pengalaman front-end modern berbasis komponen ke dalam Power Pages dengan menggunakan bahasa alami sebagai antarmuka pengodean.

Dengan membimbing, menguji, dan menyempurnakan kode yang dihasilkan AI, pembuat dapat mengalihkan fokus mereka dari tugas implementasi berulang ke orkestrasi tingkat yang lebih tinggi. Pendekatan ini memberdayakan pengembangan yang lebih intuitif dan kreatif sambil mempertahankan kualitas dan standar tingkat perusahaan.

Artikel ini memperlihatkan kepada Anda cara:

Buat dan siapkan proyek SPA untuk Power Pages dengan menggunakan Power Platform CLI (PAC CLI).
Unggah dan unduh aset kode ke dan dari situs Power Pages Anda.
Menyiapkan struktur proyek yang aman dan dapat dipelihara.
Pelajari perbedaan utama antara implementasi Power Pages berbasis SPA dan tradisional.

Note

Situs SPA adalah situs Power Pages yang berjalan sepenuhnya di browser pengguna (penyajian sisi klien). Tidak seperti situs Power Pages tradisional, Anda mengelola situs SPA hanya melalui kode sumber dan alat antarmuka baris perintah (CLI).
Integrasi Power Platform Git tidak didukung untuk situs web Aplikasi Single-Page (SPA) di Power Pages.

Prasyarat

Sebelum mulai, pastikan bahwa Anda memiliki:

Lingkungan Power Pages dengan hak istimewa administrator.
Power Platform CLI (PAC CLI) versi 1.44.x atau yang lebih baru diinstal dan diautentikasi.
Situs Power Pages pada versi 9.7.4.x atau yang lebih baru.
Izinkan unggahan file JavaScript di lingkungan Dataverse.
Repositori Git lokal dengan proyek front-end kustom Anda, seperti React, Angular, atau Vue.

Perbolehkan unggahan file JavaScript

Secara default, beberapa lingkungan Dataverse memblokir pengunggahan file JavaScript (.js). Jika Anda mengalami kesalahan "Impor gagal: Lampiran bukan jenis yang valid atau terlalu besar. Ini tidak dapat diunggah atau diunduh.", perbarui pengaturan lingkungan Anda untuk mengizinkan jenis file ini.

Untuk menyesuaikan setelan di Power Platform pusat admin untuk lingkungan, ikuti langkah-langkah berikut:

Masuk ke pusat admin Power Platform.
Di panel navigasi, pilih Kelola.
Di panel Kelola, pilih Lingkungan.
Pilih lingkungan.
Di bilah perintah, pilih Pengaturan.
Luaskan Produk, lalu pilih Privasi + Keamanan.
Di bagian Lampiran yang Diblokir , hapus js dari daftar ekstensi file.
Pilih Simpan.

Membuat dan menyebarkan situs SPA

situs Power Pages SPA dikelola menggunakan perintah PAC CLI upload-code-site dan download-code-site. Setelah Anda mengunggah situs, situs tersebut muncul di Power Pages dalam daftar situs Inactive. Aktifkan situs untuk membuatnya tersedia bagi pengguna.

Mengunggah situs SPA

Gunakan perintah pac pages upload-code-site untuk mengunggah sumber lokal dan aset yang dikompilasi ke lingkungan Power Pages Anda.

Syntax

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

Parameters

Parameter	Alias	Required	Deskripsi
`--rootPath`	`-rp`	Yes	Folder lokal yang memiliki file sumber situs Anda
`--compiledPath`	`-cp`	No	Jalur ke aset yang dikompilasi, seperti React `build`
`--siteName`	`-sn`	No	Nama tampilan untuk situs Power Pages Anda

Example

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

Jika Anda tidak memiliki proyek yang sudah ada, coba implementasi sampel situs SPA menggunakan React, Angular, dan Vue.

Menentukan parameter unggahan dengan `powerpages.config.json`

Kustomisasi perilaku upload-code-site perintah dengan menyertakan powerpages.config.json file di folder akar situs Anda. Saat file ini ada, jalankan upload-code-site hanya dengan parameter --rootPath. Perintah membaca nilai yang tersisa dari file konfigurasi. Jika Anda menyediakan argumen baris perintah dan nilai konfigurasi, argumen baris perintah lebih diutamakan.

Bidang konfigurasi

Ladang	Type	Required	Deskripsi
`siteName`	string	Yes	Nama tampilan untuk situs Power Pages.
`compiledPath`	string	Yes	Jalur ke direktori output yang dikompilasi (misalnya, folder Vite `dist` atau React `build` ), relatif terhadap `powerpages.config.json`.
`defaultLandingPage`	string	Yes	Halaman HTML disajikan ketika akar situs dibuka, relatif terhadap `compiledPath` (biasanya `index.html`).
`bundleFilePatterns`	string[]	No	Daftar pola wildcard yang mengidentifikasi file dalam `web-files` situs yang dihapus CLI sebelum mengunggah build baru. Gunakan bidang ini untuk membersihkan bundel yang usang dan di-hash konten sehingga aset lama tidak terakumulasi di situs. Lihat Pemisahan kode dan pembersihan bundel.
`includeSource`	Boolean	No	Saat `true`, perintah mengunggah kode sumber Anda di samping aset terkompilasi. Secara default menjadi `false`.
`sourceExcludePatterns`	string[]	No	Pola wildcard untuk file sumber yang dikecualikan dari pengunggahan. Hanya berlaku ketika `includeSource` adalah `true` (misalnya, untuk melompati `node_modules` atau file lingkungan lokal).

Untuk referensi field yang paling akurat dan terbaru, lihat powerpages.config.json skema. Tambahkan properti yang $schema cocok ke file konfigurasi Anda untuk mengaktifkan validasi dan lengkapi otomatis di editor yang mendukung Skema JSON.

Contoh `powerpages.config.json`

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

Unduh situs SPA

Gunakan perintah pac pages download-code-site untuk mengunduh kode situs yang ada ke direktori lokal untuk tujuan pengeditan atau pencadangan.

Syntax

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

Parameters

Parameter	Alias	Required	Deskripsi
`--environment`	`-env`	No	Lingkungan Dataverse (GUID atau URL lengkap). Default ke profil autentikasi aktif Anda
`--path`	`-p`	Yes	Direktori lokal untuk mengunduh kode situs
`--webSiteId`	`-id`	Yes	GUID rekaman situs web di situs SPA Power Pages
`--overwrite`	`-o`	No	Timpa file yang ada di direktori target jika ada

Example

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

Aktifkan dan uji situs Anda

Buka Power Pages.
Pilih Situs tidak aktif, temukan situs Anda, dan pilih Aktifkan kembali.
Saat situs aktif, buka URL situs Anda untuk memeriksa penyebaran.

Tip

Setiap perintah upload-code-site yang lebih baru secara otomatis memperbarui situs aktif.

Struktur dan konfigurasi proyek

Tata letak proyek yang konsisten membantu memastikan perilaku upload yang benar.

/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

Gunakan file powerpages.config.json opsional untuk menyesuaikan cara kerja perintah upload-code-site.

Pemisahan kode dan pembersihan bundel

Seiring bertambahnya aplikasi satu halaman, satu bundel JavaScript menjadi besar dan lambat dimuat. Alat build modern menyelesaikan masalah ini dengan pemisahan kode. Teknik ini memecah aplikasi menjadi potongan yang lebih kecil yang diunduh browser sesuai permintaan (misalnya, hanya ketika pengguna menavigasi ke rute tertentu). Setiap gugus dipancarkan dengan hash konten dalam nama filenya, seperti Dashboard-BSbmIXoe.js, sehingga browser dapat menyimpannya dalam jangka waktu yang lama dan mengunduhnya kembali hanya ketika kontennya berubah.

Pemisahan kode menghadirkan pertimbangan penyebaran unik untuk situs SPA Power Pages: karena setiap build menghasilkan nama file baru dengan hash, menjalankan eksekusi upload-code-site berulang kali akan menyisakan file lama dengan hash di situs. Selama banyak penyebaran, gugus tidak berinduk ini terakumulasi di situs web-files. Bidang bundleFilePatterns di powerpages.config.json berfungsi untuk membersihkannya.

Mengaktifkan pemisahan kode

Pemisahan kode ditangani oleh alat build front-end Anda, bukan dengan Power Pages, sehingga pendekatan tergantung pada kerangka kerja dan bunder yang Anda gunakan. Teknik yang paling umum adalah memuat bagian-bagian aplikasi dengan impor dinamis, yang sering diterapkan di tingkat rute atau tampilan sehingga setiap bagian hanya akan dimuat saat pengguna membuka bagian tersebut (lazy loading).

Bunder seperti Vite, webpack, dan esbuild juga dapat mengelompokkan modul ke dalam potongan bernama secara eksplisit. Untuk konfigurasi yang persis, lihat dokumentasi framework dan bundler Anda.

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

Pendekatan mana pun yang Anda pilih, hasilnya tetap sama, dan inilah bagian yang penting untuk deployment: proses build menghasilkan beberapa berkas output, yang masing-masing memiliki hash konten pada namanya. Karena hash tersebut berubah setiap kali konten file berubah, setiap build menghasilkan sekumpulan nama file yang berbeda. Bagian berikutnya menjelaskan cara menjaga lingkungan Dataverse Anda tetap bersih saat nama-nama tersebut berubah.

Cara `upload-code-site` membersihkan bundel basi

Sebelum mengunggah aset yang dikompilasi, upload-code-site menghapus setiap file dalam web-files situs yang cocok dengan pola wildcard di bundleFilePatterns, lalu mengunggah build saat ini. Perilaku delete-then-upload ini menjaga set file yang disebarkan identik dengan output terkompilasi terbaru Anda alih-alih melapisi setiap build di atas yang sebelumnya.

Agar proses pembersihan berfungsi, pola wildcard di bundleFilePatterns harus cocok dengan nama file yang dihasilkan oleh proses build Anda. Ada dua cara untuk membuatnya tetap akurat, tergantung pada cara alat build Anda menamai file.

Opsi 1: Cantumkan pola wildcard secara langsung

Banyak alat build menyimpan awalan nama yang stabil dan hanya mengubah hash konten, seperti index-[hash].js. Saat nama file output Anda mengikuti pola yang dapat diprediksi seperti ini, daftarkan pola wildcard untuk masing-masing di bundleFilePatterns. Tidak diperlukan alat tambahan:

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

Pola wildcard seperti index-*.js akan cocok dengan file itu di setiap build, terlepas dari hash. Tambahkan satu entri per file output, dan tambahkan pola baru setiap kali build Anda mulai menghasilkan file output baru.

Opsi 2: Buat pola karakter pengganti dengan skrip pasca-build

Gunakan pendekatan ini saat nama file output Anda tidak mengikuti pola yang dapat diprediksi, atau saat aplikasi Anda menghasilkan banyak file yang namanya berubah saat Anda menambahkan dan menghapus rute, yang membuat daftar rawan kesalahan yang dikelola tangan. Skrip singkat yang berjalan setelah proses build memindai output hasil kompilasi dan menulis ulang bundleFilePatterns dengan pola wildcard untuk setiap file yang dihasilkan. Misalnya, ketika alat build menamai file sebagai [name]-[hash].[ext], skrip menyederhanakan Dashboard-BSbmIXoe.js menjadi pola 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)
}

Integrasikan skrip ke dalam proses build Anda agar selalu berjalan setelah bundler:

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

Sekarang, penyebaran cukup dengan dua perintah, dan situs tidak pernah menumpuk potongan yang tidak berinduk:

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

Setelah proses build, powerpages.config.json mencerminkan bundel terkini secara akurat, misalnya:

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

Autentikasi dan otorisasi

Situs SPA Power Pages menggunakan model keamanan yang sama seperti situs Power Pages tradisional.

Konfigurasikan penyedia identitas

Buka Power Pages.
Temukan situs Anda dan pilih Edit.
PilihPenyedia Identitas>.
Tambahkan atau siapkan penyedia identitas, seperti Microsoft Entra ID.
Setiap situs baru secara otomatis memiliki penyedia Microsoft Entra ID default.

Akses konteks pengguna dalam kode

Dapatkan metadata autentikasi pada klien:

URL Otoritas:

Otoritas atau URL masuk untuk Microsoft Entra ID adalah:
```
https://login.windows.net/<tenantId>
```
Temukan URL Authority untuk penyedia identitas lain yang dikonfigurasi dengan membuka Power Pages><your site>>Keamanan>Pengaturan konfigurasi penyedia identitas>.

Rincian Pengguna:

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

Alur React sampel

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

Menggunakan API Web Power Pages

Pengembang dapat menggunakan API Web Power Pages untuk memuat konten ke UI atau untuk membuat, memperbarui, dan menghapus rekaman. Sebelum menggunakan API ini, pastikan api Web yang diperlukan diaktifkan dan izin tabel dan peran web yang sesuai dikonfigurasi dengan benar.


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

Siapkan pengembangan lokal dengan mengaktifkan panggilan API Web dari localhost menggunakan autentikasi Microsoft Entra ID

Pengembang membutuhkan siklus iterasi yang lebih cepat, penelusuran kesalahan lokal, dan kemampuan pemuatan ulang panas saat membangun aplikasi. SPA mendukung alur kerja ini dengan mengaktifkan panggilan API Web yang aman dari localhost menggunakan autentikasi Microsoft Entra ID (Azure AD) v1.

Pengaturan ini memungkinkan Anda:

Jalankan aplikasi Anda secara lokal dengan dukungan autentikasi penuh.
Gunakan alat pengembangan modern seperti Vite untuk pemutakhiran langsung dan umpan balik cepat.
Hindari masalah CORS saat memanggil API Web Power Pages.
Mempercepat pengembangan tanpa menyebarkan perubahan ke portal.

Konfigurasi ini memungkinkan pengalaman pengembangan lokal yang produktif untuk SPA, sehingga pengembang dapat membangun, menguji, dan melakukan iterasi dengan cepat dengan akses API penuh dan dukungan autentikasi.

Important

Gunakan hanya endpoint Microsoft Entra v1 untuk autentikasi.
Autentikasi pembawa hanya didukung di portal versi 9.7.6.6 atau yang lebih baru.
Terapkan pengaturan ini hanya di lingkungan pengembangan.

Langkah-langkah konfigurasi

Mengaktifkan autentikasi SPA
1. Di portal Azure, buka aplikasi Microsoft Entra yang terdaftar untuk portal Anda.
2. Aktifkan autentikasi Aplikasi Halaman Tunggal (SPA ).
3. Tambahkan localhost sebagai URI pengalihan menggunakan konfigurasi platform Aplikasi satu halaman. Untuk informasi selengkapnya, lihat Cara menambahkan URI pengalihan di aplikasi Anda.
  - Alihkan URI: http://localhost:<port>/.

Menambahkan pengaturan situs

Tambahkan pengaturan situs ini di Power Pages:

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

Gunakan ADAL.js untuk autentikasi
- Terapkan autentikasi sisi klien dengan menggunakan ADAL.js.
Note

MSAL.js tidak kompatibel karena Power Pages menggunakan titik akhir Microsoft Entra v1, sedangkan MSAL menggunakan v2. Format pengeluar sertifikat berbeda di antara versi.
Tambahkan header otorisasi
- Sertakan header ini di semua permintaan API Web:
```
Authorization: Bearer <id_token>
```
Mengatur visibilitas situs ke Publik
- Pengaturan ini memungkinkan localhost akses situs untuk tujuan pengembangan dan pengujian.

Mengonfigurasi proksi pengembangan

Jika Anda menggunakan Vite, tambahkan kode ini untuk vite.config.js menghindari masalah CORS:

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

Perbedaan dari situs Power Pages yang ada

Tabel berikut ini meringkas perbedaan utama antara situs SPA yang dibuat dengan fitur ini dan situs Power Pages tradisional:

Feature	Perilaku situs SPA
Refresh sisi server	Selalu mengembalikan halaman akar situs, dan router sisi klien merender sub-rute.
Konflik rute	Rute sisi klien diutamakan, dan refresh keras kembali ke root.
Ruang kerja halaman	Ruang kerja halaman tidak didukung. Gunakan perutean klien dan halaman situs klien. Untuk keamanan tingkat halaman, periksa peran web yang ditetapkan dengan objek pengguna global, dan render UI secara kondisional.
Ruang kerja gaya	Penataan gaya dengan ruang kerja gaya tidak didukung. Gunakan penataan gaya dari framework Anda, seperti CSS, CSS-in-JS, atau kelas utilitas.
Pelokalan	Dukungan satu bahasa. Terapkan pemuatan sumber daya sisi klien.
Template liquid	Kode Liquid dan template Liquid tidak didukung. Akses data dengan menggunakan mesin templat kerangka kerja dan API Web Anda.

FAQ

Dukungan apa yang tersedia untuk pengujian unit dan integrasi?

Saat ini, tidak ada dukungan bawaan untuk pengujian unit dan integrasi. Pembuat harus menulis dan menjalankan pengujian ini secara lokal atau dalam alur CI/CD mereka.

Apakah ada dukungan untuk integrasi Power Fx menggunakan WebAssembly?

Kemampuan ini saat ini tidak didukung.

Apakah kode sumber tersedia di Power Pages?

Saat ini, pembuat dapat membangun situs web menggunakan TypeScript atau Agen GitHub Copilot. File JavaScript dan CSS yang dikompilasi dapat diakses dan dapat diedit di Visual Studio Code. Namun, pengeditan file HTML secara langsung dan ekstensif saat ini tidak didukung.

Bisakah saya membuat komponen secara eksternal dengan menggunakan fitur ini dan membawanya ke situs Power Pages?

Tidak, Anda tidak dapat membawa komponen yang dihasilkan secara eksternal ke situs Power Pages yang ada dengan menggunakan fitur ini.

Bisakah saya menambahkan komponen bawaan seperti daftar dan formulir?

Menambahkan komponen siap pakai seperti daftar dan formulir saat ini tidak didukung. Namun, Anda dapat membuat formulir dan daftar kustom dengan menggunakan kerangka kerja React dan API Web.

Bisakah saya mengaktifkan situs SPA sebagai PWA dari ruang kerja Siapkan?

No. Situs SPA tidak mendukung pengaturan aplikasi web progresif (PWA) dalam penyiapan ruang kerja. Batasan ini berarti Anda tidak dapat menggunakan bagian Seluler untuk mengaktifkan situs sebagai PWA. Untuk menambahkan kemampuan PWA, seperti pengalaman aplikasi yang dapat diinstal dan halaman offline, terapkan dalam kode kerangka kerja Anda. Misalnya, tambahkan manifes aplikasi web dan pekerja layanan.

Bagaimana cara kerja kontrol sumber?

Pengembang dapat menggunakan integrasi Git Power Platform untuk kontrol sumber. Namun, hanya file web yang dikompilasi yang ditambahkan ke repositori, bukan kode sumber lengkap.

Apakah situs-situs ini mendukung SEO?

Karena situs SPA dibangun dengan kerangka kerja React dan menggunakan rendering sisi klien, dukungan SEO terbatas.

Dukungan keamanan dan tata kelola Power Pages apa yang ditawarkan situs SPA?

Power Pages memberlakukan izin tabel dan peran web keamanan pada panggilan API Web, memastikan bahwa akses data selaras dengan peran pengguna. Gunakan objek window["Microsoft"].Dynamic365.Portal.User untuk mengambil properti pengguna dasar dan menyesuaikan pengalaman berdasarkan persona pengguna.

Selain itu, situs SPA mendukung:

Konfigurasi situs publik dan pribadi
Pengaturan tata kelola, termasuk kontrol atas akses data anonim
Konfigurasi penyedia autentikasi

Fitur-fitur ini membantu memastikan integrasi komponen kustom yang aman dan sesuai dalam Power Pages.

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2026-07-21

Membuat dan menyebarkan aplikasi satu halaman di Power Pages

Prasyarat

Perbolehkan unggahan file JavaScript

Membuat dan menyebarkan situs SPA

Mengunggah situs SPA

Syntax

Parameters

Example

Menentukan parameter unggahan dengan powerpages.config.json

Bidang konfigurasi

Contoh powerpages.config.json

Unduh situs SPA

Syntax

Parameters

Example

Aktifkan dan uji situs Anda

Struktur dan konfigurasi proyek

Pemisahan kode dan pembersihan bundel

Mengaktifkan pemisahan kode

Cara upload-code-site membersihkan bundel basi

Opsi 1: Cantumkan pola wildcard secara langsung

Opsi 2: Buat pola karakter pengganti dengan skrip pasca-build

Autentikasi dan otorisasi

Konfigurasikan penyedia identitas

Akses konteks pengguna dalam kode

Alur React sampel

Menggunakan API Web Power Pages

Siapkan pengembangan lokal dengan mengaktifkan panggilan API Web dari localhost menggunakan autentikasi Microsoft Entra ID

Langkah-langkah konfigurasi

Perbedaan dari situs Power Pages yang ada

FAQ

Dukungan apa yang tersedia untuk pengujian unit dan integrasi?

Apakah ada dukungan untuk integrasi Power Fx menggunakan WebAssembly?

Apakah kode sumber tersedia di Power Pages?

Bisakah saya membuat komponen secara eksternal dengan menggunakan fitur ini dan membawanya ke situs Power Pages?

Bisakah saya menambahkan komponen bawaan seperti daftar dan formulir?

Bisakah saya mengaktifkan situs SPA sebagai PWA dari ruang kerja Siapkan?

Bagaimana cara kerja kontrol sumber?

Apakah situs-situs ini mendukung SEO?

Dukungan keamanan dan tata kelola Power Pages apa yang ditawarkan situs SPA?

Informasi terkait

Saran dan Komentar

Sumber Daya Tambahan:

Menentukan parameter unggahan dengan `powerpages.config.json`

Contoh `powerpages.config.json`

Cara `upload-code-site` membersihkan bundel basi