Uploaded images and documentation for the electron app

blazor/scheduler/blazor-electron-app.md

@@ -0,0 +1,156 @@
+---
+layout: post
+title: Creating a Desktop App Using Blazor and Electron | Syncfusion
+description: Learn how to build a Blazor Scheduler desktop application using the Electron framework and Syncfusion Blazor components in Visual Studio.
+platform: Blazor
+component: Common
+documentation: ug
+---
+
+## Creating Desktop Application using Blazor and Electron
+
+This section explains how to create and run a desktop application by using Blazor and the Electron.NET framework with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
+
+## What is Electron?
+
+[Electron](https://www.electronjs.org/) is a framework for building cross-platform desktop applications with web technologies. It utilizes `Node.js` and the `Chromium` rendering engine to run a web application in a desktop shell.
+
+## Create a Blazor server-side application
+
+Create a Blazor Server application by using either the CLI or Visual Studio:
+
+* [Create a Blazor Server application by using the CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
+
+* [Create a Blazor Server application by using Visual Studio](https://blazor.syncfusion.com/documentation/scheduler/getting-started-with-server-app)
+
+N> This setup does not work with target frameworks greater than .NET 6. For details and troubleshooting, see this [GitHub thread](https://github.com/ElectronNET/Electron.NET/issues/837#issuecomment-1985434060).
+
+## Configure Electron in Blazor App
+
+Run the following commands in either the **Visual Studio Developer Command Prompt** or a **command-line interface (CLI)** based on the development environment.
+
+1.Install [ElectronNET.API](https://www.nuget.org/packages/ElectronNET.API/) NuGet package in the application.
+
+```
+dotnet add package ElectronNET.API
+```
+
+2.Create a local .NET tool manifest file by running the following command. This creates a manifest file at **~/.config/dotnet-tools.json** in the current project.
+
+```
+dotnet new tool-manifest
+```
+
+![.NET tool manifest file](images/electron/net-tool-manifest.png)
+
+3.Install the tool locally in the project by running the below command.
+
+```
+dotnet tool install ElectronNET.CLI
+```
+
+![Electron.NET CLI installation](images/electron/net-cli.png)
+
+4.Run the below command to configure Electron.NET manifest tool and update the launch profile of the application.
+
+```
+dotnet electronize init
+```
+![Update launch profile for Electron.NET](images/electron/update-launch-profile.png)
+
+5.To integrate `Electron.NET` in the application add the below code in **~/Program.cs** file of the application.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="2 9 10" %}
+
+using Syncfusion.Blazor;
+using ElectronNET.API;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container.
+...
+builder.Services.AddSyncfusionBlazor();
+builder.Services.AddElectron();
+builder.WebHost.UseElectron(args);
+
+var app = builder.Build();
+....
+
+{% endhighlight %}
+{% endtabs %}
+
+6.To open the Electron window add the below code in the **~/Program.cs** file of .NET 6 applications.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="9 10 12 13 14 15" %}
+
+using ElectronNET.API;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container.
+...
+builder.WebHost.UseElectron(args);
+
+if (HybridSupport.IsElectronActive)
+{
+    // Open the Electron-Window here
+    Task.Run(async () => {
+        var window = await Electron.WindowManager.CreateWindowAsync();
+    });
+}
+
+var app = builder.Build();
+....
+
+{% endhighlight %}
+{% endtabs %}
+
+7.Run the application using the below command.
+
+```
+dotnet electronize start
+```
+
+![Electron app output](images/electron/electron-shedule-output.png)
+
+N> To close the Electron app when the Electron window is closed, add the following code under **// Open the Electron-Window** in step 6 in the **~/Program.cs** file of a .NET 6 application.
+
+{% tabs %}
+{% highlight c# tabtitle=".NET 6 (~/Program.cs)" hl_lines="14 15 16" %}
+
+using ElectronNET.API;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container.
+...
+builder.WebHost.UseElectron(args);
+
+if (HybridSupport.IsElectronActive)
+{
+    // Open the Electron-Window
+    Task.Run(async () => {
+        var window = await Electron.WindowManager.CreateWindowAsync();
+        window.OnClosed += () => {
+            Electron.App.Quit();
+        };
+    });
+}
+
+var app = builder.Build();
+....
+
+{% endhighlight %}
+{% endtabs %}
+
+8.Run the following commands to create production builds for each platform.
+
+```
+dotnet electronize build /target win
+dotnet electronize build /target osx
+dotnet electronize build /target linux
+```
+
+N> [View the complete Blazor Server Electron application with Syncfusion<sup style="font-size:70%">&reg;</sup> components on GitHub](https://github.com/SyncfusionExamples/blazor-electron-app)