How to use C# WebAssemly from JavaScript without Blazor web components

Question

To compile C# into WebAssemly and interop with JS it's required to use Blazor WebAssembly ASP.NET framework, which is designed for SPA and contains lot of overhead in case you just want to use a C# library from JS.

What is the minimum setup to just compile a DLL to WebAssembly and use it from JavaScript?

Oquassa

Answer 1

Update: Starting with .NET 7 the use case has first-party support: https://devblogs.microsoft.com/dotnet/use-net-7-from-any-javascript-app-in-net-7/ Below is still relevant for older .NET versions or in case you'd like to dig deeper and/or implement custom interop layer.

---

Create a new empty C# project with the following configuration (via .csproj):

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

    <PropertyGroup>
        <TargetFramework>net6.0</TargetFramework>
        <LangVersion>10</LangVersion>
    </PropertyGroup>

    <ItemGroup>
        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.0" />
        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.0" PrivateAssets="all" />
    </ItemGroup>

</Project>

Initialize Blazor JS runtime and specify the bindings:

namespace WasmTest;

public class Program
{
    private static IJSRuntime js;

    private static async Task Main (string[] args)
    {
        var builder = WebAssemblyHostBuilder.CreateDefault(args);
        var host = builder.Build();
        js = host.Services.GetRequiredService<IJSRuntime>();
        await host.RunAsync();
    }

    [JSInvokable]
    public static async Task<string> BuildMessage (string name)
    {
        var time = await GetTimeViaJS();
        return $"Hello {name}! Current time is {time}.";
    }

    public static async Task<DateTime> GetTimeViaJS ()
    {
        return await js.InvokeAsync<DateTime>("getTime");
    }
}

Publish with dotnet publish and use the C# library from JS:

<script src="_framework/blazor.webassembly.js" autostart="false"></script>

<script>
    window.getTime = () => {
        return new Date().toJSON();
    };
    window.onload = async function () {
        await Blazor.start();
        const msg = await DotNet.invokeMethodAsync("WasmTest", "BuildMessage", "John");
        console.log(msg);
    };
</script>

Alternatively, here is a solution, that allows compiling C# project into single-file UMD library, which can be consumed in any JavaScript environment: browsers, node, and custom restricted environments, such as VS Code's web extensions: https://github.com/Elringus/DotNetJS

Oquassa

Awesome, but doesn't still use Blazor? Does the capability to run C# in WebAssembly can only achieved by Blazor? – Saliferous