Power Pages'te tek sayfalı uygulama oluşturma ve dağıtma

Power Pages, GitHub Copilot gibi yeni nesil yapay zeka destekli araçlarla oluşturulan tek sayfalı uygulama (SPA) kodunu tümleştirmeyi destekler. Bu özellik, geliştiricilerin kodlama arabirimi olarak doğal dil kullanarak modern, bileşen tabanlı ön uç deneyimlerini Power Pages getirmesine olanak tanır.

Yapay zeka tarafından üretilen kodu yönlendirerek, test ederek ve iyileştirerek, üreticiler odaklarını tekrarlayan uygulama görevlerinden daha üst düzey orkestrasyona kaydırabilirler. Bu yaklaşım, kurumsal düzeyde kalite ve standartları korurken daha sezgisel ve yaratıcı geliştirmeyi güçlendirmektedir.

Bu makalede şunların nasıl yapıldığını görebilirsiniz:

Power Platform CLI (PAC CLI) kullanarak Power Pages için bir SPA projesi oluşturun ve ayarlayın.
Kod varlıklarını Power Pages sitenize yükleyin ve buradan indirin.
Güvenli ve sürdürülebilir bir proje yapısı oluşturun.
SPA tabanlı ve geleneksel Power Pages uygulamaları arasındaki temel farkları öğrenin.

Note

SPA sitesi, tamamen kullanıcının tarayıcısında (istemci tarafı işleme) çalışan bir Power Pages sitesidir. Geleneksel Power Pages sitelerinden farklı olarak, SPA sitelerini yalnızca kaynak kodu ve komut satırı arabirimi (CLI) araçlarıyla yönetirsiniz.
Power Platform Git tümleştirmesi , Power Pages'teki Single-Page Uygulama (SPA) web siteleri için desteklenmez.

Prerequisites

Başlamadan önce aşağıdakilere sahip olduğunuzdan emin olun:

Yönetici ayrıcalıklarına sahip bir Power Pages ortamı.
Power Platform CLI (PAC CLI) sürüm 1.44.x veya üzeri yüklü ve kimliği doğrulanmış.
9.7.4.x veya üzeri bir sürümdeki Power Pages sitesi.
Dataverse ortamlarında JavaScript dosyası yüklemelerine izin verin.
React, Angular veya Vue gibi özel ön uç projenize sahip yerel bir Git deposu.

JavaScript dosyası yüklemelerine izin ver

Varsayılan olarak, bazı Dataverse ortamları JavaScript (.js) dosyalarının karşıya yüklenmesini engeller. "İçeri aktarma başarısız oldu: Ek ya geçerli bir dosya türü değil ya da boyutu çok büyük. Yüklenemez ve indirilemez.", ortam ayarlarınızı bu dosya türüne izin verecek şekilde güncelleyin.

Bir ortamın Power Platform yönetim merkezindeki ayarları yapmak için şu adımları izleyin:

Power Platform yönetim merkezinde oturum açın.
Gezinti bölmesinde, Yönet öğesini seçin.
Yönet bölmesinde Ortamlar'ı seçin.
Ortam seçin.
Komut çubuğunda Ayarlar'ı seçin.
Ürün öğesini genişletin ve Gizlilik + Güvenlik öğesini seçin.
Engellenen Ekler bölümünde, dosya uzantıları listesinden kaldırınjs.
Kaydetseçeneğini seçin.

SPA sitesi oluşturun ve dağıtın

Power Pages SPA siteleri, PAC CLI komutları upload-code-site ve download-code-site kullanılarak yönetilir. Bir siteyi karşıya yükledikten sonra, Power Pages içinde Etkin olmayan siteler listesinde görünür. Kullanıcıların kullanımına sunmak için siteyi etkinleştirin.

Bir SPA sitesi yükleyin

yerel kaynak ve derlenmiş varlıklarınızı Power Pages ortamınıza yüklemek için pac pages upload-code-site komutunu kullanın.

Syntax

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

Parameters

Parametre	Diğer ad	Zorunlu	Description
`--rootPath`	`-rp`	Evet	Sitenizin kaynak dosyalarını içeren yerel klasör
`--compiledPath`	`-cp`	Hayır	React `build` gibi derlenmiş varlıklara giden yol
`--siteName`	`-sn`	Hayır	Power Pages sitenizin görünen adı

