Esercitazione: Creare e distribuire un'applicazione a pagina singola usando GitHub Spark e Codespaces

Il nuovo supporto per le applicazioni a pagina singola offre agli sviluppatori maggiore flessibilità: è possibile creare, personalizzare e gestire siti di Power Pages interamente nel codice sorgente. Con la versione recente di GitHub Spark, gli sviluppatori possono ora creare un sito, modificarlo direttamente in gitHub Codespace e distribuirlo in un ambiente Power Pages senza uscire dal browser. Questa esercitazione illustra il flusso di lavoro completo.

GitHub Spark è una nuova piattaforma basata su linguaggio naturale basato sull'intelligenza artificiale di GitHub Copilot. È progettato per consentire agli sviluppatori di avviare rapidamente applicazioni Web moderne. In combinazione con GitHub Codespaces per la modifica del codice, Spark fornisce:

  • Repository di modelli pronti per l'uso per il tuo progetto.
  • Contenitori di sviluppo preconfigurato per ambienti coerenti.
  • Piattaforma basata su intelligenza artificiale e in linguaggio naturale di GitHub Copilot.

Per gli sviluppatori di Power Pages, questo significa che è possibile iniziare con un modello di sito pronto, personalizzarlo e distribuirlo senza la configurazione locale tradizionale.

Al termine di questo articolo, si saprà come:

  1. Creare un prototipo di sito di Power Pages usando GitHub Spark.
  2. Configurare il Codespace per il supporto della CLI di .NET e PAC.
  3. Compilare e caricare l'applicazione a pagina singola in un ambiente Power Pages.
  4. Riattivare e testare il sito direttamente da Power Pages.

Prerequisiti

Prima di iniziare, assicurarsi di avere:

Annotazioni

  • Per usare GitHub Spark, assicurarsi di disporre delle licenze GitHub appropriate.
  • Il supporto per GitHub Spark o Codespaces è disponibile tramite il team di supporto di Spark.

Passaggio 1: Iniziare con il modello Di GitHub Spark

  1. Passare allo strumento GitHub Spark e generare un nuovo sito usando il linguaggio naturale.
  2. Dopo la creazione, fare clic su Apri in Codespaces.

In questo modo è disponibile un ambiente di sviluppo basato sul cloud in cui è possibile lavorare sul progetto di Power Pages senza alcuna configurazione locale.

Passaggio 2: Aggiornare la configurazione del contenitore di sviluppo

All'interno del repository individuare il file:

.devcontainer/devcontainer.json

Modificare la sezione funzionalità per aggiungere il supporto per .NET 9.0. La configurazione dovrebbe essere simile alla seguente:

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

Ricompilare il contenitore

Dopo aver salvato le modifiche:

  1. Premere Ctrl + Shift + P (o Command + Shift + P su Mac) per aprire il riquadro comandi.
  2. Digitare Codespaces: ricostruire il contenitore e selezionarlo.
  3. Il contenitore verrà riavviato. Durante questo processo, verranno installati .NET 9 e tutte le altre dipendenze.
  4. Attendere alcuni secondi per il completamento dell'installazione prima di continuare.

Questo passaggio garantisce che l'ambiente Codespace venga aggiornato con la nuova configurazione. In questo modo, codespace include il runtime necessario per gli strumenti di compilazione di Power Pages.

Passaggio 3: Installare gli strumenti di Power Platform

Dal terminale Codespaces:

  1. Installare gli strumenti di Power Platform (disponibili come estensione di VS Code).
  2. Questa installazione include anche l'interfaccia della riga di comando pac, un'interfaccia della riga di comando che consente di autenticare, scaricare e caricare siti.

Passaggio 4: Connettersi all'ambiente Power Platform

Usa il PAC CLI per eseguire l'autenticazione contro il tuo ambiente di destinazione.

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

Sostituire l'URL con l'URL effettivo dell'ambiente Power Platform.

Passaggio 5: Creare il sito

Prima della distribuzione, compilare il codice del sito:

npm run build

Questo comando compila il sito e restituisce gli artefatti in una dist cartella.

Passaggio 6: Caricare il sito

Distribuire il sito nell'ambiente Power Pages usando:

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

Parametri

Parametro Alias Description
--rootPath -rp Cartella locale con i file di origine del sito
--compiledPath -cp Percorso delle risorse compilate, ad esempio React build
--siteName -sn Nome visualizzato per il sito di Power Pages

Passaggio 7: Riattivare e testare

  1. Dopo il caricamento, il sito viene visualizzato in Siti inattivi in Power Pages.
  2. Passare a Siti inattivi, trovare il sito e selezionare Riattiva.
  3. Quando il sito diventa attivo, aprire il relativo URL per confermare la distribuzione.

Passaggi successivi: Proteggere ed estendere il sito

Ora che il sito è stato distribuito:

  • Last updated on