Pri’s Blog

Package & Distribute WPF Apps using Azure DevOps

2020-12-14T00:00:00+00:00

Packaging and delivering a WPF application to end users can be challenging for someone who is new to Desktop application development, and implementing a reliable DevOps pipeline is even harder, due to the tooling support. But a lot of improvements in the desktop application workflow and the .NET platform itself over the last couple of years, have made this process much smoother.

The .Net team recently released a new mage dotnet tool to create ClickOnce packages. In the past, we had to rely on mage.exe (Manifest Generation and Editing Tool) to create ClickOnce packages. While mage.exe works perfectly, it is challenging to integrate with DevOps. And also there are a few unique challenges with ClickOnce packages:

Unique Application Names - To avoid installation failures, unique application names must be used in application and deployment manifest files for each environment. This is because Windows doesn’t allow installing multiple applications with the same name. For example, if an app is to be named ‘MyApp’, the staging application would need to be denoted as ‘My App (STG)’ while the production application should be ‘My App’. Both cannot be named ‘My App’.
Custom Settings - There are instances when different settings need to be used for each environment. For example, different API urls based on the environment.
Download Location - The ClickOnce package needs to be hosted in a place where users can download and install it. The same location will be used to push new updates to the application.

If you are new to ClickOnce and Azure DevOps, it is best to go through the following articles first.

In this post,

We will be deploying WPF ClickOnce package to Azure App Service.
We will have ClickOnce packages and installations per environment (DEV, SIT etc..)
Most importantly, we are going use the Azure DevOps Pipeline to achieve both of above

Build & Publish

Publishing a WPF application and Razor page web app is pretty straightforward. The dotnet publish command can simply be used. Both Razor page web apps and WPF apps are published to the artifact staging directory so they can be easily uploaded to the pipeline artifacts. A WPF app is published to wwwroot\client\files folder so it will be accessible for users when deployed. publishWebProjects needs to be set to false when publishing a WPF app, and zipAfterPublish should be false as we don’t need the published package to be zipped.

steps:
    - task: NuGetToolInstaller@1

    - task: DotNetCoreCLI@2
      displayName: 'Publish Web'
      inputs:
        command: 'publish'
        publishWebProjects: true
        zipAfterPublish: false
        arguments: '--configuration $(BuildConfiguration) --output $(Build.ArtifactStagingDirectory)'

    - task: DotNetCoreCLI@2
      displayName: 'Publish Client'
      inputs:
        command: 'publish'
        publishWebProjects: false
        projects: '**/PrismClient.csproj'
        arguments: '--configuration $(BuildConfiguration) --output $(Build.ArtifactStagingDirectory)\PrismWeb\wwwroot\client\files'
        zipAfterPublish: false
        modifyOutputPath: false

    - task: PublishBuildArtifacts@1
      inputs:
        PathtoPublish: '$(Build.ArtifactStagingDirectory)'
        ArtifactName: 'drop'
        publishLocation: 'Container'

Update Settings

Here, a simple PowerShell script is used to replace variables, as only one variable is being updated. If there are more variables to be replaced, and if key vault integration is needed, it is better to use thirty custom steps like XDT Transform and Replace Tokens.

- task: PowerShell@2
      displayName: 'Update Variables'
      inputs:
        targetType: 'inline'
        script: |
              $config = "$(Pipeline.Workspace)\drop\PrismWeb\wwwroot\client\files\PrismClient.dll.config"
              Write-Host "$config"
              $xml = [xml](get-content $config)
              Write-Host "$xml"
              $env  = $xml.SelectSingleNode("//*[local-name()='setting'][@name='Env']/*[local-name()='value']");
              $env.InnerText = "$"
              $xml.Save($config)  
        workingDirectory: '$(Pipeline.Workspace)\drop\PrismWeb\wwwroot\client'

Generate ClickOnce Package

First, install the mage dotnet tool

- task: CmdLine@2
      displayName: 'Install dotnet mage tool'
      inputs:
        script: 'dotnet tool install --global microsoft.dotnet.mage --version 5.0.0'

Generate launcher.exe

- task: CmdLine@2
      displayName: 'ClickOnce - Add Launcher'
      inputs:
        script: 'dotnet mage -al PrismClient.exe -td files'
        workingDirectory: '$(Pipeline.Workspace)\drop\PrismWeb\wwwroot\client'

Create the application manifest

- task: CmdLine@2
      displayName: 'ClickOnce - Create application manifest'
      inputs:
        script: 'dotnet mage -new Application -t files\PrismClient.manifest -n "Prism App ($)" -fd files -v "1.0.0.$(Build.BuildId)"'
        workingDirectory: '$(Pipeline.Workspace)\drop\PrismWeb\wwwroot\client'

