--- title: "Simple Steps to Convert an ASP.NET Core with Angular App to a Desktop App" published_at: "2021-06-18T11:58:15+00:00" modified_at: "2025-11-06T15:23:43+00:00" url: "https://www.syncfusion.com/blogs/post/convert-asp-net-core-with-angular-app-to-desktop-app" excerpt: "In this blog, we will learn how to convert an ASP.NET Core with Angular app to a desktop application using the Electron framework." taxonomy_category: - ".NET Core" - "Angular" - "ASP.NET Core" - "Web" taxonomy_post_tag: - ".NET Core" - "Angular" - "Cross-Platform" - "desktop" - "Electron" --- # Simple Steps to Convert an ASP.NET Core with Angular App to a Desktop App [Vivek Sankar](https://www.syncfusion.com/blogs/author/vivek-sankar) ![Simple Steps to Convert an ASP.NET Core with Angular App to a Desktop App](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.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/) 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/) - [Angular](https://angular.io/) (2 to 9 versions) - [Electron Net NuGet package](https://www.nuget.org/packages/ElectronNET.API/) ## 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. ``` 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() .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](https://www.nuget.org/packages/ElectronNET.CLI) 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** ``` 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 Converted to Desktop App Using Electron Framework](https://www.syncfusion.com/blogs/wp-content/uploads/2021/06/ASP.NET-Core-with-Angular-Converted-to-Desktop-App-Using-Electron-Framework.png) ASP.NET Core with Angular Converted to Desktop App Using Electron Framework ## GitHub reference Also, check out the complete code [example to convert an ASP.NET Core with Angular app to a desktop app on GitHub](https://github.com/SyncfusionExamples/convert-asp-dotnet-core-with-angular-app-to-a-desktop-app) . [https://www.syncfusion.com/downloads/angular](https://www.syncfusion.com/downloads/angular) ## 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) 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) page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out our available features. You can also contact us through our [support forum](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com) , or [feedback portal](https://www.syncfusion.com/feedback) . We are always happy to assist you! ## Related blogs - [Load and View PDF Files in an Angular App](https://www.syncfusion.com/blogs/post/load-and-view-pdf-files-in-an-angular-app.aspx) - [Customize the Angular Tree Grid by Creating Reusable Components](https://www.syncfusion.com/blogs/post/customize-angular-tree-grid-by-creating-reusable-components.aspx) - [Enable Lazy-Load Grouping in Syncfusion Angular Data Grid](https://www.syncfusion.com/blogs/post/how-to-enable-lazy-load-grouping-in-syncfusion-angular-data-grid.aspx) - [Create Report Viewer Component in Angular app with ASP.NET Core](https://www.syncfusion.com/blogs/post/create-report-viewer-component-in-angular-app-with-asp-net-core.aspx)