Example

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

Mevcut bir projeniz yoksa React, Angular ve Vue kullanarak SPA sitelerinin örnek uygulamalarını deneyin.

`powerpages.config.json` ile yükleme parametrelerini tanımlama

Sitenizin upload-code-site kök klasörüne bir powerpages.config.json dosya ekleyerek komutun davranışını özelleştirin. Bu dosya bulunuyorsa, upload-code-site öğesini yalnızca --rootPath parametresiyle çalıştırın. komut, yapılandırma dosyasından kalan değerleri okur. Hem komut satırı bağımsız değişkenlerini hem de yapılandırma değerlerini sağlarsanız, komut satırı bağımsız değişkenleri önceliklidir.

Yapılandırma alanları

Alan	Türü	Zorunlu	Description
`siteName`	Dize	Evet	Power Pages sitesinin görünen adı.
`compiledPath`	Dize	Evet	Derlenmiş çıktı dizininin yolu (örneğin, Vite `dist` veya React `build` klasörü), .`powerpages.config.json`'a göre.
`defaultLandingPage`	Dize	Evet	Sitenin kök dizini açıldığında sunulan HTML sayfası,`compiledPath`'e (genellikle `index.html`) göre.
`bundleFilePatterns`	string[]	Hayır	Sitedeki `web-files` tanımlayan ve CLI'nin yeni derlemeyi yüklemeden önce sildiği joker karakter desenlerinin listesi. Eski varlıkların sitede birikmemesi için eski, içerik karmalı paketleri temizlemek için bu alanı kullanın. Bkz. Kod bölme ve paket temizleme.
`includeSource`	boolean	Hayır	`true` olduğunda komut, derlenmiş çıktılara ek olarak kaynak kodunuzu da yükler. Varsayılan değer `false`’dır.
`sourceExcludePatterns`	string[]	Hayır	Yüklemeden hariç tutulacak kaynak dosyalar için joker karakter desenleri. Yalnızca `includeSource`, `true` olduğunda geçerlidir (örneğin, `node_modules` veya yerel ortam dosyalarını atlamak için).

En doğru ve en güncel alan referansı için powerpages.config.json şemaya bakın. JSON Şemasını destekleyen düzenleyicilerde doğrulamayı ve otomatik tamamlamayı etkinleştirmek için yapılandırma dosyanıza eşleşen $schema özelliği ekleyin.

Örnek `powerpages.config.json`

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

Bir SPA konumu indirin

Düzenleme veya yedekleme amacıyla mevcut bir sitenin kodunu yerel bir dizine indirmek için pac pages download-code-site komutunu kullanın.

Syntax

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

Parameters

Parametre	Diğer ad	Zorunlu	Description
`--environment`	`-env`	Hayır	Dataverse ortam (GUID veya tam URL). Varsayılan olarak etkin kimlik doğrulama profiliniz kullanılır
`--path`	`-p`	Evet	Konum kodunu indirmek için yerel dizin
`--webSiteId`	`-id`	Evet	Power Pages SPA sitesinin web sitesi kaydı GUID'i
`--overwrite`	`-o`	Hayır	Varsa, hedef dizindeki mevcut dosyaların üzerine yaz

Example

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

Konumunuzu etkinleştirin ve test edin

Power Pages gidin.
Etkin olmayan siteler'i seçin, sitenizi bulun ve Yeniden etkinleştir'i seçin.
Konum etkin olduğunda, dağıtımı kontrol etmek için konumunuzun URL'sine gidin.

Tip

Daha sonraki herhangi bir upload-code-site komutu aktif siteyi otomatik olarak günceller.

Proje yapısı ve yapılandırması

Tutarlı bir proje düzeni, doğru yükleme davranışının sağlanmasına yardımcı olur.

/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

İsteğe bağlı powerpages.config.json dosyasını kullanarak upload-code-site komutunun nasıl çalışacağını özelleştirebilirsiniz.

Kod bölme ve paket temizleme

Tek sayfalı bir uygulama büyüdükçe, tek bir JavaScript paketi büyük ve yavaş yüklenir. Modern derleme araçları bu sorunu kod bölme ile çözer. Bu teknik, uygulamayı tarayıcının gerektiğinde indirdiği daha küçük parçalara böler (örneğin, yalnızca kullanıcı belirli bir rotaya gittiğinde). Her öbek, dosya adında içerik karması bulunacak şekilde, örneğin Dashboard-BSbmIXoe.js, oluşturulur; böylece tarayıcılar bunu uzun süre önbellekte tutabilir ve yalnızca içeriği değiştiğinde yeniden indirebilir.

Kod bölme, Power Pages SPA sitelerine özgü bir dağıtım konusuna neden olur: Her derleme yeni karma dosya adları ürettiğinden, yinelenen upload-code-site çalıştırmaları eski karma dosyaları sitede geride bırakır. Birçok dağıtım sürecinde, bu üst öğesiz parçalar sitenin web-files dosyasında birikir. içindeki bundleFilePatterns alanı powerpages.config.json bunları temizlemek için var.

Kod bölmeyi etkinleştirme

Kod bölme, Power Pages tarafından değil, ön uç derleme aracınız tarafından işlenir, bu nedenle yaklaşım kullandığınız çerçeveye ve paketleyiciye bağlıdır. En yaygın teknik, genellikle yol veya görünüm düzeyinde uygulanan dinamik içeri aktarmalarla uygulamanın bölümlerini yüklemektir, böylece her bölüm yalnızca bir kullanıcı bu bölüme gittiği zaman indirilir (gecikmeli yükleme).

Vite, webpack ve esbuild gibi paketleyiciler de modülleri açıkça adlandırılmış öbekler halinde gruplandırabilir. Tam yapılandırma için çerçevenizin ve paketleyicinizin belgelerine bakın.

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

Hangi yaklaşımı seçerseniz seçin, sonuç aynıdır ve dağıtım için önemli olan bölümdür: derleme, her biri adında içerik karması olan birden çok çıkış dosyası yayar. Bir dosyanın içeriği her değiştiğinde bu karmalar değiştiğinden, her derleme farklı bir dosya adı kümesi oluşturur. Sonraki bölümlerde, bu adlar değiştikçe Dataverse ortamlarınızın nasıl temiz tutulacakları açıklanmaktadır.

`upload-code-site` eski paketleri nasıl temizler?

Derlenmiş varlıklarınızı yüklemeden önce upload-code-site, sitedeki web-files içindeki, siteye aitbundleFilePatterns içindeki joker karakter deseniyle eşleşen tüm dosyaları siler, ardından mevcut derlemeyi yükler. Bu önce silip ardından yükleme davranışı, dağıtılan dosya grubunun her derlemeyi bir öncekinin üzerine eklemek yerine en son derleme çıktınızla aynı kalmasını sağlar.

Temizleme işleminin başarılı olabilmesi için bundleFilePatterns içindeki joker karakter desenlerinin, derlemenizin ürettiği dosya adlarıyla eşleşmesi gerekir. Derleme aracınızın dosyaları adlandırma şekline bağlı olarak bunları doğru tutmanın iki yolu vardır.

1. Seçenek: Joker karakter desenlerini doğrudan listeleme

Birçok derleme aracı, sabit bir ad öneki kullanır ve yalnızca içerik hash değerini değiştirir. Örneğin, index-[hash].js. Çıktı dosyası adlarınız bu şekilde öngörülebilir bir desen izliyorsa, her biri için bundleFilePatterns içinde bir joker karakter kalıbı listeleyin. Ek araç gerekmez:

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

index-*.js gibi bir joker karakter deseni, hash değerinden bağımsız olarak her derlemede bu dosyayla eşleşir. Çıkış dosyası başına bir giriş ekleyin ve derlemeniz yeni bir çıkış dosyası oluşturmaya başladığında yeni bir desen ekleyin.

2. Seçenek: Derleme sonrası komut dosyası ile joker karakter desenleri oluşturma