Create the deployment manifest

- task: CmdLine@2
      displayName: 'ClickOnce - Create deployment manifest'
      inputs:
        script: 'dotnet mage -new Deployment -Install true -pub "Prism Tech" -n "Prism App ($)" -v "1.0.0.$(Build.BuildId)" -AppManifest files\PrismClient.manifest -t PrismClient.application -pu "https://prism-web-as-$-ae.azurewebsites.net/client/PrismClient.application"'
        workingDirectory: '$(Pipeline.Workspace)\drop\PrismWeb\wwwroot\client'

Update the file extension to .deploy as a workaround for download restrictions

- task: PowerShell@2
      displayName: 'Change File Extension to .deploy'
      inputs:
        targetType: 'inline'
        script: 'Get-ChildItem -File -Recurse -Exclude "*.manifest" | % { Rename-Item -Path $_.PSPath -NewName "$($_.Name).deploy" }'
        workingDirectory: '$(Pipeline.Workspace)\drop\PrismWeb\wwwroot\client\files'

mapFileExtensions needs to be set to true in the deployment manifest when files have .deploy extension

- task: PowerShell@2
      displayName: 'Set mapFileExtensions'
      inputs:
        targetType: 'inline'
        script: |
              $applicationManifest = "$(Pipeline.Workspace)\drop\PrismWeb\wwwroot\client\PrismClient.application"
              Write-Host "$applicationManifest"
              $xml = [xml](get-content $applicationManifest)
              Write-Host "$xml"
              $deployment = $xml.SelectSingleNode("//*[local-name()='deployment']")
              $mapFileExtensions = $xml.CreateAttribute("mapFileExtensions");
              $mapFileExtensions.set_Value("true");
              $deployment.SetAttributeNode($mapFileExtensions)
              $xml.Save($applicationManifest)  
        workingDirectory: '$(Pipeline.Workspace)\drop\PrismWeb\wwwroot\client'

Sign Manifest

The CertFile parameter can be used to sign the application and deployment manifest files. When the ClickOnce package is signed, the ClickOnce application publisher is shown on the install prompt, so end-users can verify the publisher of the WPF application.

dotnet mage -new Application -t files\PrismClient.manifest -fd files -v 1.0.0.2 -CertFile .\Prism.pfx  -Password Prism@1
 
dotnet mage -new Deployment -Install true -pub "Prism Tech" -v 1.0.0.2 -AppManifest files\PrismClient.manifest -t PrismClient.application  -CertFile .\Prism.pfx  -Password Prism@1

Deploy Website

- task: AzureWebApp@1
      displayName: 'Deploy Web'
      inputs:
        azureSubscription: 'LankapuraPAYG'
        appType: 'webApp'
        appName: 'prism-web-as-$-ae'
        package: '$(Pipeline.Workspace)/drop/PrismWeb'
        deploymentMethod: 'auto'

Outcome

Azure DevOps Pipelines

Multi stage pipeline to build and deploy Razor pages app with ClickOnce package.

Pipeline steps of Build stage and Dev Deploy stage.

DevOps URL: https://dev.azure.com/pridevops/Prism/_build?definitionId=2&_a=summary
Website to download ClickOnce package - https://prism-web-as-dev-ae.azurewebsites.net/

Here’s how deployed files look like in Azure app service
Installed WPF App

WPF sample apps in the start menu.

WPF sample apps running side by side.

Full source code is available at https://github.com/lankaapura/prism

Documentation for the dotnet mage and mage.exe can be found at:

Angular Beginner FAQ

2018-06-13T00:00:00+00:00

So you have been assigned to an Angular project? You need to get yourself up to date fast. Here are few questions that I asked myself during my Angular learning journey. Hope this will answer some of your questions.

Where do I start?

What are all these tools?

Getting Started With Node.js

What is RXJS and Observables

How do I interact with DOM?

What is Angular CLI?

How do I debug?

Where can I find plugins?

What is SSR?

What is AoT?

What are the best practices?

Angular 1, 2, 4 or 6?

How do I keep myself up to date?

New ECMAScript 6 Features

2018-05-04T00:00:00+00:00

Following are the list of new features available in ECMAScript 6.

Block-Scoped Variables (Let and Const)

// ES6
for (let i = 0; i < a.length; i++) {
    let x = a[i]
    …
}

// ES5
var i, x, y;
for (i = 0; i < a.length; i++) {
    x = a[i];
    …
}

Parameter Handling

Default

// ES6
function f (x, y = 7, z = 42) {
    return x + y + z
}
f(1);

