Deploy Node/React/Next.js application to Azure App Service

 To deploy your Next.js dashboard (with App Router) to Azure App Service, follow these steps. 

Azure supports Next.js out-of-the-box with static and server-rendered content, including middleware.

microsoft/copilot-metrics-dashboard

>>C:\copilot-metrics-dashboard\src\dashboard>

1. Prepare Your App for Azure, Ensure your app is ready:

package.json must have a build and start script:

{

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  }
}

You're using App Router (e.g., app/page.tsx), so next build will generate both static and server-rendered routes.

2. Create Production Build (Locally or via CI), run through VSC

npm install

npm run build

npm start - This confirms your app runs as a production server with next start.

Make sure the build completes successfully.

Install Docker CLI on Windows

 

Step-by-Step: Install Docker CLI on Windows

1. Download the Docker CLI Binary

• Visit the official Docker static binaries repository:

  https://download.docker.com/win/static/stable/x86_64/

• Download the latest .zip archive, for example: docker-28.3.0.zip

2. Extract the Archive

• Extract the contents of the .zip file to a directory of your choice, such as: C:\Tools\DockerCLI

• Inside this directory, you should find the docker.exe file.

3. Add Docker CLI to System PATH

• Open PowerShell as Administrator and run the following command to add the directory to your system's PATH:

  [System.Environment]::SetEnvironmentVariable("Path", $env:Path + ";C:\Tools\DockerCLI", [System.EnvironmentVariableTarget]::Machine)
  

  Replace C:\Tools\DockerCLI with the path where you extracted docker.exe.

• Restart your terminal to apply the changes.

4. Verify the Installation

• Open a new PowerShell or Command Prompt and run: docker version

  You should see output similar to:

  Client: Docker CLI

Blazor Event Handling - onclick, onmousemove, onchange

1. onclick event

        Component View

<button @onclick="@Button_Click">@ButtonText</button>

<div class="text-left @CssClass"><img src="@Photo" /></div>

        Component Class

protected string ButtonText { get; set; } = "Hide";

protected string CssClass { get; set; } = null;

protected void Button_Click()

{

    if (ButtonText == "Hide")

    {

ButtonText = "Show";

CssClass = "HideImage";

    }

    else

    {

CssClass = null;

ButtonText = "Hide";

    }

}

        CSS Class

.HideImage{

    display:none;

}

Call REST API from ASP.NET Core Blazor

Blazor component can call REST API directly, but create a separate service that calls the REST API.

Solution Structure

1. Customer.API project using Repository Pattern

2. Customer.Models project to share between API and Blazor AppServer

3. Cusotmer.Server Blazoe AppServer project.

MicroSoft Blazor

 Blazor

Today's web development, use both server-side (C#, Java,...) and client-side (JavaScript frameworks like Angular, React,..) technologies. 

Use C# both for server & client side development, that's Blazor. Blazor lets you build interactive web UIs using C# instead of JavaScript.

Blazor can run client-side C# code (or any type of code) directly in the browser, using WebAssembly. It runs in the same security sandbox as JavaScript frameworks like Angular, React, etc. 

WebAssembly is based on open web standards without using plug-ins or code transpilation. It works in all modern browsers including mobile browsers.  

There are 2 Blazor hosting models: Blazor WebAssembly (the client-side) and Blazor Server (the server) .

Kubernetes Deployment Update Strategy

Kubernetes creates a second ReplicaSet, where it deploys the new pods and removes the old one from the original ReplicaSet

2 Types of Update Strategies in Kubernetes.  

Recreate: Removes the previous version and loads the new, good for development(interrupting the service). 

RollingUpdate (default): it updates to a new version gradually based on configured parameters.

The parameters are: 

maxUnavailable: The number/percentage of pods that can be unavailable during the update. 

maxSurge: The number/percentage of pods that can exceed the replicas requested. 

minReadySeconds: The number(only) of seconds to wait before the next pod’s creation. 

Kubernetes ReplicaSet selector with matchExpressions

ReplicaSet is a tool to manage the pod replicas and update strategies, and it is more flexible than the replication controller. 

It provides set-based labels selection support instead of the equality-based labels (ReplicationController). 

With equality-based (a replication controller) labels support, you can match labels only with an "is equal" or "is not equal" assertion. 

Match a group of pods that has a label zone with the value prod or test, but not both of them

With a set-based labels selection, you can express more powerful assertions, like in, not in, or exists. 

Match all the pods with the prod label in prod and test, using the matchExpressions property of the selector 

deployment_replicaset.yaml

--- 
apiVersion: apps/v1
kind: Deployment
metadata: 
  name: myapp-deployment_replicatset
spec: 
   replicas: 3  
   selector:    
     matchLabels:
       app: myapp
     matchExpressions:
       - {key: zone, operator: In, values: [prod, test]} 
   template:    
     metadata:         
       labels:           
         app: myapp           
         zone: prod           
         version: v1        
     spec:           
       containers:             
         - name: myapp-frontendmvc              
           image: makader/myapp:frontendmvc-v1              
           ports:               
             - containerPort: 80

Deploy ASP.NET CORE application with the Kubernetes Deployments

Update the application with a rolling update strategy that releases new pods more gradually, one pod at a time. 

Roll back the application to a specific version of the deploy history using the deployment. 

Run the command without --restart=Never (Deploy ASP.NET Core Application images in Kubernetes (K8s) & POD). Command to create a simple deployment 

 kubectl run frontendmvcv1 --image=makader/myapp:frontendmvc-v1 --port 80 

kubectl get deployment frontendmvcv1

ASP.NET Core SignalR Chart Hub Application using Chartist.js

 https://gionkunz.github.io/chartist-js/

https://github.com/mkader/SignalRExample
 

Real time Chart Application Use Cases

• Real-time KPI (key performance indicator) dashboard of sales figures, 
• Stock market price ticker 
• Shared calendar scheduler
• Notification dashboard (like doctor in/out for a hospital ward)

ASP.NET Core SignalR Application

https://github.com/mkader/SignalRExample

Create a new ASP.NET Core (3.1 or later ) Web Application (whatsupchat) with HTTPS

Add the JavaScript SignalR Client Library.