Blazor + EF Core + SQLite + WebAssembly

Showing how to integrate SQLite into a Blazor wasm app which runs completely inside the browser!

Demo

BlazorSQLiteWasm

Prerequisites

• .NET Core 6

• wasm-tools workload

  $ sudo dotnet workload install wasm-tools

• Microsoft Visual Studio 2022

• JetBrains Rider

• Visual Studio Code

• Google Chrome

  • should work in other browsers which support wasm

Getting Started

Building

$ git clone https://github.com/TrevorDArcyEvans/BlazorSQLiteWasm.git
$ cd BlazorSQLiteWasm
$ dotnet build
$ dotnet run

open BlazorSQLiteWasm

Debugging

• open BlazorSQLiteWasm.sln in Visual Studio 2022
• F5 to run will open a browser and load wasm

Debugging should also work with the latest JetBrains Rider

How It Works

This project is largely based on demo code from BlazeOrbital and requires a number of coordinated and cooperating parts.

C# .NET

• application code
• Entity Framework Core
• EF Core SQlite provider

is all compiled into the final wasm file.

Javascript

A small piece of helper code is required to create an SQLite database file in the browser. This is called from C# application code via .NET-javascript interop, IJSRuntime. The database file is created on a per-user-per-url basis and is persistent between browser sessions.

There is some additional code:

    setInterval(() => {
      const path = `/${filename}`;
      if (FS.analyzePath(path).exists) {
        const mtime = FS.stat(path).mtime;
        if (mtime.valueOf() !== lastModifiedTime.valueOf()) {
          lastModifiedTime = mtime;
          const data = FS.readFile(path);
          db.result.transaction('Files', 'readwrite').objectStore('Files').put(data, 'file');
        }
      }
    }, 1000);

which runs every second. This is an artefact from the original BlazeOrbital project which required the data to be synchronised every second; and is not required for this example.

SQLite

SQLite driver is provided by SQLitePCLRaw.bundle_e_sqlite3 nuget package and is linked into the final wasm file.

Schema updates

If more properties are added to Car class, the application will throw EF Core exception. This is because the class and and underlying database schema are now mismatched. The database needs to be rebuilt and, during testing and development, this can be done by running:

await db.Database.EnsureDeletedAsync();
await db.Database.EnsureCreatedAsync();

For production, you could follow the guide here

Publishing

There are several workarounds required to successfully publish this:

• various options for emscripten
  • AllowUnsafeBlocks
  • EmccExtraLDFlags
• force all types to be included in wasm file
  • [.NET 6] Migrate API - Could not find method 'AddYears' on type 'System.DateOnly'

Once published, it can be served by any webserver capable of serving static content eg python test server

$ dotnet publish
$ cd cd bin/Debug/net6.0/publish/wwwroot/
$ python3 -m http.server

open BlazorSQLiteWasm

Note that there are specific workarounds in index.html for hosting on GitHub.io pages

Further Information

• BlazeOrbital
• WasmBuildNative
• webassembly native dependencies
• Uno Platform based SQLitePCLRaw provider for WebAssembly
• How do I call SQLitePCL.Batteries.Init().?
• SQLite-net
• Sqlite database for WebAssembly
• sqlite
• emscripten

Acknowledgements

• Icons made by Freepik from www.flaticon.com
• Icons made by Eucalyp from www.flaticon.com