PeakSWC.RemoteBlazorWebView.Wpf 9.0.0-rc2

This is a prerelease version of PeakSWC.RemoteBlazorWebView.Wpf.
There is a newer version of this package available.
See the version list below for details.
dotnet add package PeakSWC.RemoteBlazorWebView.Wpf --version 9.0.0-rc2                
NuGet\Install-Package PeakSWC.RemoteBlazorWebView.Wpf -Version 9.0.0-rc2                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="PeakSWC.RemoteBlazorWebView.Wpf" Version="9.0.0-rc2" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add PeakSWC.RemoteBlazorWebView.Wpf --version 9.0.0-rc2                
#r "nuget: PeakSWC.RemoteBlazorWebView.Wpf, 9.0.0-rc2"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install PeakSWC.RemoteBlazorWebView.Wpf as a Cake Addin
#addin nuget:?package=PeakSWC.RemoteBlazorWebView.Wpf&version=9.0.0-rc2&prerelease

// Install PeakSWC.RemoteBlazorWebView.Wpf as a Cake Tool
#tool nuget:?package=PeakSWC.RemoteBlazorWebView.Wpf&version=9.0.0-rc2&prerelease                

RemoteBlazorWebViewTutorial

Microsoft is currently supporting two Blazor WebView Controls in .NET 9. One control (Microsoft.AspNetCore.Components.WebView.Wpf) targets Windows Presentation Foundation (WPF) apps and the other (Microsoft.AspNetCore.Components.WebView.WindowsForms) targets Windows Form (WinForms) apps. These Microsoft controls enable developers to create user interfaces for desktop apps using Blazor web technology. Desktop apps using Blazor have the full feature set and performance of .NET 9 and are not constrained like a Blazor WebAssembly app.

The Remote versions of the Blazor WebView Controls (PeakSWC.RemoteBlazorWebView.Wpf and PeakSWC.RemoteBlazorWebView.WindowsForms) serve as a drop-in replacements for the Microsoft controls, with the added ability to access the user interface over a secure connection to a public server using a web browser. This is achieved by setting up a secure server (RemoteWebWindowService) in the cloud and pointing your browser to it. With a few minor changes, you can run your app locally or remotely control your application.

The RemoteBlazorWebView package allows developers to create a Blazor UI on Windows, Mac, and Linux. RemoteBlazorWebView is based on Microsoft's WebView control and Photino.Blazor. It shares the same server with the WinForms and Wpf controls (RemoteWebWindowService).

Use Cases

The primary use case is to be able to share a desktop application controlling hardware with an external service technician. Typically, the application is behind a corporate firewall and is not easily accessed by the technician. The Remote Blazor controls enables the desktop application to be started in "Remote" mode which generates a unique Url for the technician to access the user interface.

Another use case is to be able to monitor data that is behind a firewall or on a private network without the cost and complexity to store the data externally. For example, if a brewer wanted to monitor fermentation data such as PH, Gravity, and Pressure they could build an app showing real-time graphical data using Blazor components and, with only a couple of changes, be able to view the user interface with a web browser from outside of the firewall.

How it works

RemoteBlazorWebView.Wpf has two modes of operation. In the first default mode, it works just like the Microsoft BlazorWebView Controls (see BlazorDesktopWPF). In the second mode, a url is specified on the control's properties. In this mode, all GUI interactions are sent to a server that can be accessed with a browser. Hosting the server (RemotableWebViewService.exe) in the cloud allows you to remotely control an application which is behind a firewall or does not have a static IP address.

Demo Video

RemoteBlazorWebView

Download and Run Demo

  • Download the latest Release.zip under the Assets folder from https://github.com/budcribar/RemoteBlazorWebViewTutorial/releases

  • Extract the files

  • Run either the WinForms (RemoteBlazorWebViewTutorial.WinFormsApp.exe) or the Wpf Sample Program (RemoteBlazorWebViewTutorial.WpfApp.exe) which shows the Blazor UI running normally

  • Next start the server and run the sample application through the browser

    • Open a powershell window and execute RemoteWebViewService in the background
    .\RemoteWebViewService &
    
    • Run the sample program with the local server option
    .\RemoteBlazorWebViewTutorial.WpfApp.exe -u=https://localhost:5001
    
    • Click the link in the sample program
  • Finally, Run the sample program and use the secured cloud server

    .\RemoteBlazorWebViewTutorial.WpfApp.exe -u=https://server.remoteblazorwebview.com:443
    
    • Click the link in the sample program
    • Create a new user and sign in

Build and Run Demo

  • Install the RemoteWebViewService
dotnet tool update -g PeakSWC.RemoteWebViewService --version 8.*-* 
  • Start the server
RemoteWebViewService
  • Open the RemoteBlazorWebViewTutorial.sln with Visual Studio

  • Select the Local Profile from the dropdown next to the Run button and click on run

  • Make sure the RemoteBlazorWebViewTutorial.WpfApp is set as Startup Project

  • Next we will run the application remotely

  • Select the Remote Profile from the dropdown next to the Run button and click on run

  • A main window will come up with a URL. Click on it

  • At this point the sample blazor app will be running in a web browser served from RemoteWebViewService!

  • Finally, we will run the application from a cloud server (https://server.remoteblazorwebview.com/)

  • Select the Cloud Profile from the dropdown next to the Run button and click on run

  • A main window will come up with a URL. Click on it

  • At this point the sample blazor app will be running in a web browser served from https://server.remoteblazorwebview.com. Accessing the server will require that you set up a login. The server is setup for demo purposes only. Contact me at budcribar@msn.com if you would like help setting up a production server.

Security

Each time a client application starts it attaches to the server with a unique Guid. This Guid needs to be specified on the Url in order to access the application and provides the first layer of security. The application is locked once a browser attaches to the server at a given Guid and no other browser instance has access.

The demo version of the RemoteWebViewService does not include authentication but it can be built and configured with Azure AD B2C. When built with Azure AD B2C authentication, the server requires that users are authenticated in order to access the endpoints which serve up the demo application user interface. The server code is hosted in the RemoteBlazorWebView github repository and includes a Visual Studio project to build the server. This added layer of security should be sufficient for most use cases but the server can be further locked down with firewall rules if needed.

Changing the default server port

Create an appsettings.json file with the contents: (Replace 5002 with the desired port)

{
  "Kestrel": {
    "Endpoints": {
      "Https": {
        "Url": "https://localhost:5002"
      }
    }
  }
}

  • Copy the appsettings.json into the directory
cd %USERPROFILE%\.dotnet\tools

Convert To Remote

Converting a WPF Blazor Application to a Remote WPF Blazor Application

Product Compatible and additional computed target framework versions.
.NET net9.0-windows7.0 is compatible. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
9.0.0 86 11/14/2024
9.0.0-rc2 56 10/26/2024
9.0.0-preview7 227 8/19/2024
9.0.0-preview6 47 7/29/2024
9.0.0-preview5 69 6/23/2024
8.0.11 75 11/14/2024
8.0.10 346 10/10/2024
8.0.8 243 8/20/2024
8.0.7 97 7/29/2024
8.0.6 220 6/19/2024
8.0.4 119 6/19/2024
8.0.3 132 4/20/2024
8.0.2 618 2/23/2024
8.0.1 127 2/16/2024
8.0.0 192 12/30/2023
8.0.0-rc2 81 10/14/2023
8.0.0-preview5 101 6/15/2023
8.0.0-preview4 102 5/24/2023
8.0.0-preview3 111 4/21/2023
8.0.0-preview2 110 3/29/2023
7.0.16 140 2/25/2024
7.0.14 155 12/29/2023
7.0.12 268 10/14/2023
7.0.9 193 8/15/2023
7.0.7 210 6/14/2023
7.0.5 1,828 4/20/2023
7.0.4 346 3/24/2023
7.0.3 239 3/17/2023
7.0.2 324 1/29/2023
7.0.0 414 11/13/2022
7.0.0-rc1 130 10/9/2022
7.0.0-pre6 203 7/14/2022
7.0.0-pre5 212 7/2/2022
7.0.0-pre4 155 5/11/2022
6.3.9 699 2/11/2023
6.3.8 309 2/1/2023
6.3.7 298 1/31/2023
6.3.6 409 11/13/2022
6.3.5 444 10/11/2022
6.3.4 1,301 7/13/2022
6.3.3 652 7/3/2022
6.3.2 462 6/15/2022
6.3.1 679 5/25/2022
6.3.0 181 5/21/2022
6.2.0 211 5/8/2022
6.1.2-pre 152 4/7/2022
6.1.1-pre 482 2/19/2022
6.1.0-pre 222 2/7/2022
6.0.38-pre 175 2/1/2022
6.0.37-pre 190 1/25/2022
6.0.36 250 1/4/2022
6.0.35 187 1/1/2022
6.0.34 171 12/30/2021
6.0.33 162 12/29/2021
6.0.32 241 12/12/2021
6.0.31 257 12/4/2021
6.0.30 770 12/3/2021
6.0.29 245 11/17/2021
6.0.28-rc2 217 10/14/2021
6.0.27-rc1 195 10/11/2021
6.0.26-rc1 154 10/7/2021
6.0.25-rc1 204 10/4/2021
6.0.24-rc1 237 10/1/2021
6.0.23-rc1 200 9/26/2021
6.0.22-rc1 185 9/15/2021
6.0.21-preview7 205 9/7/2021
6.0.20-preview7 185 8/26/2021
6.0.16-preview7 157 8/25/2021
6.0.15-preview7 180 8/13/2021
6.0.13-preview6 162 8/9/2021
6.0.12-preview6 232 8/1/2021
6.0.11-preview6 155 7/16/2021
6.0.10-preview5 283 7/10/2021
6.0.9-preview5 244 6/29/2021
6.0.8-preview5 244 6/22/2021
6.0.7-preview4 165 6/17/2021
6.0.6-preview4 159 6/1/2021
6.0.5-preview4 197 5/28/2021
6.0.4-preview4 197 5/28/2021
6.0.3-preview4 183 5/26/2021
6.0.2-preview3 155 5/26/2021
6.0.1-preview3 173 5/22/2021
0.1.7-pre 251 5/25/2021
0.1.6-pre 253 2/21/2021
0.1.4-pre 388 11/1/2020

Based on maui 9.0.0-rc.2