

Electron

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.

Info

Bionic will eventually provide another way of deploying Electron apps through Bionic Capacitor Plugin.

Requirements

NodeJS

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 @page "/index.html". 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

Edit wwwroot/index.html and change <base href="/" /> to be <base href="./" />.

Initializing Electron

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 platforms/electron.

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...

Comments