Blazor, NuGet e Azure pipeline

Creazione di un pacchetto NuGet per Blazor e release tramite azure pipeline

La creazione di un componente Blazor (.NET5) e la relativa pubblicazione sul repository NuGet aziendale può sembrare una banalità.

Non lo è stata e deciso di scriverci questo articolo.

La motivazione credo che sia la seguente: Blazor è una tecnologia abbastanza recente e Microsoft aggiorna spesso il suo cloud Azure e tutto il mondo che lo circonda. Ho trovato parecchia documentazione on line, ma per un motivo o l'altro era obsoleta.

I passi che dovranno essere fatti per pubblicare su NuGet privato il componente Blazor tramite le pipeline di Azure sono essenzialmente i seguenti:

  1. Creazione del componente Blazor. Inserirò un css e un script javascript perchè è proprio qui che ho incontrato le (uniche) difficoltà
  2. Creazione del feed NuGet (e settaggio dei relativi permessi)
  3. Creazione della build tramite Azure Pipeline e push del pacchetto Nuget nel feed

Il codice al quale mi riferirò successivamente è sul "mio" GitHub giemma/Blazor.NugetPackageExample (github.com)

Creazione del componente Blazor

In questo paragrafo creerò un semplicissimo componente Blazor (Blazor.MyNugetPackage) con un file javascript e un foglio di stile (css non minificato per semplicità).

Blazor Simple Component

Ho aggiunto anche un progetto Blazor Server per testare il semplicissimo componente.

Questo è il risultato:

Blazor Simple Component Test

Praticamente il componente che ho deciso di scrivere è un tasto che invoca una funzione javascript che mostra un alert con un messaggio.

Lo stile è contenuto nel file "style.css".

La pagina _Host del progetto di esempio dovrà contenere le seguenti righe:

<link href="_content/Blazor.MyNugetPackage/style.css" rel="stylesheet" />

<script src="_content/Blazor.MyNugetPackage/example.js"></script>

Importante è il settaggio delle proprietà del componente Blazor:

Blazor Component Properties

Creazione del feed

Per la creazione del feed sono sufficienti i seguenti passi:

Create nuget feed step1

Create nuget feed step2

 Dopo aver creato il feed è necessario settare i permessi:

Nuget feed permission1

Il risultato dovrebbe essere il seguente.

Nuget feed permission2

 

In realtà dovrebbe bastare setta come "Contributor" "Build Service".

Creazione della Release in Azure Pipeline

La Release dovrà contenere i seguenti blocchi:

  1. Checkout del codice (nel mio caso da GitHub)
  2. Build
  3. Push del pacchetto nuget nel feed

Checkout del codice

Il codice risiede su GitHub, quindi è necessario aggiungere il servizio:

Create Azure pipeline1

 

Add GitHub service to Azure Pipeline

Cliccando su "Authorize using OAuth" comparirà la schermata di GitHub e sarà necessario dare l'autorizzazione.

Successivamente è necessario selezionare il repository, il branch, la versione del codice e altre impostazioni di facile comprensione.

Adesso è correttamente impostata la selezione dell' "Artifact":

Create Azure Pipeline 2

Build

A questo punto è possibile aggiungere lo "stage" (l'ho rinominato in "Release") e quindi un "Empty Job". Poi cliccando su "Tasks" il risultato dovrebbe essere il seguente:

Adesso viene la parte più bella ovvero l'aggiunta dei task alla pipeline.

Il primo blocco da aggiungere è "NuGet tool installer".

Poi "Use Net Core":

Use Net Core

Poi "NuGet restore":

NuGet

E' necessario scegliere il progetto (Path to solution, packages.config, or project.json) come di seguito:

$(System.DefaultWorkingDirectory)/_giemma_Blazor.NugetPackageExample/Blazor.MyNugetPackage/Blazor.MyNugetPackage.csproj

Di fatto esiste una finestra che consente di sfogliare l'artifact, ma non avendo ancora lanciato una build è ancora vuota.

Poi ".Net Core":

Net Core

Anche per questo task è necessario impostare il progetto ("Path to project(s)"):

$(System.DefaultWorkingDirectory)/_giemma_Blazor.NugetPackageExample/Blazor.MyNugetPackage/Blazor.MyNugetPackage.csproj

Poi nuovamente "Nuget"

NuGet

Questo è il task che effettivamente farà il push del pacchetto sul feed. Infatti è necessario impostare il campo command a "Push", mentre il campo "Path to NuGet package(s) to publish" va settato a :

$(System.DefaultWorkingDirectory)/**/*.nupkg;!$(Build.ArtifactStagingDirectory)/**/*.symbols.nupkg

Per il campo "Target feed" va selezionato il feed creato precedentemente.

Le altre opzioni sono rimaste con i valori di default.

Adesso è possibile lanciare la release da "Releases" quindi "Create release".

Il processo impiegherà qualche minuto, e se va a buon fine, oltre a vedere un po di verde nella finestra, andando in "Artifacts" dovrebbe essere visibile il pacchetto NuGet contenente il componente Blazor:

Blazor Nuget Package created

Ovviamente non mi fido e ho voglia di controllare.

Cliccando sul pacchetto NuGet è possibile scaricare il file "blazor.mynugetpackage.1.0.0.nupkg". Un pacchetto NuGet di fatto non è altro che un file zip! Basta rinominarlo e decomprimerlo.

La prova del nove è controllare la presenza del file "Blazor.MyNugetPackage.dll" in "blazor.mynugetpackage.1.0.0.zip\lib\net5.0" e la presenza del due file (il .js e il .css) nella cartella "blazor.mynugetpackage.1.0.0.zip\staticwebassets":

NuGetPackage opened as zip

 

Collegamento con Visual Studio

L'ultimo step è rendere disponibile il pacchetto. La prima cosa da fare è ottenere il percorso.

Da "Artifacts", selezionare il pacchetto poi "Connect to feed" e infine "Visual Studio". Nel mio caso il percorso è:

https://giemma.pkgs.visualstudio.com/Blazor.NugetPackageExample/_packaging/MyFeed/nuget/v3/index.json

Ecco questo è il percorso da inserire in Visual Studio da "Tools" - "NuGet Package Manager". Una volta fatto dovrebbe essere visibile tra i pacchetti disponibili (io ho disabilitato temporaneamente tutte le altre sorgenti) e quindi vedo solo il mio:

NuGet Package Deployed