Electron allows for the development of desktop GUI applications using front and back end components originally developed for web applications. The Bionic platform plugin uses a direct template provided by Electron and wraps it up for convenient development.
Bionic will eventually provide another way of deploying Electron apps through Bionic Capacitor Plugin.
Capacitor depends on NodeJS. Please install or ensure that you are using a current NodeJS version:
> node --version v9.5.0
Prepare your Blazor app for Electron
Ensure that index.html is explicitly defined
Electron will fail to route to index.html if page is not explicitly defined. To fix this issue find your
index.cshtml page and, if not present, add
The Blazor Standalone template
Pages/index.cshtml should look this in order to make it work with Electron:
@page "/" @page "/index.html" <h1>Hello, world!</h1> Welcome to your new app. <SurveyPrompt Title="How is Blazor working for you?" />
Ensure that the document base URL is set to look into the current directory
wwwroot/index.html and change
<base href="/" /> to be
<base href="./" />.
First, we need to download and install Bionic's Electron Plugin. This step is only required once per project. From your project (or Blazor Client) directory do:
> bionic platform add electron 🔍 Looking for electron platform plugin ☕ Found it! Adding electron plugin... 🚀 electron platform successfully added
This will create the necessary assets under
The next step is to initialize Electron, and similarly, you only need to execute this step once:
> bionic platform electron init ☕ Initializing Electron... ... 🚀 Electron is ready to go! - try: bionic platform electron serve
Building and Serving Electron
The following steps are to be executed everytime you want to deploy the latest changes in Electron.
First, rebuild your Blazor/Bionic project to ensure compiled assets are up-to-date:
> dotnet build
Then prepare all assets in Electron platform directory:
> bionic platform electron build ☕ Building Electron... 🚀 Electron successfully built. Try: bionic platform electron serve
Finally serve Electron:
> bionic platform electron serve ☕ Serving Electron...