web-ui

.NET desktop app with Shadcn UI

This folder contains a cross-platform desktop and web application combining a React + TypeScript frontend (using Vite) and a .NET Avalonia UI desktop app wrapping this React frontend as its UI.

Prerequisites

• Node.js (v22.12+ required)
• npm or yarn
• .NET SDK (v8.0 required)

Project Structure

• reactexample/ — React + TypeScript web frontend.
• ReactExample.Desktop/ — .NET Avalonia desktop application that utilizes the web frontend as its UI.
• proto — shared Protobuf declarations for communicating between JavaScript and .NET via gRPC.

Build Instructions

Download Node.js dependencies

After cloning the repository, you need to run npm install in the reactexample directory to download all the necessary dependencies listed in its package.json file.

cd reactexample
npm install

Setup the DotNetBrowser license key

You must have a license key to make everything work. Get the evaluation key

You can edit the dotnetbrowser.license file with any text editor and put your license key there.

As an alternative, you can specify the license directly in the EngineService code:

  EngineOptions engineOptions = new EngineOptions.Builder
  {
      RenderingMode = RenderingMode.HardwareAccelerated,
      LicenseKey = "your_license_key",
  }.Build();

More details on installing the license can be found in the official documentation.

Build Projects

Run the following command from the ReactWebUi.sln solution location:

dotnet build

This will build both frontend and desktop parts, restoring dependencies using npm if needed.

Launch Desktop Application

You can launch the desktop application from the source code with one command.

dotnet run --project ReactExample.Desktop

This will build both frontend and desktop parts, restoring dependencies using npm if needed. After that, the desktop application will be launched.

Packaging

• Web: After building, static files are in reactexample/dist/.
• Desktop: Use dotnet publish -c Release in ReactExample.Desktop for a distributable package.