Çıkış dosyası adlarınız öngörülebilir bir düzeni izlemiyorsa veya uygulamanız, rota ekleyip kaldırdıkça adları değişen çok sayıda dosya üretiyorsa ve bu da manuel olarak tutulan bir listeyi hataya açık hâle getiriyorsa bu yaklaşımı kullanın. Derleme işleminden sonra çalışan kısa bir komut dosyası, derlenmiş çıktıyı tarar ve bundleFilePatterns'ı oluşturulan her dosya için bir joker karakter deseniyle yeniden yazar. Örneğin, bir derleme aracı dosyaları [name]-[hash].[ext] olarak adlandırdığında, betik Dashboard-BSbmIXoe.js ifadesini Dashboard-*.js desenine indirger.

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

Komut dosyasını derleme sürecinize entegre edin, böylece her zaman paketleyici işleminden sonra çalıştırılsın:

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

Artık dağıtım yapmak yalnızca iki komut gerektiriyor ve sitede hiçbir zaman sahipsiz parçalar birikmiyor:

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

Derlemeden sonra, powerpages.config.json tam olarak geçerli paketleri yansıtır, örneğin:

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

Kimlik doğrulaması ve yetkilendirme

Power Pages SPA siteleri, geleneksel Power Pages siteleri ile aynı güvenlik modeli kullanır.

Kimlik sağlayıcılarını yapılandırma

Power Pages gidin.
Sitenizi bulun ve Düzenle'yi seçin.
Güvenlik>Kimliği sağlayıcıları'ı seçin.
Microsoft Entra ID gibi kimlik sağlayıcıları ekleyin veya ayarlayın.
Her yeni site otomatik olarak varsayılan bir Microsoft Entra ID sağlayıcısına sahiptir.

Koddaki kullanıcı bağlamına erişme

İstemcide kimlik doğrulaması meta verilerini alın:

Yetkili URL:

Microsoft Entra ID için yetkili veya oturum açma URL'si:
```
https://login.windows.net/<tenantId>
```
Diğer yapılandırılmış kimlik sağlayıcıları için Authority URL bulmak üzere Power Pages><your site>>Güvenlik>Kimlik sağlayıcıları> yapılandırma ayarlarına gidin.

Kullanıcı ayrıntıları:

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

Örnek React akışı

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

Power Pages Web API'lerini kullanma

Geliştiriciler Power Pages Web API'lerini kullanarak kullanıcı arabirimine içerik yükleyebilir veya kayıtları oluşturabilir, güncelleştirebilir ve silebilir. Bu API'leri kullanmadan önce gerekli Web API'lerinin etkinleştirildiğinden ve uygun tablo izinlerinin ve web rollerinin düzgün yapılandırıldığından emin olun.


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

Microsoft Entra ID kimlik doğrulamasını kullanarak localhost'tan Web API çağrılarını etkinleştirerek yerel geliştirmeyi ayarlama

Geliştiriciler, uygulama oluştururken daha hızlı yineleme döngülerine, yerel hata ayıklamaya ve sık erişimli yeniden yükleme özelliklerine ihtiyaç duyar. SPA, Microsoft Entra ID (Azure AD) v1 kimlik doğrulamasını kullanarak güvenli Web API'si localhost çağrılarını etkinleştirerek bu iş akışlarını destekler.

Bu kurulum şunları yapmanızı sağlar:

Uygulamanızı tam kimlik doğrulama desteğiyle yerel olarak çalıştırın.
Sık erişimli yeniden yükleme ve hızlı geri bildirim için Vite gibi modern geliştirme araçlarını kullanın.
Power Pages Web API'lerini çağırırken CORS sorunlarından kaçının.
Portalda değişiklik dağıtmadan geliştirmeyi hızlandırın.

Bu yapılandırma, SPA için üretken bir yerel geliştirme deneyimi sağlar, böylece geliştiriciler tam API erişimi ve kimlik doğrulaması desteğiyle hızla derleyebilir, test edebilir ve yineleyebilir.

Important

Kimlik doğrulaması için yalnızca Microsoft Entra v1 uç noktalarını kullanın.
Taşıyıcı kimlik doğrulaması yalnızca portal 9.7.6.6 veya sonraki sürümlerinde desteklenir.
Bu ayarları yalnızca geliştirme ortamlarında uygulayın.

Yapılandırma adımları

