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 a versão recente do GitHub Spark, os desenvolvedores agora podem criar um site, editá-lo diretamente em um Codespace do GitHub 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 movida a IA do GitHub Copilot. Ele foi projetado para ajudar os desenvolvedores a inicializar aplicativos Web modernos rapidamente. Quando combinado com os Codespaces do GitHub para edição de código, o Spark fornece:

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

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

Ao final deste artigo, você saberá como:

  1. Crie um protótipo do site do Power Pages usando o GitHub Spark.
  2. Configure o Codespace para suporte ao .NET e PAC CLI.
  3. Crie e carregue seu aplicativo de página única em um ambiente do Power Pages.
  4. Reativar e testar seu site diretamente do Power Pages.

Pré-requisitos

Antes de começar, verifique se você tem:

Observação

  • Para usar o GitHub Spark, verifique se você tem as licenças apropriadas do GitHub.
  • O suporte para GitHub Spark ou Codespaces está disponível por meio da equipe de suporte do Spark.

Etapa 1: Começar com o modelo do GitHub Spark

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

Isso oferece um ambiente de desenvolvimento baseado em nuvem em que você pode trabalhar em 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 suas alterações:

  1. Pressione Ctrl + Shift + P (ou Command + Shift + P no Mac) para abrir a paleta de comandos.
  2. Digite Codespaces: Reconstruir Contêiner 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 para que a instalação seja concluída antes de continuar.

Esta etapa garante que o ambiente do Codespace seja atualizado com a nova configuração. Isso garante que o codespace inclua o runtime necessário para ferramentas de build do Power Pages.

Etapa 3: Instalar ferramentas do Power Platform

No terminal de Codespaces:

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

Etapa 4: Conectar-se ao seu ambiente do Power Platform

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

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

Substitua a URL pela URL real do ambiente do Power Platform.

Etapa 5: Criar seu site

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

npm run build

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

Etapa 6: Carregar 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 o React build
--siteName -sn Nome de exibição para seu site do Power Pages

Etapa 7: Reativar e testar

  1. Após o upload, seu site aparece em sites inativos no Power Pages.
  2. Vá para sites inativos, localize seu site e selecione Reativar.
  3. Quando o site se tornar 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