// ES5
function f (x, y, z) {
    if (y === undefined)
        y = 7;
    if (z === undefined)
        z = 42;
    return x + y + z;
};
f(1);

Spread

// ES6
var params = [ "hello", true, 7 ]
var other = [ 1, 2, ...params ] // [ 1, 2, "hello", true, 7 ]

function f (x, y, ...a) {
    return (x + y) * a.length
}
f(1, 2, ...params)

// ES5
var params = [ "hello", true, 7 ];
var other = [ 1, 2 ].concat(params); // [ 1, 2, "hello", true, 7 ]

function f (x, y) {
    var a = Array.prototype.slice.call(arguments, 2);
    return (x + y) * a.length;
};
f.apply(undefined, [ 1, 2 ].concat(params));

Rest

// ES6
function f (x, y, ...a) {
    return (x + y) * a.length
}
f(1, 2, "hello", true, 7)

// ES5
function f (x, y) {
    var a = Array.prototype.slice.call(arguments, 2);
    return (x + y) * a.length;
};
f(1, 2, "hello", true, 7);

Destructuring Assignment

Array Matching

// ES6
var list = [ 1, 2, 3 ]
var [ a, , b ] = list
[ b, a ] = [ a, b ]

// ES5
var list = [ 1, 2, 3 ];
var a = list[0], b = list[2];
var tmp = a; a = b; b = tmp;

Object Matching

// ES6
var { op, lhs, rhs } = getASTNode()
var { op: a, lhs: { op: b }, rhs: c } = getASTNode()

// ES5
var tmp = getASTNode();
var op  = tmp.op;
var lhs = tmp.lhs;
var rhs = tmp.rhs;

var tmp = getASTNode();
var a = tmp.op;
var b = tmp.lhs.op;
var c = tmp.rhs;

Object And Array Matching, Default Values

// ES6
var obj = { a: 1 }
var list = [ 1 ]
var { a, b = 2 } = obj
var [ x, y = 2 ] = list

// ES5
var obj = { a: 1 };
var list = [ 1 ];
var a = obj.a;
var b = obj.b === undefined ? 2 : obj.b;
var x = list[0];
var y = list[1] === undefined ? 2 : list[1];

Parameter Context Matching

// ES6
function f ([ name, val ]) {
    console.log(name, val)
}
function g ({ name: n, val: v }) {
    console.log(n, v)
}
function h ({ name, val }) {
    console.log(name, val)
}
f([ "bar", 42 ])
g({ name: "foo", val:  7 })
h({ name: "bar", val: 42 })

// ES5
function f (arg) {
    var name = arg[0];
    var val  = arg[1];
    console.log(name, val);
};
function g (arg) {
    var n = arg.name;
    var v = arg.val;
    console.log(n, v);
};
function h (arg) {
    var name = arg.name;
    var val  = arg.val;
    console.log(name, val);
};
f([ "bar", 42 ]);
g({ name: "foo", val:  7 });
h({ name: "bar", val: 42 });

Fail-Soft Destructuring

// ES6
var list = [ 7, 42 ]
var [ a = 1, b = 2, c = 3, d ] = list
a === 7
b === 42
c === 3
d === undefined

// ES5
var list = [ 7, 42 ];
var a = typeof list[0] !== "undefined" ? list[0] : 1;
var b = typeof list[1] !== "undefined" ? list[1] : 2;
var c = typeof list[2] !== "undefined" ? list[2] : 3;
var d = typeof list[3] !== "undefined" ? list[3] : undefined;
a === 7;
b === 42;
c === 3;
d === undefined;

Arrow Functions

Expression Bodies

// ES6
odds  = evens.map(v => v + 1)
pairs = evens.map(v => ({ even: v, odd: v + 1 }))
nums  = evens.map((v, i) => v + i)

// ES5
odds  = evens.map(function (v) { return v + 1; });
pairs = evens.map(function (v) { return { even: v, odd: v + 1 }; });
nums  = evens.map(function (v, i) { return v + i; });

Statement Bodies

// ES6
nums.forEach(v => {
   if (v % 5 === 0)
       fives.push(v)
})

// ES5
nums.forEach(function (v) {
   if (v % 5 === 0)
       fives.push(v);
});

Lexical this

// ES6
this.nums.forEach((v) => {
    if (v % 5 === 0)
        this.fives.push(v)
})

// ES5
var self = this;
this.nums.forEach(function (v) {
    if (v % 5 === 0)
        self.fives.push(v);
});

Template Literals

String Interpolation

