8
Medhat Elmasry: Electron.NET with server-side Blazor & EF
source link: https://blog.medhat.ca/2021/01/electronnet-with-server-side-blazor-ef.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
In this tutorial I will show you how to develop a simple cross-platform Electron application from server-side Blazor. The application retrieves data from the Northwind database and renders results in a table. The solution also allows you to setup the solution as a separate desktop application.
Source code : https://github.com/medhatelmasry/ElectronServerBlazorEf
What is Electron?
Electron is a framework that supports development of apps using web technologies such as Chromium rendering engine and Node.js runtime. The platform supports Windows, MacOS and Linux. Some very popular applications that run on Electron are Visual Studio Code, Discord, Skype, GitHub Desktop and many others. The official site for Electron is https://www.electronjs.org/.
What is Electron.NET?
Electron.NET is a wrapper around Electron that allows .NET web developers to invoke native Electron APIs using C#. To develop with Electron.NET, you need Node.js & Npm installed on your computer. In addition, you must have .NET Core 3.1 or later. The official site for Electron.NET open source project is https://github.com/electronnet/electron.net/.
Running a docker container with SQL-Server Northwind sample database
I will use a docker image that contains the SQL-Server Northwind database. Credit goes to kcornwall for creating this docker image.
To pull & run the Northwind database in a docker container, run the following command in a terminal window:
docker run -d --name nw -p 1444:1433 kcornwall/sqlnorthwind
The above command does the following:
Docker image: kcornwall/sqlnorthwindContainer Name
(--name): nwPorts (-p): Port 1433 in container is exposed as port 1444 on the host computerPassword: The sa password is Passw0rd2018. This was determined from the Docker Hub page for the image.-d: Starts the container in detached mode
(--name): nwPorts (-p): Port 1433 in container is exposed as port 1444 on the host computerPassword: The sa password is Passw0rd2018. This was determined from the Docker Hub page for the image.-d: Starts the container in detached mode
This is what I experienced after I ran the above command:
Let us make sure that the container is running. Execute this command to ensure that the container is running OK.
docker ps
The following confirms that the container is indeed running:
Setup our application
At the time of writing this article, I was using .NET version 5.0.101 on a Windows 10 computer running version 1909
Let us create an ASP.NET server-side Blazor app named ElectronServerBlazorEf with the following terminal window commands:
mkdir ElectronServerBlazorEf
cd ElectronServerBlazorEf
dotnet new blazorserver
We need two .NET tools. Run the following commands from within a terminal window to install ElectronNET.CLI and the dotnet-ef:
dotnet tool install -g ElectronNET.CLI
dotnet tool install –g dotnet-ef
Continue by adding these packages to your project:
dotnet add package Microsoft.EntityFrameworkCore.Design
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Tools
dotnet add package ElectronNET.API
ElectronNET.API is the Electron.NET package.
Finally, let's open our project in VS Code. To do that, simply execute the following command from the same terminal window:
code .
Open Program.cs in the editor and add the following statements to the CreateHostBuilder() method right before webBuilder.UseStartup<Startup>() :
webBuilder.UseElectron(args);webBuilder.UseEnvironment("Development");
Add the following method to Startup.cs:
public async void ElectronBootstrap() {
var browserWindow = await Electron.WindowManager.CreateWindowAsync(new BrowserWindowOptions
Width = 1152,
Height = 940,
Show = false
await browserWindow.WebContents.Session.ClearCacheAsync();
browserWindow.OnReadyToShow += () => browserWindow.Show();
browserWindow.SetTitle("Electron.NET with Blazor!");
Add the following code to the bottom of the Configure() method in Startup.cs:
if (HybridSupport.IsElectronActive) {
ElectronBootstrap();
That's it. Your ASP.NET application is now electron-ized. To see the fruits of your labor, type the following command in the terminal window:
electronize initelectronize start
electronize init is a one-time command that creates a manifest file named electron.manifest.json and adds it to your project.
electronize start launches the Electron app. Note that it takes a little longer the first time and the content now appears in an application window, not a browser.
Interacting with the Northwind database
Close the Electron app with File >> Exit.
Let us reverse engineer the database with the following command so that it generates a DbContext class and classes representing the Category & Product database entities in a folder named NW:
dotnet-ef dbcontext scaffold "Data Source=localhost,1444;Initial Catalog=Northwind;Persist Security Info=True;User ID=sa;Password=Passw0rd2018" Microsoft.EntityFrameworkCore.SqlServer -c NorthwindContext -o NW --table Products --table Categories
Add the following connection string to the top of appsettings.json just before "Logging":
"ConnectionStrings": {
"NW": "Data Source=localhost,1444;Initial Catalog=Northwind;Persist Security Info=True;User ID=sa;Password=Passw0rd2018"
Open NW/NorthwindContext.cs and delete the OnConfiguring() method so that we do not have confidential connection string information embedded in source code.
Add the following to ConfigureServices() method in Startup.cs:
services.AddDbContext<NorthwindContext>(options => {
options.UseSqlServer(Configuration.GetConnectionString("NW"));
Add a class file named NorthwindService.cs in the Data folder. Replace the class definition with the following code:
public class NorthwindService {
private readonly NorthwindContext _context;
public NorthwindService(NorthwindContext context) {
_context = context;
public async Task<List<object>> GetCategoriesByProductAsync () {
var query = _context.Products
.Include (c => c.Category)
.GroupBy (p => p.Category.CategoryName)
.Select (g => new {
Name = g.Key,
Count = g.Count ()
.OrderByDescending(cp => cp.Count);
return await query.ToListAsync<object> ();
We need to configure the NorthwindService class as scoped so that we can use dependency injection. Add the following statement to the ConfigureServices() method in Startup.cs:
Build for specific platform:
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK