Simple Steps to Convert an ASP.NET Core with Angular App to a Desktop App
Tags: angular, webdev, csharp, dotnet
Published: 2021-06-21 03:32:02

---
title: Simple Steps to Convert an ASP.NET Core with Angular App to a Desktop App
published: true
date: 2021-06-18 11:58:15 UTC
tags: angular, webdev, csharp, dotnet
canonical_url: https://www.syncfusion.com/blogs/post/convert-asp-net-core-with-angular-app-to-desktop-app.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Simple-Steps-to-Convert-an-ASP.NET-Core-with-Angular-App-to-a-Desktop-App-672x372.png
---

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](https://www.electronjs.org/ "Link to Electron Framework") 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

- [Visual Studio](https://visualstudio.microsoft.com/ "Link to Visual Studio")
- [Angular](https://angular.io/ "Link to Angular") (2 to 9 versions)
- [Electron Net NuGet package](https://www.nuget.org/packages/ElectronNET.API/ "Link to ElectronNET.API NuGet Package")

## 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](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Create-a-New-Project-Dialog.png)

**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](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Create-a-New-ASP.NET-Core-Web-Application-Dialog.png)

**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.. option](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Choose-the-Manage-NuGet-Packages..-option.png)Step 2:** Switch to the browse tab. Then, search for the **Electron.NET**  NuGet package and install it.

### ![Install the Electron.Net Nuget package](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Install-the-Electron.Net-Nuget-package.png)Configure the Electron.NET in Program.cs file

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

```csharp
using ElectronNET.API;

```

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

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

```csharp
using ElectronNET.API;
using ElectronNET.API.Entities;

```

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

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

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

### Install the ElectronNET.CLI NuGet package

The [ElectronNET.CLI NuGet package](https://www.nuget.org/packages/ElectronNET.CLI "Link to 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](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/Package-Manager-Console-Dialog-1.png)

### Customize the debug and desktop menu

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

**Debug**

```csharp
mainWindow.WebContents.OpenDevTools();
```

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

**Desktop menu**

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

```csharp
{
    “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](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/ASP.NET-Core-with-Angular-to-Desktop-App-Using-Electron-Framework.png)<figcaption>ASP.NET Core with Angular Converted to Desktop App Using Electron Framework</figcaption>

## 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](https://www.syncfusion.com/angular-ui-components "Link to Angular UI controls") 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](https://www.syncfusion.com/account/downloads "Link to license and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out our available features.

You can also contact us through our [support forum](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/angular "Link to Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Load and View PDF Files in an Angular App](https://dev.to/syncfusion/how-to-load-and-view-pdf-files-in-an-angular-app-bjb "Link to How to Load and View PDF Files in an Angular App blog")
- [Customize the Angular Tree Grid by Creating Reusable Components](https://dev.to/syncfusion/how-to-customize-the-angular-tree-grid-by-creating-reusable-components-213j "Link to How to Customize the Angular Tree Grid by Creating Reusable Components blog")
- [Enable Lazy-Load Grouping in Syncfusion Angular Data Grid](https://dev.to/syncfusion/how-to-enable-lazy-load-grouping-in-syncfusion-angular-data-grid-383 "Link to How to Enable Lazy-Load Grouping in Syncfusion Angular Data Grid blog")
- [Create Report Viewer Component in Angular app with ASP.NET Core](https://dev.to/syncfusion/create-report-viewer-component-in-angular-app-with-asp-net-core-ib6 "Link to Create Report Viewer Component in Angular app with ASP.NET Core blog")