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

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

• Start the server

• 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)

• Copy the appsettings.json into the directory

Convert To Remote

Converting a WPF Blazor Application to a Remote WPF Blazor Application