Compartir a través de

Tutorial: Creación e implementación de una aplicación de página única mediante GitHub Spark y Codespaces

La nueva compatibilidad con aplicaciones de página única ofrece a los desarrolladores una mayor flexibilidad: puede crear, personalizar y administrar sitios de Power Pages completamente en el código fuente. Con la versión reciente de GitHub Spark, los desarrolladores ahora pueden crear un sitio, editarlo directamente en un espacio de código de GitHub e implementarlo en un entorno de Power Pages sin salir de su explorador. Este tutorial le guía por el flujo de trabajo completo.

GitHub Spark es una nueva plataforma de lenguaje natural con tecnología de inteligencia artificial de GitHub Copilot. Está diseñado para ayudar a los desarrolladores a arrancar rápidamente las aplicaciones web modernas. Cuando se combina con GitHub Codespaces para la edición de código, Spark proporciona lo siguiente:

  • Un repositorio de plantillas listo para usar para el proyecto.
  • Contenedores de desarrollo preconfigurados para entornos coherentes.
  • Plataforma de lenguaje natural con tecnología de inteligencia artificial de GitHub Copilot.

En el caso de los desarrolladores de Power Pages, esto significa que puede empezar con una plantilla de sitio lista, personalizarla e implementarla sin la configuración local tradicional.

Al final de este artículo, sabrá cómo:

  1. Cree un sitio de Power Pages prototipo mediante GitHub Spark.
  2. Configura tu Codespace para el soporte de .NET y CLI de PAC.
  3. Compile y cargue la aplicación de página única en un entorno de Power Pages.
  4. Vuelva a activar y probar el sitio directamente desde Power Pages.

Prerrequisitos

Antes de comenzar, asegúrese de que tiene:

  • Un entorno de Power Pages con privilegios de administrador.
  • Power Platform CLI (PAC CLI) versión 1.44.x o posterior instalada y autenticada.
  • Un sitio de Power Pages en la versión 9.7.4.x o posterior.
  • Licencia de Spark de GitHub con Codespaces para el proyecto de front-end personalizado.

Nota:

  • Para usar GitHub Spark, asegúrese de que tiene las licencias de GitHub adecuadas.
  • La compatibilidad con GitHub Spark o Codespaces está disponible a través del equipo de soporte técnico de Spark.

Paso 1: Empezar con la plantilla de Spark de GitHub

  1. Vaya a la herramienta GitHub Spark y genere un nuevo sitio mediante lenguaje natural.
  2. Una vez creado, haga clic en Abrir en Codespaces.

Esto le proporciona un entorno de desarrollo basado en la nube donde puede trabajar en el proyecto de Power Pages sin ninguna configuración local.

Paso 2: Actualización de la configuración del contenedor de desarrollo

Dentro del repositorio, busque el archivo:

.devcontainer/devcontainer.json

Modifique la sección de características para agregar compatibilidad con .NET 9.0. La configuración debe tener este aspecto:

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

Reconstruir el contenedor

Después de guardar los cambios:

  1. Presione Ctrl + Shift + P (o Command + Shift + P en Mac) para abrir la paleta de comandos.
  2. Escriba Codespaces: Reconstruir contenedor y selecciónelo.
  3. El contenedor se reiniciará. Durante este proceso, se instalarán .NET 9 y todas las demás dependencias.
  4. Espere unos segundos para que se complete la instalación antes de continuar.

Este paso garantiza que el entorno de Codespace se actualice con la nueva configuración. Esto garantiza que Codespace incluya el tiempo de ejecución necesario para las herramientas de compilación de Power Pages.

Paso 3: Instalación de herramientas de Power Platform

Desde el terminal de Codespaces:

  1. Instale las herramientas de Power Platform (disponibles como extensión de VS Code).
  2. Esta instalación también incluye la CLI de PAC, una interfaz de línea de comandos que le permite autenticar, descargar y cargar sitios.

Paso 4: Conexión al entorno de Power Platform

Use la CLI de PAC para autenticarse en el entorno de destino:

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

Reemplace la dirección URL por la dirección URL real del entorno de Power Platform.

Paso 5: Construir el sitio

Antes de implementarlo, compile el código del sitio:

npm run build

Este comando compila tu sitio web y genera los artefactos en la carpeta dist.

Paso 6: Cargar el sitio

Implemente el sitio en el entorno de Power Pages mediante:

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

Parámetros

Parámetro Alias Description
--rootPath -rp Carpeta local que tiene los archivos de origen del sitio
--compiledPath -cp Ruta de acceso a los recursos compilados, como React build
--siteName -sn Nombre para mostrar de su sitio de Power Pages

Paso 7: Reactivar y probar

  1. Después de la carga, el sitio aparece en Sitios inactivos en Power Pages.
  2. Vaya a Sitios inactivos, busque el sitio y seleccione Reactivar.
  3. Cuando el sitio se active, abra su dirección URL para confirmar la implementación.

Pasos siguientes: Proteger y ampliar el sitio

Ahora que el sitio está implementado:

  • Last updated on