SPA kimlik doğrulamasını etkinleştirme
1. Azure portalında portalınız için kayıtlı Microsoft Entra uygulamasını açın.
2. Tek Sayfalı Uygulama (SPA) kimlik doğrulamasını etkinleştirin.
3. localhost öğesini, Tek sayfalı uygulama platform yapılandırmasını kullanarak yeniden yönlendirme URI’si olarak ekleyin. Daha fazla bilgi için bkz. Uygulamanıza yeniden yönlendirme URI'sini ekleme.
  - Yeniden yönlendirme URI'si: http://localhost:<port>/.

Site ayarları ekleme

Power Pages'e şu site ayarlarını ekleyin:

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

Kimlik doğrulaması için ADAL.js kullanma
- ADAL.jskullanarak istemci tarafı kimlik doğrulaması uygulayın.
Note

Power Pages Microsoft Entra v1 uç noktalarını kullanırken MSAL v2 kullandığından MSAL.js uyumlu değildir. Verici formatı sürümler arasında farklılık gösterir.
Yetkilendirme üst bilgisi ekleme
- Bu üst bilgiyi tüm Web API'leri isteklerine ekleyin:
```
Authorization: Bearer <id_token>
```
Site görünürlüğünü Genel olarak ayarlama
- Bu ayar, geliştirme ve test amacıyla siteye erişim sağlar localhost .

Geliştirme ara sunucusunu yapılandırma

Vite kullanıyorsanız CORS sorunlarını önlemek için vite.config.js şu kodu ekleyin:

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

Mevcut Power Pages sitelerinden farklar

Aşağıdaki tabloda, bu özellik ile oluşturulan SPA siteleri ile geleneksel Power Pages siteleri arasındaki temel farklar özetlemektedir:

Özellik	SPA sitesi davranışı
Sunucu tarafı yenileme	Her zaman sitenin ana sayfasını döndürür; alt rotalar ise istemci tarafındaki yönlendirici tarafından görüntülenir.
Rota çakışmaları	İstemci tarafı yollar önceliklidir ve zorunlu yenileme köke geri döner.
Sayfa çalışma alanı	Sayfalar çalışma alanı desteklenmiyor. İstemci yönlendirme ve istemci sitesi sayfalarını kullanın. Sayfa düzeyinde güvenlik için, genel kullanıcı nesnesiyle atanmış web rollerini denetleyin ve kullanıcı arabirimini koşullu olarak işleyin.
Stil oluşturma çalışma alanı	Stil çalışma alanı ile stil oluşturma desteklenmiyor. ÇERÇEVEnizin CSS, CSS-in-JSveya yardımcı program sınıfları gibi stillerini kullanın.
Yerelleştirme	Tek dil desteği. İstemci tarafı kaynak yüklemesi uygulayın.
Liquid şablonlama	Liquid kodu ve Liquid şablonları desteklenmez. Çerçevenizin şablon altyapısını ve Web API'lerini kullanarak verilere erişin.

FAQ

Birim ve entegrasyon testleri için hangi destek mevcuttur?

Şu anda birim ve entegrasyon testi için yerleşik destek yoktur. Geliştiriciler bu testleri yerel olarak veya CI/CD ardışık düzenleri içinde yazmalı ve yürütmelidir.

WebAssembly kullanarak Power Fx entegrasyonu için destek var mı?

Bu özellik şu anda desteklenmemektedir.

Kaynak kodu Power Pages'de kullanılabilir mi?

Şu anda, oluşturucular TypeScript veya GitHub Copilot Aracısı kullanarak web siteleri oluşturabilir. Derlenen JavaScript ve CSS dosyalarına erişilebilir ve Visual Studio Code düzenlenebilir. Ancak, HTML dosyalarının doğrudan ve kapsamlı bir şekilde düzenlenmesi şu anda desteklenmemektedir.

Bu özelliği kullanarak harici olarak bir bileşen oluşturup bir Power Pages sitesine getirebilir miyim?

Hayır, bu özelliği kullanarak dışarıdan oluşturulmuş bir bileşeni mevcut bir Power Pages sitesine getiremezsiniz.

Listeler ve formlar gibi kullanıma hazır bileşenler ekleyebilir miyim?

Listeler ve formlar gibi kullanıma hazır bileşenlerin eklenmesi şu anda desteklenmemektedir. Ancak React çerçevesini ve Web API'lerini kullanarak özel formlar ve listeler oluşturabilirsiniz.

Bir SPA sitesini Kurulum çalışma alanından PWA olarak etkinleştirebilir miyim?

No. SPA siteleri, çalışma alanını ayarlamada aşamalı web uygulaması (PWA) ayarını desteklemez. Bu sınırlama, bir siteyi PWA olarak etkinleştirmek için Mobil bölümünü kullanamamanızı sağlar. Yüklenebilir uygulama deneyimleri ve çevrimdışı sayfalar gibi PWA özellikleri eklemek için bunları çerçeve kodunuzda uygulayın. Örneğin, bir web uygulaması manifestosu ve bir service worker ekleyin.

Kaynak denetimi nasıl çalışır?

Geliştiriciler kaynak kontrolü için Power Platform Git entegrasyonunu kullanabilirler. Ancak, depoya tam kaynak kodu değil, yalnızca derlenmiş web dosyaları eklenir.

Bu siteler SEO'yu destekliyor mu?

SPA siteleri React çerçevesi ile oluşturulduğundan ve istemci tarafı oluşturma kullandığından, SEO desteği sınırlıdır.

SPA siteleri hangi Power Pages güvenlik ve idare desteği sunar?

Power Pages, Web API çağrılarında tablo izinlerini ve güvenlik web rollerini zorunlu kılarak veri erişiminin kullanıcı rolleriyle uyumlu olmasını sağlar. Temel kullanıcı özelliklerini almak ve kullanıcı kişiliklerine göre deneyimleri kişiselleştirmek için window["Microsoft"].Dynamic365.Portal.User nesnesini kullanın.

Ek olarak, SPA siteleri şunları destekler:

Genel ve özel site yapılandırmaları
Anonim veri erişimi kontrolü de dahil olmak üzere yönetim ayarları
Kimlik doğrulama sağlayıcı yapılandırmaları

Bu özellikler, Power Pages içindeki özel bileşenlerin güvenli ve uyumlu tümleştirilmesine yardımcı olur.

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2026-07-22

Power Pages'te tek sayfalı uygulama oluşturma ve dağıtma

Prerequisites

JavaScript dosyası yüklemelerine izin ver

SPA sitesi oluşturun ve dağıtın

Bir SPA sitesi yükleyin

Syntax

Parameters

Example

powerpages.config.json ile yükleme parametrelerini tanımlama

Yapılandırma alanları

Örnek powerpages.config.json

Bir SPA konumu indirin

Syntax

Parameters

Example

Konumunuzu etkinleştirin ve test edin

Proje yapısı ve yapılandırması

Kod bölme ve paket temizleme

Kod bölmeyi etkinleştirme

upload-code-site eski paketleri nasıl temizler?

1. Seçenek: Joker karakter desenlerini doğrudan listeleme

2. Seçenek: Derleme sonrası komut dosyası ile joker karakter desenleri oluşturma

Kimlik doğrulaması ve yetkilendirme

Kimlik sağlayıcılarını yapılandırma

Koddaki kullanıcı bağlamına erişme

Örnek React akışı

Power Pages Web API'lerini kullanma

Microsoft Entra ID kimlik doğrulamasını kullanarak localhost'tan Web API çağrılarını etkinleştirerek yerel geliştirmeyi ayarlama

Yapılandırma adımları

Mevcut Power Pages sitelerinden farklar

FAQ

Birim ve entegrasyon testleri için hangi destek mevcuttur?

WebAssembly kullanarak Power Fx entegrasyonu için destek var mı?

Kaynak kodu Power Pages'de kullanılabilir mi?

Bu özelliği kullanarak harici olarak bir bileşen oluşturup bir Power Pages sitesine getirebilir miyim?

Listeler ve formlar gibi kullanıma hazır bileşenler ekleyebilir miyim?

Bir SPA sitesini Kurulum çalışma alanından PWA olarak etkinleştirebilir miyim?

Kaynak denetimi nasıl çalışır?

Bu siteler SEO'yu destekliyor mu?

SPA siteleri hangi Power Pages güvenlik ve idare desteği sunar?

İlgili bilgiler

Geri Bildirim

Ek kaynaklar

`powerpages.config.json` ile yükleme parametrelerini tanımlama

Örnek `powerpages.config.json`

`upload-code-site` eski paketleri nasıl temizler?