// ES6
var customer = { name: "Foo" }
var card = { amount: 7, product: "Bar", unitprice: 42 }
var message = `Hello ${customer.name},
want to buy ${card.amount} ${card.product} for
a total of ${card.amount * card.unitprice} bucks?`

// ES5
var customer = { name: "Foo" };
var card = { amount: 7, product: "Bar", unitprice: 42 };
var message = "Hello " + customer.name + ",\n" +
"want to buy " + card.amount + " " + card.product + " for\n" +
"a total of " + (card.amount * card.unitprice) + " bucks?";

Custom Interpolation

// ES6
get`http://example.com/foo?bar=${bar + baz}&quux=${quux}`

// ES5
get([ "http://example.com/foo?bar=", "&quux=", "" ],bar + baz, quux);

Classes

Class Definition

// ES6
class Shape {
    constructor (id, x, y) {
        this.id = id
        this.move(x, y)
    }
    move (x, y) {
        this.x = x
        this.y = y
    }
}

// ES5
var Shape = function (id, x, y) {
    this.id = id;
    this.move(x, y);
};
Shape.prototype.move = function (x, y) {
    this.x = x;
    this.y = y;
};

Class Inheritance

// ES6
class Rectangle extends Shape {
    constructor (id, x, y, width, height) {
        super(id, x, y)
        this.width  = width
        this.height = height
    }
}
class Circle extends Shape {
    constructor (id, x, y, radius) {
        super(id, x, y)
        this.radius = radius
    }
}

// ES5
var Rectangle = function (id, x, y, width, height) {
    Shape.call(this, id, x, y);
    this.width  = width;
    this.height = height;
};
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
var Circle = function (id, x, y, radius) {
    Shape.call(this, id, x, y);
    this.radius = radius;
};
Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;

Promises

// ES6
function msgAfterTimeout (msg, who, timeout) {
    return new Promise((resolve, reject) => {
        setTimeout(() => resolve(`${msg} Hello ${who}!`), timeout)
    })
}
msgAfterTimeout("", "Foo", 100).then((msg) =>
    msgAfterTimeout(msg, "Bar", 200)
).then((msg) => {
    console.log(`done after 300ms:${msg}`)
})

// ES5
function msgAfterTimeout (msg, who, timeout, onDone) {
    setTimeout(function () {
        onDone(msg + " Hello " + who + "!");
    }, timeout);
}
msgAfterTimeout("", "Foo", 100, function (msg) {
    msgAfterTimeout(msg, "Bar", 200, function (msg) {
        console.log("done after 300ms:" + msg);
    });
});

Code samples from es6-features.org.

Webpack 4 Resources

2018-03-05T00:00:00+00:00

Webpack 4 : Legato is out with a lot of new features. Here’s a curated list of related blog posts that I found.

🎼webpack 4: released today!!✨by Sean T. Larkin
Webpack 4 release notes
Webpack series by Tobias Koppers
Webpack 4.0 Release: What’s New? by Auth0

Copy to Clipboard Using Javascript

2018-01-29T00:00:00+00:00

Ever wanted to copy something to the clipboard programmatically using javascript? Here’s how to do it for few different use cases.

Simple Use Cases

We can use following simple function to copy any variable to clipboard.

  function CopyToClipBoardHandler(value) {
    const copyListener = event => {
      document.removeEventListener('copy', copyListener, true);
      event.preventDefault();
      const clipboardData = event.clipboardData;
      clipboardData.clearData();
      clipboardData.setData('text/plain', value);
    };
    document.addEventListener('copy', copyListener, true);
    document.execCommand('copy');
  }
}

Demo

Advanced Use Cases

We can use clipboardjs to implement advanced requirements. You can set it up with few lines of code, it doesn’t have any external dependencies, and it’s only 3KB.

    <!-- 1. Define some markup -->
    <div id="btn" data-clipboard-text="1">
        <span>Copy</span>
    </div>

    <!-- 2. Include library -->
    <script src="clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard by passing a HTML element -->
    <script>
    var btn = document.getElementById('btn');
    var clipboard = new Clipboard(btn);
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>

More examples can be found on github.

Demo

Important

Copy commands triggered from document.execCommand() will only work if the event is dispatched from an event that is trusted and triggered by the user.

Browser compatibility


42+	12+	41+	9+	29+	10+

Angular/Asp.Net Core Server Side Rendering for Authenticated Users

2017-12-14T00:00:00+00:00

This is a follow up to “Angular/Asp.Net Core Authentication with Identity Server 4.” I’ll be using the same source code in this post.

Once you set up authentication in the Angular application, you will notice that the server side renderer no longer returns pre-rendered HTML.

