# Blazor

Source: https://docs.interop.io/desktop/getting-started/how-to/interop-enable-your-apps/blazor/index.html

## Overview

All [io.Connect .NET](https://docs.interop.io/desktop/getting-started/how-to/interop-enable-your-apps/net/index.md) functionalities are available for your Blazor WebAssembly and Blazor Server apps through the io.Connect .NET library for [.NET Standard](https://www.nuget.org/packages/GlueBase/) library.

Your interop-enabled Blazor apps can be defined as io.Connect apps (see [App Definition](#app_definition)) in order to be started by **io.Connect Desktop** and hosted in [io.Connect Windows](https://docs.interop.io/desktop/capabilities/windows/window-management/overview/index.md), or they can run independently in a browser.

> ℹ️ *For the differences in initializing the io.Connect library in hosted and browser Blazor apps, see the [Hosted & Browser Apps](#initialization-hosted__browser_apps) section.*

Blazor apps started by **io.Connect Desktop** will be hosted in [io.Connect Windows](https://docs.interop.io/desktop/capabilities/windows/window-management/overview/index.md) enabling them to stick to other io.Connect Windows, to use [Channels](https://docs.interop.io/desktop/capabilities/data-sharing/channels/overview/index.md), and to be saved and restored in [Layouts](https://docs.interop.io/desktop/capabilities/windows/layouts/overview/index.md).

### Blazor WebAssembly

The connection to io.Connect in a Blazor WebAssembly app originates from the client app (the browser webpage) which means that the Blazor WebAssembly app will behave as a desktop app and will connect to the locally installed **io.Connect Desktop**.

> ℹ️ *See the [Blazor WebAssembly example](https://github.com/InteropIO/net-examples/tree/master/glazor/GlazorWebAssembly) on GitHub which demonstrates the various **io.Connect Desktop** features.*

### Blazor Server

If you plan on using the io.Connect .NET library for [.NET Standard](https://www.nuget.org/packages/GlueBase/) in Blazor Server apps, consider that the connection to io.Connect will originate from the server side. This means that you can either install the io.Connect Gateway on a visible location (cloud), or use the Blazor server on the desktop machine (e.g., Docker, IIS) where you have a running **io.Connect Desktop**. For Blazor Server apps, you can integrate the front-end with the [io.Connect JavaScript](https://docs.interop.io/desktop/getting-started/how-to/interop-enable-your-apps/javascript/index.md) library.

## Referencing

The io.Connect .NET library for [.NET Standard](https://www.nuget.org/packages/GlueBase/) is available as a NuGet package which you can include and configure in your projects. Download and reference the latest version.

> ℹ️ *See the [Blazor examples](https://github.com/InteropIO/net-examples/tree/master/glazor) on GitHub demonstrating the various **io.Connect Desktop** features.*

## Initialization

To initialize the io.Connect .NET library for [.NET Standard](https://www.nuget.org/packages/GlueBase/), you can use the [`GlueProvider`](https://github.com/InteropIO/net-examples/blob/master/glazor/GlazorWebAssembly/GlazorWebAssembly/GlueProvider.cs) demo class from the [Blazor examples](https://github.com/InteropIO/net-examples/tree/master/glazor) that demonstrates all necessary initialization logic and can be modified or used as is, per your needs.

> ℹ️ *For more in-depth examples of initializing the library, see the [Hosted & Browser Apps](#initialization-hosted__browser_apps) section.*

The [`GlueProvider`](https://github.com/InteropIO/net-examples/blob/master/glazor/GlazorWebAssembly/GlazorWebAssembly/GlueProvider.cs) class supports:

- io.Connect initialization for Blazor WebAssembly and Blazor Server apps hosted in **io.Connect Desktop**.
- io.Connect initialization for Blazor WebAssembly and Blazor Server apps opened in a browser.
- Blazor logging facade.

The following example demonstrates how to plug in the `GlueProvider` class in your Blazor app:

```csharp
// Bridging the logger.
builder.Services.AddScoped<IGlueLoggerFactory, GlueLoggerFactory>(serviceProvider =>
                new GlueLoggerFactory(serviceProvider.GetService<ILoggerFactory>()));

// Plugging in the `GlueProvider` class.
builder.Services.AddScoped(typeof(GlueProvider));
```

After that, you can use io.Connect in your RAZOR file:

Injection:

```csharp
@inject IGlueLoggerFactory GlueLoggerFactory
@inject GlueProvider glueProvider
```

Initialization:

```csharp
@code {
   private Task<IGlue42Base> GetGlue()
        => glueProvider.InitGlue();
}
```

The following example demonstrates how to use the io.Connect APIs after the initialization of the library:

```csharp
// Getting the io.Connect object - entry point for all io.Connect APIs.
var io = await GetGlue().ConfigureAwait(false);

// Using the Channels API to join a Channel and update its context.
var redChannel = await io.Channels
    .AwaitChannel(channel => channel.Name == "Red").ConfigureAwait(false);

context = io.Channels.JoinChannel(redChannel);

await context.SetValue(ric, "partyPortfolio.ric").ConfigureAwait(false);
```

*All concepts are demonstrated in the [Blazor examples](https://github.com/InteropIO/net-examples/blob/master/glazor/GlazorWebAssembly/GlazorWebAssembly/Pages/Glue42.razor).*

### Hosted & Browser Apps

When initializing the io.Connect .NET library for [.NET Standard](https://www.nuget.org/packages/GlueBase/) in Blazor apps, you have to consider whether your app is defined as an io.Connect app and can be started by **io.Connect Desktop**, or is running independently in a browser. In the different scenarios you will need different mechanisms for providing authentication and app information to io.Connect. In the case of a hosted Blazor app, **io.Connect Desktop** injects this information in the io.Connect Window and you must expose a function to extract it. In the case of a Blazor app running in a browser, this information must be provided manually through user input.

#### Hosted Apps

If your Blazor WebAssembly or Blazor Server app is hosted in **io.Connect Desktop**, you must expose a JavaScript function that will pull the necessary information from the io.Connect Window and then initialize the io.Connect library with it.

> ℹ️ *See a demo implementation of the exposed JavaScript function in the [Blazor WebAssembly example](https://github.com/InteropIO/net-examples/blob/master/glazor/GlazorWebAssembly/GlazorWebAssembly/wwwroot/js/gd.js).*

The following example demonstrates how to invoke the exposed function:

```csharp
initOptions = await Glue42Base.GetHostedGDOptions(
    async tokenName => await jsRuntime_.InvokeAsync<string>(tokenName).ConfigureAwait(false),
    async gdInfoPropName =>
    {
        var gdHostInfo = await GetJSProp<GDHostInfo>(gdInfoPropName).ConfigureAwait(false);
        windowId = gdHostInfo.WindowId;
        return gdHostInfo;
    }).ConfigureAwait(false);
```

#### Browser Apps

If your Blazor app is opened in a browser window, you must provide the username, the io.Connect authentication details and the app name yourself:

```csharp
var username = await GetPromptInput("user name").ConfigureAwait(false);
var appName = await GetPromptInput("app name").ConfigureAwait(false);

initOptions = new InitializeOptions
{
    AdvancedOptions = new AdvancedOptions
    {
        AuthenticationProvider = new GatewaySecretAuthenticationProvider(username, username)
    },
    // Make sure that the app name is different for each scoped `GlueProvider`.
    ApplicationName = appName
};
```

#### Initialization

When you have built the initialization options using either mechanism, initialize the io.Connect library to obtain the io.Connect object - the entry point for all io.Connect APIs:

```csharp
var io = await Glue42Base.InitializeGlue(initOptions).ConfigureAwait(false);
```

### Socket Implementation

For Blazor WebAssembly apps, you have to select an appropriate socket implementation. Otherwise, it isn't necessary to change the socket implementation:

```csharp
// Choosing socket implementation appropriate for Blazor WebAssembly apps.
initOptions.AdvancedOptions.SocketFactory = connection =>
    new ClientSocket(new Uri(initOptions.GatewayUri ?? DefaultGatewayUri), new Configuration());
```

### Logging

You can choose your own logging facade and then create a bridge so that io.Connect will log through your logging mechanism.

> ℹ️ *See the demo logging implementation in the [Blazor WebAssembly example](https://github.com/InteropIO/net-examples/blob/master/glazor/GlazorWebAssembly/GlazorWebAssembly/GlueLoggerFactory.cs).*

Implement the bridging contract and instruct io.Connect to use your logging mechanism:

```csharp
initOptions.LoggerFactory = your_logging_factory;
```

The [Blazor examples](https://github.com/InteropIO/net-examples/blob/master/glazor/) use the Microsoft logging mechanism plugged in the following way:

```csharp
builder.Services.AddScoped<IGlueLoggerFactory, GlueLoggerFactory>(serviceProvider =>
    new GlueLoggerFactory(serviceProvider.GetService<ILoggerFactory>()));
```

## App Definition

To add your Blazor app to the [io.Connect launcher](https://docs.interop.io/desktop/capabilities/launcher/index.md), you must create a JSON [app definition](https://docs.interop.io/desktop/developers/configuration/application/index.md) file for it. Place this file in the `<installation_location>/interop.io/io.Connect Desktop/UserData/<ENV>-<REG>/apps` folder where `<ENV>-<REG>` represents the environment and region of **io.Connect Desktop** (e.g., `DEMO-INTEROP.IO`).

The following is an example definition of a Blazor app:

```json
{
    "name": "my-app",
    "title": "My App",
    "type": "window",
    "details": {
        "url": "https://example.com/my-app/",
        "mode": "tab",
        "width": 500,
        "height": 400
    }
}
```

The `"name"`, `"type"`, and `"url"` properties are required and `"type"` must be set to `"window"`. The `"url"` property points to the location of the web app.

The value of the `"title"` property will be used as a name for the app in the io.Connect launcher and as a window title if the web app doesn't have a document title.

> ℹ️ *For more details on defining apps, see the [Developers > Configuration > Application](https://docs.interop.io/desktop/developers/configuration/application/index.md) section.*

## io.Connect .NET Concepts

Once the io.Connect .NET library has been initialized, your app has access to all io.Connect functionalities. For more detailed information on the different io.Connect capabilities and APIs, see:

- [App Management](https://docs.interop.io/desktop/capabilities/app-management/net/index.md)
- [Intents](https://docs.interop.io/desktop/capabilities/data-sharing/intents/net/index.md)
- [Shared Contexts](https://docs.interop.io/desktop/capabilities/data-sharing/shared-contexts/net/index.md)
- [Channels](https://docs.interop.io/desktop/capabilities/data-sharing/channels/net/index.md)
- [Interop](https://docs.interop.io/desktop/capabilities/data-sharing/interop/net/index.md)
- [Pub/Sub](https://docs.interop.io/desktop/capabilities/data-sharing/pub-sub/net/index.md)
- [Window Management](https://docs.interop.io/desktop/capabilities/windows/window-management/net/index.md)
- [Layouts](https://docs.interop.io/desktop/capabilities/windows/layouts/net/index.md)
- [Notifications](https://docs.interop.io/desktop/capabilities/notifications/net/index.md)