Tutorial: Crear e implementar unha aplicación dunha soa páxina usando GitHub Spark e Codespaces

O novo soporte de aplicacións dunha soa páxina ofrece aos desenvolvedores unha maior flexibilidade: pode crear, personalizar e xestionar sitios de Power Pages enteiramente en código fonte. Coa recente versión de GitHub Spark, os desenvolvedores agora poden crear un sitio, editalo directamente nun espazo de código GitHub e despregalo nun ambiente de Power Pages sen saír do seu navegador. Este tutorial guía a través do fluxo de traballo completo.

GitHub Spark é unha nova plataforma de linguaxe natural baseada en IA de GitHub Copilot. Está deseñado para axudar aos desenvolvedores a iniciar aplicacións web modernas rapidamente. Cando se combina con GitHub Codespaces para a edición de código, Spark proporciona:

  • Repositorio de modelos listo para usar para o teu proxecto.
  • Contedores de desenvolvemento preconfigurados para ambientes consistentes.
  • Plataforma de linguaxe natural con intelixencia artificial de GitHub Copilot.

Para os desenvolvedores de Power Pages, isto significa que podes comezar cun modelo de sitio listo, personalizalo e despregar sen a configuración local tradicional.

Ao final deste artigo saberás como:

  1. Crear un prototipo de sitio de Power Pages usando GitHub Spark.
  2. Configura o teu espazo de código para o soporte CLI de .NET e PAC.
  3. Crea e carga a túa aplicación dunha soa páxina a un entorno de Power Pages.
  4. Reactiva e proba o teu sitio directamente desde Power Pages.

Requisitos previos

Antes de comezar, asegúrese de ter:

  • Un entorno de Power Pages con privilexios de administrador.
  • Power Platform CLI (PAC CLI) versión 1.44.x ou posterior instalada e autenticada.
  • Un sitio web de Power Pages na versión 9.7.4.x ou posterior.
  • Licenza de GitHub Spark con Codespaces para o seu proxecto de frontend personalizado.

Nota

  • Para usar GitHub Spark, asegúrese de ter as licenzas de GitHub adecuadas.
  • O soporte para GitHub, Spark ou Codespaces está dispoñible a través do equipo de soporte de Spark.

Paso 1: Comeza co modelo de GitHub Spark

  1. Vai á ferramenta GitHub Spark e xera un novo sitio usando linguaxe natural.
  2. Unha vez creado, fai clic en Abrir en espazos de código.

Isto ofrécelle un ambiente de desenvolvemento baseado na nube onde pode traballar no seu proxecto Power Pages sen ningunha configuración local.

Paso 2: Actualizar a configuración do contedor de desenvolvemento

Dentro do repositorio, localiza o ficheiro:

.devcontainer/devcontainer.json

Modifique a sección de características para engadir soporte para .NET 9.0. A súa configuración debería ser así:

"features": {
  "ghcr.io/devcontainers/features/sshd:1": {
    "version": "latest"
  },
  "ghcr.io/devcontainers/features/dotnet:2.3.0": {
    "version": "9.0"
  }
}

Reconstruír o contedor

Despois de gardar os cambios:

  1. Prema Ctrl + Shift + P (ou Command + Shift + P en Mac) para abrir a paleta de comandos.
  2. Escribe Codespaces: Reconstruír o contedor e seleccionalo.
  3. O contedor reiniciarase. Durante este proceso, instalaranse .NET 9 e todas as demais dependencias.
  4. Agarde uns segundos a que se complete a instalación antes de continuar.

Este paso garante que o seu entorno de Codespace se actualice coa nova configuración. Isto garante que o seu espazo de código inclúa o tempo de execución necesario para as ferramentas de compilación de Power Pages.

Paso 3: Instalar as ferramentas de Power Platform

Desde o teu terminal Codespaces:

  1. Instalar ferramentas de Power Platform (dispoñibles como extensión de VS Code).
  2. Esta instalación tamén trae a PAC CLI, unha interface de liña de comandos que permite autenticar, descargar e cargar sitios.

Paso 4: Conéctate ao teu entorno de Power Platform

Use a CLI de PAC para autenticarse no seu entorno de destino:

pac auth create -u https://org12x34x45.crm.dynamics.com

Substitúe o URL polo URL do seu entorno real de Power Platform.

Paso 5: Crea o teu sitio web

Antes de despregar, crea o código do teu sitio:

npm run build

Este comando compila o seu sitio e envía os artefactos a un dist cartafol.

Paso 6: Sube o teu sitio web

Desprega o teu sitio no entorno de Power Pages usando:

pac pages upload-code-site --rootPath "./spark-template" --compiledPath "./dist" --siteName "YourSiteName"

Parámetros

Parámetro Alcume Descrición
--rootPath -rp Cartafol local que contén os ficheiros fonte do teu sitio
--compiledPath -cp Camiño a recursos compilados, como React build
--siteName -sn Nome de visualización do sitio web de Power Pages

Paso 7: Reactivar e probar

  1. Despois da carga, o seu sitio aparece en Sitios inactivos nas páxinas de poder.
  2. Vai a Sitios inactivos, busca o teu sitio e selecciona Reactivar.
  3. Cando o sitio estea activo, abre o seu URL para confirmar o despregamento.

Seguintes pasos: Protexe e amplía o teu sitio web

Agora que o teu sitio web está despregado:

  • Última actualización o