This is because angular-oauth2-oidc is using browser session storage to store the OAuth token that received from the Identity Server. Therefore, the server pre-renderer can’t make authenticated HTTP requests, since session storage is not available during the server pre-rendering step. So how are we going to send the OAuth token to the server side?

By using good old Cookies!

angular-oauth2-oidc has a OAuthStorage interface that we can use to implement and define our own token storage implementation. But we need different implementations for client side and server side. This is because, even though we can access cookies directly on the client side, it is not possible to do so during server pre-rendering due to the nature of how pre-rendering works inside ASP.NET core SPA services. Could there be a way to access cookies during pre-rendering?

ASP.NET core has provided the ‘asp-prerender-data’ prop to pass any data to the server renderer function. Using that, we can retrieve the same parameter and pass it to Angular as a provider which can be resolved in any Angular service or component.

The next step is to implement the Token store service for server renderer. Here, we can resolve ‘cookies’ which contains cookies of the current request. So when the server renderer requests the OAuth token, it can be retrieved from cookies.

Finally, we need to tell Angular to use our token store implementations for OAuthStorage interface.

Once the user is authenticated from Identity server, the OAuth token should be available to the server renderer now.

Therefore, we should be able to see pre-rendered HTML during the initial loading of our application.

Complete source code can be found on GitHub.

Angular Asp Net Core Authentication With Identity Server 4

2017-12-13T00:00:00+00:00

Setting up Authentication for applications can be intimidating. Usually it doesn’t involve writing a lot of code, because good folks like these have invested their time to do all the hard work for us. As a result, most of the time we are dealing with configurations. Setting up authentication for Angular SPA is no different.

This post covers the following topics:

Integrating Angular SPA with Identity Server Implicit Flow
Configuring ASP.NET core web API to validate tokens

This post doesn’t cover setting up Identity Server. I’ll be using this Identity Server demo site in my sample since it can be easily accessed and integrated. Read this post by Scott Brady to learn more about Identity Server.

Identity Server Implicit Flow

The implicit grant type is optimized for browser-based applications. Either for user authentication-only (both server-side and JavaScript applications), or authentication and access token requests (JavaScript applications).

http://docs.identityserver.io

Create Angular Project

Let’s create an angular application using dotnet CLI.

dotnet new angular

Default template has old angular packages. So, let’s update them to their latest versions. We will be using Angular 4.4.6 Since the AspNet core template doesn’t support Angular 5 properly.

Angular OAuth Packages

Identity Server has provided a JavaScript plugin odic-client-js to integrate browser based applications. However, it was not implemented targeting modern browser-based applications such as Angular and React. So you will run in to issues when using server-side rendering and AoT compilation. Thankfully, the community has come forward with solutions! There are two OpendID Certified plugins for Angular:

angular-oauth2-oidc by Manfred Steyer
angular-auth-oidc-client by Damien Bowden

I chose angular-oauth2-oidc since it supports password flow as well.

npm i angular-oauth2-oidc --save

I had to install es-promise package to prevent build failure.

npm install es6-promise --save

Angular-oauth2-oidc Setup

Now that we have the base project, it’s time to configure angular SPA for identity server. First, we should import the OAuth Module and HttpClient Module to our application.

Then we should define Identity sever details.

Next, OAuth Module should be initialized using config object. We don’t need our application trying to connect to Identity Server and retrieve tokens during server pre-rendering, so everything is wrapped inside isPlatformBrowser code blocks.

Now, how are we going to force users to log-in to our application?

Setup Route Guard

We can define a logic in a route guard to be validated before navigating to a requested route. Using a route guard, we can prevent users navigating to our application without a valid token.

Setup OAuth Callback

If you check the authConfig redirect URI, Identity server is configured to redirect to ‘/’ after a successful authentication attempt. It is important NOT to have an AuthGuard for that particular route. Otherwise the application won’t be able to retrieve the token from the query string, resulting in a redirect loop.

Now we should be getting a token from Identity server. But how do we add it to our API requests and validate it from Web API side?

Making HTTP Requests with OAuth Tokens

We can use HTTP interceptor, that was introduced in Angular 4.3, to include the OAuth token in all HTTP requests. You might notice it resolves dependencies differently. The reason is a known issue which makes circular dependencies between modules.

ASP.NET Core OAuth Token Validator

Finally we need to validate OAuth tokens in the web server. That can be easily achieved using the Identity Server Access Token Validation package.

dotnet add package IdentityServer4.AccessTokenValidation

Now Angular SPA should be redirected to Identity server to authenticate, and should redirect back to angular SPA upon successful authentication.

Full source code can be found on GitHub.

Next, how do we use server side rendering for Authenticated users? Find out in my next post.