Tutorial: Criar e implantar um aplicativo de página única usando o GitHub Spark e Codespaces

O novo suporte a aplicativos de página única oferece aos desenvolvedores maior flexibilidade: você pode criar, personalizar e gerenciar sites do Power Pages inteiramente no código-fonte. Com o recente lançamento do GitHub Spark, os desenvolvedores agora podem criar um site, editá-lo diretamente em um GitHub Codespace e implantá-lo em um ambiente do Power Pages sem sair do navegador. Este tutorial orienta você pelo fluxo de trabalho completo.

O GitHub Spark é uma nova plataforma de linguagem natural alimentada por IA do GitHub Copilot. Ele foi projetado para ajudar os desenvolvedores a inicializar aplicativos web modernos rapidamente. Quando combinado com o GitHub Codespaces para edição de código, o Spark fornece:

  • Um repositório de modelos pronto a usar para o seu projeto.
  • Contêineres de desenvolvimento pré-configurados para ambientes consistentes.
  • Plataforma de linguagem natural alimentada por IA do GitHub Copilot.

Para desenvolvedores do Power Pages, isso significa que você pode começar com um modelo de site pronto, personalizá-lo e implantá-lo sem a configuração local tradicional.

Ao final deste artigo, você saberá como:

  1. Crie um protótipo de site do Power Pages usando o GitHub Spark.
  2. Configure seu Codespace para suporte a .NET e PAC CLI.
  3. Crie e carregue a sua aplicação de página única para um ambiente do Power Pages.
  4. Reative e teste o seu site diretamente a partir do Power Pages.

Pré-requisitos

Antes de começar, certifique-se de que tem:

  • Um ambiente do Power Pages com privilégios de administrador.
  • Power Platform CLI (PAC CLI) versão 1.44.x ou posterior instalado e autenticado.
  • Um site do Power Pages na versão 9.7.4.x ou posterior.
  • Licença do GitHub Spark com Codespaces para seu projeto de frontend personalizado.

Observação

  • Para usar o GitHub Spark, certifique-se de ter as licenças apropriadas do GitHub.
  • O suporte para GitHub Spark ou Codespaces está disponível através da equipe de suporte do Spark.

Etapa 1: Comece com o modelo GitHub Spark

  1. Vá para a ferramenta GitHub Spark e gere um novo site usando linguagem natural.
  2. Uma vez criado, clique em Abrir em Codespaces.

Isto dá-lhe um ambiente de desenvolvimento baseado na nuvem onde pode trabalhar no seu projeto do Power Pages sem qualquer configuração local.

Etapa 2: Atualizar a configuração do contêiner de desenvolvimento

Dentro do repositório, localize o arquivo:

.devcontainer/devcontainer.json

Modifique a seção de recursos para adicionar suporte ao .NET 9.0. Sua configuração deve ter esta aparência:

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

Reconstruir o contêiner

Depois de salvar as alterações:

  1. Pressione Ctrl + Shift + P (ou Command + Shift + P no Mac) para abrir a paleta de comandos.
  2. Digite Codespaces: Rebuild Container e selecione-o.
  3. O contêiner será reiniciado. Durante esse processo, o .NET 9 e todas as outras dependências serão instalados.
  4. Aguarde alguns segundos até que a instalação seja concluída antes de continuar.

Esta etapa garante que seu ambiente do Codespace seja atualizado com a nova configuração. Isso garante que seu Codespace inclua o tempo de execução necessário para as ferramentas de compilação do Power Pages.

Etapa 3: Instalar as ferramentas da Power Platform

A partir do seu terminal Codespaces:

  1. Instale as ferramentas Power Platform (disponíveis como uma extensão VS Code).
  2. Essa instalação também traz a PAC CLI, uma interface de linha de comando que permite autenticar, baixar e carregar sites.

Etapa 4: Conecte-se ao ambiente da Power Platform

Use o PAC CLI para autenticar no seu ambiente de destino.

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

Substitua o URL pelo URL real do ambiente da Power Platform.

Etapa 5: Crie seu site

Antes de implantar, crie o código do seu site:

npm run build

Este comando compila o seu site e gera os artefatos em uma dist pasta.

Passo 6: Carregue o seu site

Implante seu site no ambiente do Power Pages usando:

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

Parâmetros

Parâmetro Alias Description
--rootPath -rp Pasta local que tem os arquivos de origem do seu site
--compiledPath -cp Caminho para recursos compilados, como React build
--siteName -sn Nome de exibição do seu site do Power Pages

Passo 7: Reativar e testar

  1. Após o carregamento, o seu site aparece em Sites inativos nas Power Pages.
  2. Vá para Sites inativos, encontre seu site e selecione Reativar.
  3. Quando o site ficar ativo, abra sua URL para confirmar a implantação.

Próximas etapas: Proteger e estender seu site

Agora que seu site está implantado:

  • Last updated on