Category: github

Deploy Blazor WASM to Github Pages in 7 steps

Assumptions:

You have an Blazor Interactive WebAssembly ( CSR ) , not a Server ( static or interactive)

I will make as the repo is  https://github.com/ignatandrei/tilt  . Change my name with yours and TILT  with your repo

So let’s start

Step 1   You must configure GitHub Pages – create a docs folder and put an index.html  . Then  goto github Settings => Pages (https://github.com/ignatandrei/tilt/settings/pages )  and put there main / docs  . 

Step 2  Verify it is working. If your repo is https://github.com/ignatandrei/tilt , then browse to https://ignatandrei.github.io/TILT/ and ensure that you can see the index. If not, goto Step 1

Step 3  Add 2 files .nojekyll (content : null , empty …. just create it ) and .gitattributes ( content : *.js binary )

Step 4 dotnet publish your Blazor WASM csproj . Find the folder wwwroot where was published.

Step  5  Find index.html  in the folder . Edit base href , put the repo name  (<base href=”/TILT/” />  ). Also you can modify the css/js  by adding the date ( e.g.  <link rel=”stylesheet” href=”css/app.css?202312162300″ /> ) .

Step 6  Copy the index.html and the other files inside the docs folder . Also, copy the index.html as 404.html file

Step 7 Commit and push. Now you can enjoy your Blazor site hosted for free in github  : https://github.com/ignatandrei/tilt 

Note 1 : If some url’s do not work , then try to add the following

@inject IWebAssemblyHostEnvironment HostEnvironment
@{
     var baseAddress = HostEnvironment.BaseAddress;
     if (!baseAddress.EndsWith(“/”)) baseAddress += “/”;

}

to the url

Note 2:  For more deployments please read https://learn.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-8.0

Nuget packages and Github repositories

You can see the Github repositories that you have worked  last year by going to https://docs.github.com/en/graphql/overview/explorer and entering

query ContributionGraph {
   user(login: “ignatandrei”) {
     contributionsCollection(
       from: “2022-01-01T00:00:00+00:00”
       to: “2022-12-31T00:00:00+00:00”
     ) {
       commitContributionsByRepository(maxRepositories:100){
         repository{
           nameWithOwner
           url
           updatedAt
         }
       }     
     }
   }
}

Mine are

ignatandrei/TILT
ignatandrei/BlocklyAutomation
ignatandrei/QueryViewer
ignatandrei/RSCG_AMS
ignatandrei/rxDemo
ignatandrei/NetCoreUsefullEndpoints
ignatandrei/Presentations
ignatandrei/NETCoreBlockly
ignatandrei/FunctionsDI
ignatandrei/GeneratorOfHelp
ignatandrei/MicroservicesPortChooser
ignatandrei/AOP_With_Roslyn
ignatandrei/RSCG_TimeBombComment
ignatandrei/RSCG_Examples

And those  are the NuGet packages:

programmerall
GOH
QueryGenerator
RSCG_FunctionsWithDI_Base
RSCG_FunctionsWithDI
AMS_Base
AMSWebAPI
RSCG_AMS
AOPMethodsGenerator
AOPMethodsCommon
RSCG_TimeBombComment
NetCoreBlockly

TILT- Docker with Ductus.FluentDocker–part 23

I have already tests with Sqlite – however, it will be better to try tests with a real SqlServer .

One of the way to have a sql server is to have docker – but how to start docker with sql server any time ?

One of answers is Ductus.FluentDocker – https://www.nuget.org/packages/Ductus.FluentDocker – and this is the code to start SqlServer:

public override void StartDatabase()
{
    //string guid = Guid.NewGuid().ToString("N");
    string uniqueId = Interlocked.Increment(ref uniq).ToString(); //Guid.NewGuid().ToString("N");
    container =
new Builder()
.UseContainer()
.WithName("sql" + uniqueId)
.UseImage("mcr.microsoft.com/mssql/server:2022-latest")
.ExposePort(1433, 1433)
.WithEnvironment("SA_PASSWORD=<YourStrong@Passw0rd>", "ACCEPT_EULA=Y")
.WaitForMessageInLog("Starting up database 'tempdb'.", TimeSpan.FromSeconds(30))
.Build()
.Start();
    ConstructServiceProvider();

}
static int uniq = 0;

I needed also a Base class for consolidating code between sql server and sqlite

  1. generating DI with for both with different context

  2. The Steps are the same = so base class

  3. The tests are the same= so base class

So this is the base class:

public  abstract partial class RealDBTests: FeatureFixture
{
    [SetUp]
    public void Start()
    {
        StartDatabase();
    }
    [TearDown]
    public void Stop()
    {
        StopDatabase();
    }

    public abstract void StartDatabase();

    public abstract void StopDatabase();

    public abstract IServiceCollection AddDB( IServiceCollection sc);


    public void ConstructServiceProvider()
    {
        serviceProvider = AddDB(new ServiceCollection())
//more DI
    }
}

Also , GitHub actions supports docker – so now TILT has a complete testing also in SqlServer.

Tools used

Docker

Visual Studio

Ductus.FluentDocker

TILT–CI and CD–part 6

Because the Source Control is Github and has Actions when submitting the code, I use this.

Also, when creating an Azure WebSite , you can integrate with Github and he will add the yaml for you and the secrets to deploy

I have added also badge to see the result of the action in the readme file. Deploy to Azure build

For the moment , just swagger available to see that the deploy was successfull . Results at https://tiltwebapp.azurewebsites.net/swagger

Tools used:

https://portal.azure.com/#create/Microsoft.WebSite

Github Actions: https://github.com/ignatandrei/TILT/actions

NetCoreUsefullEndpoints-3 CICD

Now I find usefull that, every time that I push some code, the code is build and the nuget package is attached . So GitHub Actions to the rescue.

There will be 2 GitHub actions – one for build and package , other for deploying to the Azure a test application This is the code for building. ( The code for azure is automatically generated by Azure … so no need to put here)

name: .NET

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3
    - name: Setup .NET
      uses: actions/setup-dotnet@v2
      with:
        dotnet-version: 6.0.x
    - name: Restore dependencies
      run: |
        cd src 
        cd UsefullEndpoints
        dotnet tool restore
        dotnet pwsh readme.ps1        
        dotnet restore
    - name: Build
      run: |
        cd src
        cd UsefullEndpoints
        
        dotnet build --no-restore
    - name: Pack
      run: |
        cd src
        cd UsefullEndpoints
        cd UsefullExtensions
        dotnet pack -o ../nugetPackages  --include-symbols --include-source

    - name: 'Upload nuget'
      #if: ${{ github.ref == 'refs/heads/main' }}
      uses: actions/upload-artifact@v2
      with:
        name: UsefullEndpoints_${{github.run_number}}
        path: src/UsefullEndpoints/nugetPackages
        retention-days: 1

You can see

  1. as Swagger at https://netcoreusefullendpoints.azurewebsites.net/swagger

  2. As BlocklyAutomation at https://netcoreusefullendpoints.azurewebsites.net/BlocklyAutomation

  3. As package at https://www.nuget.org/packages/NetCoreUsefullEndpoints

Automatic release GitHub with version

For having releases published automatically on Github , I use this tagged release.yml file as an workflow

name: “tagged-release”
on:
push:
tags:
– “v*”
jobs:
build:

runs-on: ubuntu-latest

steps:
– name: ‘Checkout Github Action’
uses: actions/checkout@master

# code to build the source
– name: Archive production artifacts
uses: actions/upload-artifact@v2
with:
name: nameOfTheApp
path: ‘src/…/*’
retention-days: 1

– name: Archive Release
uses: thedoctor0/zip-release@master
with:
type: ‘zip’
filename: ‘nameOfTheApp.zip’
path: ‘${{github.workspace}}/src/…’
exclusions: ‘*.git* /*node_modules/* .editorconfig’

– name: Release
uses: softprops/action-gh-release@v1
with:
files: |
nameOfTheApp.zip

– name: delete older-releases@v0
uses: dev-drprasad/delete-older-releases@v0.2.0
with:
#repo: / # defaults to current repo
keep_latest: 2
#delete_tag_pattern: beta # defaults to “”
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

FileExtension–part 6 – CI/CD

So now how to make visible all those coding ?

For tests –CodeCov,  https://app.codecov.io/gh/ignatandrei/FileExtension hosts for free to see the coverage

For documentation – ReadTheDocs,  https://fileextension.readthedocs.io/en/latest/ hosts for free.

For packaging  – NuGEt https://www.nuget.org/packages/FileExtension/

For more detailed analysis Sonar https://sonarcloud.io/summary/overall?id=ignatandrei_FileExtension can show code smells and bugs and more

GitHub actions https://github.com/ignatandrei/FileExtension/actions allows me to run all those automatically and gather results

For showing a website – Azure  – https://fileextension.azurewebsites.net/ can show the usage.

I was thinking that it is enough for the people to understand the application

My GITHUB integrations / apps

Github has integrations apps – means bots that automatically interacts with your repository. Those are the bots most used by me:

 

No Name Description
1 All Contributors https://github.com/settings/installations/7389985 Add contributions to the repository. Example at https://github.com/ignatandrei/netcoreblockly , see contributions added automatically
2 Img Bot https://github.com/settings/installations/310858 Automatically optimizes the images and creates a PR for them . Example at https://github.com/ignatandrei/NETCoreBlockly/pull/125
3 Todo Bot https://github.com/settings/installations/73483 Allow  to transfer TODO comments in the code to create a new issue. Example : https://github.com/ignatandrei/NETCoreBlockly/issues/132
4 Triage New Issues https://github.com/settings/installations/7390132  When create a new issue without labels, put the triage label to be easy found later. For example, https://github.com/ignatandrei/NETCoreBlockly/issues/65
5 Weekly Digest https://github.com/settings/installations/7390079  If interested what’s new with your repositories. For example, https://github.com/ignatandrei/NETCoreBlockly/issues/73
6 Depend A Bot https://github.com/settings/installations/652713 Scans the repository for outdated

 

Also, I am a big fan of GitHub Actions – easy to use. See an example at https://github.com/ignatandrei/NETCoreBlockly/blob/master/.github/workflows/dotnetTools.yml

HCV–automatic CI–part 6

I want the tests to be run automatically . And have a code coverage report. So Docker will be generating the report ( with coverlet.console and dotnet-reportgenerator-globaltool ). The GitHub Actions will be responsible with running this every time. The docs folder will be responsible of hosting it .

The code for docker resides in  \src\copyFilesToDocker.txt

FROM mcr.microsoft.com/dotnet/core/sdk:3.1
ENV NODE_ROOT usr/app/
WORKDIR $NODE_ROOT

COPY HealthCheckVersion .
RUN dotnet tool install –global coverlet.console –version 1.7.2
RUN dotnet tool install  -g dotnet-reportgenerator-globaltool –version 4.6.1
RUN dotnet test TestHealthCheckVersion/TestHealthCheckVersion.csproj –logger trx  –logger “console;verbosity=normal” –collect “Code coverage”
ENV PATH=”${PATH}:/root/.dotnet/tools”
RUN coverlet TestHealthCheckVersion/bin/Debug/netcoreapp3.1/TestHealthCheckVersion.dll –target “dotnet” –targetargs “test TestHealthCheckVersion/TestHealthCheckVersion.csproj –configuration Debug –no-build”  –format opencover –exclude “[xunit*]*” –exclude “[*]NetCoreTestProject*”
RUN reportgenerator “-reports:coverage.opencover.xml” “-targetdir:coveragereport” “-reporttypes:HTMLInline;HTMLSummary;Badges”
CMD tail -f /dev/null

The running  the docker is in \src\testNetCoreWin.bat

cls
ECHO please be aware of absolute path here %cd%
docker build -t testcinetcore -f copyFilesToDocker.txt .
docker run -d –name citest  testcinetcore
docker cp citest:/usr/app/coveragereport .
docker container kill citest
docker container rm citest

The code for Github CI is in \.github\workflows\docker-image.yml

name: GenerateCodeCoverage

on:

push:

branches: [ master ]

pull_request:

branches: [ master ]

jobs:

build:

runs-on: ubuntu-latest

steps:

– uses: actions/checkout@v2

– name: Build the Docker image for code coverage

run: |

cd src

chmod +777 ./testNetCoreWin.bat

./testNetCoreWin.bat

ls -lh

echo ‘copy’

cp -r  ./coveragereport/* ../docs/coveragereport/

rm -R ./coveragereport/

echo ‘in docs/coveragereport’

ls -lh ../docs/coveragereport/

echo ‘here’

ls -lh

– name: run commit

run: |

git config –local user.email “action@github.com”

git config –local user.name “GitHub Action”

git add –all

git status

git commit -m “generate code coverage” -a –allow-empty

#shell: cmd

– name: Push changes

uses: ad-m/github-push-action@master

with:

github_token: ${{ secrets.GITHUB_TOKEN }}

And now I can update readme with CI badge and code coverage test and badge

 

You can see the modifications at https://github.com/ignatandrei/HealthCheckVersion/tree/CI

HealthCheckVersion

Health Check for Version
 NameLink
1Idea and Githubhttp://msprogrammer.serviciipeweb.ro/2020/07/20/healthcheckversion-idea-part-1/
2Documentationhttp://msprogrammer.serviciipeweb.ro/2020/07/21/healthcheckversiondocumentation-part-2/
3Testshttp://msprogrammer.serviciipeweb.ro/2020/07/22/hcv-adding-testspart-3/
4Codehttp://msprogrammer.serviciipeweb.ro/2020/07/23/hcv-adding-codepart-4/
5Test Applicationhttp://msprogrammer.serviciipeweb.ro/2020/07/27/hcvadding-test-applicationpart-5/
6CIhttp://msprogrammer.serviciipeweb.ro/2020/07/28/hcvautomatic-cipart-6/
7NuGethttp://msprogrammer.serviciipeweb.ro/2020/07/29/hcvpreparing-for-nugetpart-7/
8PostMortemhttp://msprogrammer.serviciipeweb.ro/2020/07/30/hcv-postmortempart-8/

Generating outdated, licenses and thanks with .NET Core tools

Last time (http://msprogrammer.serviciipeweb.ro/2020/06/08/net-core-local-tools/) I have discussed about local tools . Now it is time to show something in practice, beside code coverage ( detailed http://msprogrammer.serviciipeweb.ro/2019/12/09/code-coveragepart-25/ and video https://youtu.be/JvahoA0WWms  ) ,

Let’ make something simple: generate outdated packages list, licenses and thanks.

I will use this packages

“dotnet-project-licenses”: {

“version”: “2.1.0”,

“commands”: [

“dotnet-project-licenses”

]

},

“dotnetthx”: {

“version”: “0.2.0”,

“commands”: [

“dotnet-thx”

]

},

“dotnet-depends”: {

“version”: “0.4.0”,

“commands”: [

“dotnet-depends”

]

},

“dotnet-outdated”: {

“version”: “2.11.0”,

“commands”: [

“dotnet-outdated”

]

}

And I will make a github action to run  to generate the outdated, licenses and thanks

name: .NET Core

on:

push:

branches: [ master ]

jobs:

build:

runs-on: windows-latest

steps:

– uses: actions/checkout@v2

– name: Setup .NET Core

uses: actions/setup-dotnet@v1

with:

dotnet-version: 3.1.101

– name: Install dependencies

run: |

        cd src

        cd NetCore2Blockly

        dotnet restore

        echo ‘done restore’

        dotnet tool restore –add-source https://myget.org/F/natemcmaster/api/v3/index.json

        dotnet dotnet-project-licenses  -j  -i .

        echo ‘done project licences’

        dotnet dotnet-thx > thanks.txt

        echo ‘done thanks’

        dotnet dotnet-outdated -o outdated.csv -of csv

        echo ‘done outdated’

        dotnet pwsh copyToRoot.ps1

        cd ..

        cd ..

        echo ‘back to source dir’

– name: test

run: echo done

– name: run commit

run: |

        git config –local user.email “action@github.com”

        git config –local user.name “GitHub Action”

        git add –all

        git status

        git commit -m “generate thanks, outdate, licences” -a –allow-empty

shell: cmd

– name: Push changes

uses: ad-m/github-push-action@master

with:

github_token: ${{ secrets.GITHUB_TOKEN }}

The powershell file that copies everything is here:

Move-Item .\licenses.json ..\..\licencesNetCore.json

Write-Host ‘copied licenses.json ‘

Move-Item .\outdated.csv ..\..\outdatedNetCore.csv

Write-Host ‘copied outdated.csv ‘

Move-Item .\thanks.txt ..\..\thanksNetCore.txt

Write-Host ‘copied thanks.txt ‘

And  you can see the result at

https://github.com/ignatandrei/NETCoreBlockly/blob/master/thanksNetCore.txt

https://github.com/ignatandrei/NETCoreBlockly/blob/master/outdatedNetCore.csv

https://github.com/ignatandrei/NETCoreBlockly/blob/master/licencesNetCore.json

You can find also a list of tools here: https://github.com/natemcmaster/dotnet-tools

Andrei Ignat weekly software news(mostly .NET)

* indicates required

Please select all the ways you would like to hear from me:

You can unsubscribe at any time by clicking the link in the footer of our emails. For information about our privacy practices, please visit our website.

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices here.