新的
單頁應用程式
支援為開發人員提供了更大的靈活性：您可以完全在原始程式碼中建立、自訂和管理 Power Pages 網站。 隨著最近發行的
GitHub Spark
，開發人員現在可以撰寫網站、直接在 GitHub Codespace 中編輯網站，以及將網站部署至 Power Pages 環境，而不需要離開瀏覽器。 本教學課程將引導您完成完整的工作流程。
GitHub Spark
是 GitHub Copilot 推出的全新 AI 驅動自然語言平台。 它旨在幫助開發人員快速引導現代 Web 應用程式。 與 GitHub Codespaces 結合進行程式碼編輯時，Spark 會提供：
專案的現成範本儲存庫。
預先設定的開發容器，用於一致的環境。
來自 GitHub Copilot 的 AI 驅動自然語言平台。
對於 Power Pages 開發人員來說，這表示您可以從現成的網站範本開始，對其進行自訂，然後進行部署，而無需傳統的本機設定。
讀完本文後，您將知道如何：
使用 GitHub Spark 建立原型 Power Pages 網站。
設定 Codespace for .NET 和 PAC CLI 支援。
建置您的單頁應用程式並將其上傳至 Power Pages 環境。
直接從
Power Pages
重新啟用並測試您的網站。
開始之前，請確定您擁有：
具有
管理員權限
的 Power Pages 環境。
已安裝並驗證
Power Platform CLI (PAC CLI)
1.44.x 版或更新版本。
9.7.4.x 版或更新版本上的 Power Pages 網站。
GitHub Spark 授權與 Codespaces 適用於您的自訂前端專案。
若要使用 GitHub Spark，請確定您擁有適當的 GitHub 授權。
GitHub Spark 或 Codespaces 的支援可透過
Spark 支援小組
取得。
步驟 1：從 GitHub Spark 範本開始
移至 GitHub Spark 工具，並使用自然語言產生新網站。
建立之後，按一下 [
在 Codespaces 中開啟
]。
這為您提供了一個基於雲端的開發環境，您可以在其中處理 Power Pages 專案，而無需任何本機設定。
步驟 2：更新開發容器組態
在存放庫內，找到檔案：
.devcontainer/devcontainer.json
修改功能區段以新增對 .NET 9.0 的支援。 您的設定應該如下所示：
"features": {
"ghcr.io/devcontainers/features/sshd:1": {
"version": "latest"
"ghcr.io/devcontainers/features/dotnet:2.3.0": {
"version": "9.0"
儲存變更後：
按下 Ctrl + Shift + P （或在 Command + Shift + P Mac 上） 以開啟指令面板。
輸入Codespaces：Rebuild Container並選擇它。
容器將重新啟動。 在此過程中，將會安裝 .NET 9 和所有其他相依項。
等待幾秒鐘讓安裝完成，然後再繼續。
此步驟可確保您的 Codespace 環境會以新的設定重新整理。 這可確保您的 Codespace 包含 Power Pages 建置工具的必要運行環境。
從 Codespaces 終端機：
安裝 Power Platform 工具 （可作為 VS Code 延伸模組使用）。
此安裝還引入了PAC CLI，這是一個命令行介面，可讓您驗證、下載和上傳站點。
使用 PAC CLI 針對目標環境進行驗證：
pac auth create -u https://org12x34x45.crm.dynamics.com
將 URL 取代為實際 Power Platform 環境 URL。
步驟 5：建立您的網站
部署之前，請建置您的網站程式碼：
npm run build
此指令會編譯您的網站，並將構件輸出至資料夾。dist
第 6 步：上傳您的網站
使用下列方式將您的網站部署至 Power Pages 環境：
pac pages upload-code-site --rootPath "./spark-template" --compiledPath "./dist" --siteName "YourSiteName"
Alias
Description
上傳後，您的網站會顯示在 Power Pages 的 [非使用中網站] 底下。
移至 [非使用中網站]，尋找您的網站，然後選取 [重新啟用]。
當網站變成作用中時，請開啟其 URL 以確認部署。
後續步驟：保護和擴展您的網站
現在您的網站已部署：
設定 驗證和授權 以保護存取。
使用 Power Pages Web API 動態載入內容，並從自訂程式碼執行建立、更新和刪除作業。
探索 範例 React 網站程式碼 和 檔 ，以建立具有更深入自訂的單頁應用程式 （SPA）。
