Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (151).NET Core  (25)Angular  (49)ASP.NET  (48)ASP.NET Core  (64)ASP.NET MVC  (86)Azure  (28)Blazor  (96)DocIO  (20)Essential JS 2  (71)Essential Studio  (163)File Formats  (20)Flutter  (110)JavaScript  (148)Microsoft  (101)PDF  (59)React  (33)Succinctly series  (122)Syncfusion  (480)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (26)Webinar  (25)Windows Forms  (55)WinUI  (20)WPF  (122)Xamarin  (130)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (107)Chart  (50)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (47)Development  (257)Doc  (7)DockingManager  (1)eBook  (93)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (20)Extensions  (13)File Manager  (4)Gantt  (9)Gauge  (6)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (226)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (23)Performance  (6)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (26)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (19)Solution Services  (2)Spreadsheet  (9)SQL  (7)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (60)UI  (130)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (19)Visual Studio Code  (11)Web  (213)What's new  (139)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Simple Steps to Convert an ASP.NET Core with Angular App to a Desktop App

Simple Steps to Convert an ASP.NET Core with Angular App to a Desktop App

In this blog, we are going to walk through how to convert an ASP.NET Core with Angular (2 to 9+) web application to a desktop app. We are going to achieve this using Electron.NET dll build file.

Electron supports building cross-platform desktop applications with web technologies. It utilizes Node.js and the Chromium rendering engine to run a web application on a desktop shell.

Prerequisites

Create an ASP.NET Core with Angular app

Please follow these steps to run an Angular application within the ASP.NET Core environment:

Step 1: First, create a new project by choosing the ASP.NET Core Web Application option. Then, click Next.

Create a New Project Dialog

Step 2: Now, select the Angular template for ASP.NET Core. Then, click Next.

Step 3: Then, provide a name to your project and click Next.

Step 4: Finally, select the Angular template, then check the Configure for HTTPS check box and click Create. Once the project is created, we can upgrade the Angular app to the latest version if needed.

Create a New ASP.NET Core Web Application Dialog

Note: We can also create an Angular application separately and then configure the ASP.NET Core to run the Angular app within the ASP.NET Core Web application.

Configure Electron with Electron.NET dll

Install the ElectronNET.API NuGet package

Step 1: First, right-click on the created project and choose the Manage NuGet Packages.

Choose the Manage NuGet Packages.. optionStep 2: Switch to the browse tab. Then, search for the Electron.NET NuGet package and install it.

Install the Electron.Net Nuget packageConfigure the Electron.NET in Program.cs file

Step 1: Now, add the following namespace in the Program.cs file.

using ElectronNET.API;

Step 2: Then, configure the Electron.NET package in the Program.cs file with the UseElectron WebHostBuilder.

public static IWebHostBuilder CreateWebHostBuilder(string[] args) =>
    WebHost.CreateDefaultBuilder(args)
        .UseStartup<Startup>()
        .UseElectron(args);

Configure the Electron.NET in Startup.cs file

Step1: Let’s add the following namespaces in the Startup.cs file.

using ElectronNET.API;
using ElectronNET.API.Entities;

Step2: Next, place the ElectronBootstrap method in the Startup.cs file.

public async void ElectronBootstrap()
{
    BrowserWindowOptions options = new BrowserWindowOptions
    {
        Show = false,
    };
    BrowserWindow mainWindow = await Electron.WindowManager.CreateWindowAsync(options);
    mainWindow.OnReadyToShow += () =>
    {
        mainWindow.Show();
        mainWindow.SetTitle(“Application Name”);
    
    };

}

Step 3: Now, configure the Electron.NET package by calling the ElectronBootstrap method in the Configure method in the Startup.cs file.

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    ElectronBootstrap();
}

Install the ElectronNET.CLI NuGet package

The ElectronNET.CLI NuGet package is used to build and run the desktop application. You can install this package as a global package. That way, we can reuse it in the package manager console or command prompt.

Use the following command to install the ElectronNET.CLI package in your project:

dotnet tool install ElectronNET.CLI -g

Package Manager Console Dialog

Customize the debug and desktop menu

To debug the desktop app with the developer window, use the following code in the ElectronBootstrap method.

Debug

mainWindow.WebContents.OpenDevTools();

Also, you can add or update the existing desktop menu using the code in the ElectronBootstrap method.

Desktop menu

    MenuItem[] menu = new MenuItem[]
    {
new MenuItem
{
      Label = “File”,
      Submenu=new MenuItem[]
      {
         new MenuItem
         {
             Label =”Exit”,
             Click =()=>{Electron.App.Exit();}
         }
      }
},
new MenuItem
{
      Label = “Info”,
      Click = async ()=>
      {
         await Electron.Dialog.ShowMessageBoxAsync(“Welcome to App”);
      }
}
   };
   Electron.Menu.SetApplicationMenu(menu);

Customize the desktop icon and splash screen

Also, you can update the splash screen image and desktop icon using the electron.manifest.json file in the root directory.

Refer to the following code example to update the desktop icon and splash screen.

{
    “executable”: “Sample”,
    “Splashscreen”: {
        “imageFile”: “2280.png”
    },
    “name”: “Sample”,
    “author”: “”,
    “singleInstance”: false,
    “environment”: “Production”,
    “build”: {
        “appId”: “com.Sample.app”,
        “productName”: “Sample”,
        “win”: {
            “icon”: “./bin/tbl.png”
        },

Initialize and build

Let’s see the procedures to initialize and build the desktop app.

Note: If your ASP.NET Core project is created without the Angular template, then take the Angular production build with this command before executing the electronize command:

ng build --prod

Step 1: Execute the following electron command in the command prompt or package manager console. This command should be executed only for the first time.

electronize init

Note: After executing the init command, the electron.manifest file will be generated in the root directory. Execute the electronize init command if there is any update in the application code that you want to include in the desktop app.

Step 2: Use the following command to watch the changes without stopping the application.

electronize start

Step 3: Finally, execute the following list of commands to generate the desktop application for the respective operating systems.

electronize build /target win
electronize build /target osx
electronize build /target linux
ASP.NET Core with Angular to Desktop App Using Electron Framework
ASP.NET Core with Angular Converted to Desktop App Using Electron Framework

Conclusion

In this blog, we have learned how to convert an ASP.NET Core with Angular app to a desktop application using the Electron framework. Try out the steps discussed in this blog and leave your comments in the feedback section given below!

The Syncfusion Angular UI component library is the only suite that you will ever need to build an Angular application, since it contains over 65 high-performance, lightweight, modular, and responsive UI components in a single package. Use them to build world-class applications!

For existing customers, the new version of Essential Studio is available for download from the License and Downloads page. If you are not yet a Syncfusion customer, you can try our 30-day free trial to check out our available features.

You can also contact us through our support forumDirect-Trac, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top