Running EF Core in Blazor WASM with SQLitePCL.raw

[ChristianWeyer]

(Not sure this is the right place to discuss this - please close the issue if not @ericsink 😉)

Based on the Twitter thread:
https://twitter.com/PeerEmApp/status/1493816569075576835

Do we have some sample of how to run EF Core in a client-side Blazor WASM app with SQLitePCL.raw and IDBFS?

Thanks.

[peerem]

Caution! This only works in the published version, not in the debugger in debug mode.

First of all, the support for the IDBFS in the project must be switched on. To do this, this Emscripten compiler switch must be included in the project file:

<EmccExtraLDFlags>-lidbfs.js</EmccExtraLDFlags>

Next we need the javascript functions to handle the Emscripten file system.

"js/files.js":

function mount()
{
    FS.mkdir('/data');
    FS.mount(IDBFS, {}, '/data');
    FS.syncfs(true, function (err)
    {
        // Mount done. In our case we make a Blazor call to complete our initialization.
    });
}

function sync()
{
    FS.syncfs(function (err)
    {
        // Sync complete. In our case we make a Blazor call to reset the timer.
    });
}

Now add a button to the "Index.razor".

<button class="btn btn-primary" @onclick="Filetest">Click me</button>

And now the C# code in "Index.razor.cs":

using System;
using System.IO;
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

namespace BlazorWasmSqlite.Pages
{
    public partial class Index : ComponentBase
    {
        // Injections
        [Inject]
        private IJSRuntime JsRuntime { get; set; }

        protected override async void OnAfterRender(bool firstRender)
        {
            base.OnAfterRender(firstRender);

            // Mount IDBFS
            if (firstRender)
                await JsRuntime.InvokeVoidAsync("mount");
        }

        private async void Filetest()
        {
            // Test
            string filename = "/data/Test.txt";

            // Create if not exists
            if (File.Exists(filename))
                Console.WriteLine("File already exists.");
            else
            {
                Console.WriteLine("Create file.");

                // Write file
                File.WriteAllText(filename, "Hello persistent filesystem.");

                // Sync with IndexedDB
                await JsRuntime.InvokeVoidAsync("sync");
            }

            // Read
            if (File.Exists(filename))
                Console.WriteLine(File.ReadAllText(filename));
        }
    }
}

[patrickjahr]

Thanks, @peerem for the sample 👍

Can you also show a short sample of how to run this with EF Core in a client-side Blazor WASM?

[peerem]

Unfortunately, I can not help with that. As a fan of good optimized handwritten SQL I use "sqlite-net-sqlcipher", which is also based on this repository.

[patrickjahr]

Thanks, @peerem :-)

@ericsink, do you maybe have a sample with EF Core in a client-side Blazor WASM?

[ericsink]

@patrickjahr Sorry, no. The Wasm support is very new, and it was done by @bricelam. I haven't even tried working with it myself yet.

[patrickjahr]

Caution! This only works in the published version, not in the debugger in debug mode.

First of all, the support for the IDBFS in the project must be switched on. To do this, this Empscripten compiler switch must be included in the project file:

<EmccExtraLDFlags>-lidbfs.js</EmccExtraLDFlags>

Next we need the javascript functions to handle the Emscripten file system.

"js/files.js":

function mount()
{
    FS.mkdir('/data');
    FS.mount(IDBFS, {}, '/data');
    FS.syncfs(true, function (err)
    {
        // Error
    });
}

function sync()
{
    FS.syncfs(function (err)
    {
        // Error
    });
}

Now add a button to the "Index.razor".

<button class="btn btn-primary" @onclick="Filetest">Click me</button>

And now the C# code in "Index.razor.cs":

using System;
using System.IO;
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

namespace BlazorWasmSqlite.Pages
{
    public partial class Index : ComponentBase
    {
        // Injections
        [Inject]
        private IJSRuntime JsRuntime { get; set; }

        protected override async void OnAfterRender(bool firstRender)
        {
            base.OnAfterRender(firstRender);

            // Mount IDBFS
            if (firstRender)
                await JsRuntime.InvokeVoidAsync("mount");
        }

        private async void Filetest()
        {
            // Test
            string filename = "/data/Test.txt";

            // Create if not exists
            if (File.Exists(filename))
                Console.WriteLine("File already exists.");
            else
            {
                Console.WriteLine("Create file.");

                // Write file
                File.WriteAllText(filename, "Hello persistent filesystem.");

                // Sync with IndexedDB
                await JsRuntime.InvokeVoidAsync("sync");
            }

            // Read
            if (File.Exists(filename))
                Console.WriteLine(File.ReadAllText(filename));
        }
    }
}

Hi, @peerem. I tried to execute the sample code in my small Blazor-WASM sample. But I run into the following issue:

IDBFS is not defined
Even though I have added the line <EmccExtraLDFlags>-lidbfs.js</EmccExtraLDFlags> in my project file.

Do you have an idea?

[peerem]

Did you read the first line in my first post?

My project file looks like this:

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

    <PropertyGroup>
        <TargetFramework>net6.0</TargetFramework>
        <RunAOTCompilation>false</RunAOTCompilation>
        <EmccExtraLDFlags>-lidbfs.js</EmccExtraLDFlags>
    </PropertyGroup>

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

</Project>

[patrickjahr]

Yes, I saw the first post. Here is my project file from the small sample.

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

	<PropertyGroup>
		<TargetFramework>net6.0</TargetFramework>
		<Nullable>enable</Nullable>
		<ImplicitUsings>enable</ImplicitUsings>
		<RunAOTCompilation>false</RunAOTCompilation>
		<EmccExtraLDFlags>-lidbfs.js</EmccExtraLDFlags>
	</PropertyGroup>

	<ItemGroup>
		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.2" />
		<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.2" PrivateAssets="all" />
		<PackageReference Include="MudBlazor" Version="6.0.6" />
		<!-- EF Core and SQLite support -->
		<PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="6.0.2" />
		<PackageReference Include="SQLitePCLRaw.bundle_e_sqlite3" Version="2.1.0-pre20220207221914" />
	</ItemGroup>

</Project>

[peerem]

Caution! This only works in the published version, not in the debugger in debug mode.

[patrickjahr]

@peerem, yes, I published my project to the local file system and hosted it with IIS and Azure as an app service.
But unfortunately, both cases still have the same error message.

[peerem]

Works fine for me. Which version of Visual Studio are you using? I am using Visual Studio 17.1.0 on Windows. And which browser do you use? I tested with Chrome and Edge.

[patrickjahr]

I also work with Visual Studio 2022 17.1.0 on Windows. I prefer to use chrome, but I have also tested it on edge.
Do you have a small example repo where I could look where I still have an issue?

[peerem]

That is interesting. I have a "pre" SDK on my machine (from a previously installed preview version) that supports the compiler switch.

C:\Program Files\dotnet\packs\Microsoft.NET.Runtime.WebAssembly.Sdk\6.0.2-mauipre.1.22102.15\Sdk

  - $(EmccVerbose)                      - Set to false to disable verbose emcc output.

  - $(EmccLinkOptimizationFlag)         - Optimization flag to use for the link step
  - $(EmccCompileOptimizationFlag)      - Optimization flag to use for compiling native files

  - $(EmccFlags)                        - Emcc flags used for both compiling native files, and linking
  - $(EmccExtraLDFlags)                 - Extra emcc flags for linking
  - $(EmccExtraCFlags)                  - Extra emcc flags for compiling native files
  - $(EmccTotalMemory)                  - Total memory specified with `emcc`. Default value: 536870912

You can find the documentation in the "WasmApp.targets" in the folder given above.

[peerem]

I saw on a fresh system that this above WebAssembly SDK is installed by Visual Studio 2022 and is up to date.

When I use the following package, I can't publish at all. It breaks off with error messages. Without this package everything works as before.

<PackageReference Include="SQLitePCLRaw.bundle_e_sqlite3" Version="2.1.0-pre20220207221914" />

You can see if the switch is passed to Emscripten in the following file. There should be "-lidbfs.js" as the last entry.:

<YourProjectDir>\obj\Release\net6.0\wasm\for-publish\emcc-link.rsp

[peerem]

An additional switch is required for this pre-release, otherwise Emscripten aborts with errors. It still has warnings, but it works for us.

<EmccExtraLDFlags>-lidbfs.js -s ERROR_ON_UNDEFINED_SYMBOLS=0</EmccExtraLDFlags>

When synchronizing too frequently, Emscripten throws exceptions, so we now do the synchronization via a timer every 10 seconds.