Blazor, NuGet e 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:
- Creazione del componente Blazor. Inserirò un css e un script javascript perchè è proprio qui che ho incontrato le (uniche) difficoltà
- Creazione del feed NuGet (e settaggio dei relativi permessi)
- 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à).
Ho aggiunto anche un progetto Blazor Server per testare il semplicissimo componente.
Questo è il risultato:
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:
Creazione del feed
Per la creazione del feed sono sufficienti i seguenti passi:
Dopo aver creato il feed è necessario settare i permessi:
Il risultato dovrebbe essere il seguente.
In realtà dovrebbe bastare setta come "Contributor" "Build Service".
Creazione della Release in Azure Pipeline
La Release dovrà contenere i seguenti blocchi:
- Checkout del codice (nel mio caso da GitHub)
- Build
- Push del pacchetto nuget nel feed
Checkout del codice
Il codice risiede su GitHub, quindi è necessario aggiungere il servizio:
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":
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":
Poi "NuGet restore":
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":
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"
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:
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":
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:
