Electron.NET – Create a minimal MusicPlayer App with ASP.NET Core 2 for the Desktop
As the name confirms, we developed an Electron derivation for .NET Core. This allows to develop Cross-Platform desktop applications with C# and ASP.NET Core. We haven´t reinvented the wheel. The runtime is based on Electron. So Electron.NET is build on an advanced and solid platform.
This article shows on a plain sample how easy it is, to develop Cross-Platform desktop software with Electron.NET and ASP.NET. We will develop a MusicPlayer, which has access to the music list to play any song we want.
Preperations for the start:
A new ASP.NET Core 2 project
First of all, we create a new ASP.NET Core Web Application. Then choose the empty template and make sure you got ASP.NET Core 2.0 selected.
Picture 1 – Create a new ASP.NET Core 2 project
Next, we need to install MVC via NuGet Package Manager:
Install-Package Microsoft.AspNetCore.Mvc -Version 2.0.0
Once installed there is a little work to do, before we can start. We will need to add a little something to the Startup.cs. At first we need to configure the app to use the MVC framework.
In the next step we have to configure the app to use the MVC request execution pipline (routing), with a default route.
Now that the MVC framework has been added we can add a Controller and a View to the project. Therefore we add a new folder, which we call Controllers. Then, right click on it to add a new Controller.
Picture 2 – Add a new Controller
The HomeController will be added with a default method called Index. To add a view we need to right click on View() and select AddView.
Picture 3 – Add a new View
A new views folder including the Index.cshtml has been created automatically. The ASP.NET MVC Core project is now ready to implement some logic.
There are just a few more things to do, so we can run the ASP.NET MVC Core 2 application with Electron.NET. Of course we´ll need to install Electron.NET API through the NuGet Package Manager:
PM> Install-Package ElectronNET.API
UseElectron WebHostBuilder-Extension will be added to Program.cs then.
That´s it! Now Electron.NET can be used in our project. So far, nothing would happen, if we would run the project now. The application would just run in the background. Because we do not want to develop any background processes, we´ll add some bootstrap code to Startup.cs, so an MainWindow will appear. Additionally we want the security option to be disabled. This will allow us to get access to the music list.
Access to the file system
We will need access to the file system within the HomeController now. To do so, the Electron.NET API gives us the opportunity to detect the path of the current platform of the music list. With .NET Core we get access to the filenames within the list. We´ll pass the results to the view then.
The view and functionality is easy and not that much spectacular in this example. So there will just be shown a list of the music files which will play by button click. To do this, the HTML5 audio class will be used.
Start of the Electron.NET Application
The Electron.NET CLI is necessary to execute the Electron.NET application. Unfortunately, we need to install the CLI by adding a reference to
.csproj file instead of an installation via NuGet as usual.
dotnet restore in the console.
If it´s a new Electron.NET project, it is necessary to run
dotnet electronize init once. For that there will be a
electron.manifest.json file generated an a new debugging profile will be provided.
dotnet electronize start will start the ASP.NET MVC Core 2 application as a desktop software.
Important! The first start may take a while. We are working on a solution to speed this up.
Picture 4 – The Electron MusicPlayer application
Building the application
The Electron.NET CLI also makes it possible to build an executable application for Windows, Mac and Linux. Every platform does this with the
dotnet electronize build command:
dotnet electronize build win
dotnet electronize build osx
dotnet electronize build linux
Important! A Mac or Linux device is required to build Mac applications.
We´ve seen in this sample, how easy it is to create a desktop software using ASP.NET MVC Core 2. We get access to the files by using C# and send those information to the MVC view, which is actually not possible through a Web-Browser.
You´ll find additional examples in the API demo app. You can try to access an OpenFile dialog so the sample application can read other files as well, if you want to. And maybe there could be a little shortcut to select songs randomly. Just as a little extra 😊 Leave a comment below if managed it.
How do you like Electron.NET? I´m excited about your feedback in the comments.