How to create a Blazor app for WASM, Windows, Linux, macOS, iOS, Android

Hey everyone!

I got a few messages asking me how I created my free, open source habit tracker app OpenHabitTracker so I decided to write a post about it.

You can see the source code on GitHub.

Why Blazor

I wanted to create an app that would work on as many platforms as possible and share as much code as possible between all platforms.

I compared all cross platform C# frameworks that were available:

Xamarin was replaced by MAUI and MAUI doesn't support Web - that left Avalonia (with poor web support at that time), Uno and Blazor.

I have used a few open sourced project managed by volunteers and it did not have the best experience, so I wanted to choose a project backed by a company.

I was working with WPF for 5 years and in that time I found out that I really don't like XAML, so I was really happy when Blazor came out.

My first Blazor project was only with WASM and Windows through WebView2 in WinForms / WPF. When Maui Blazor Hybrid was announced I knew that Blazor was a good choice.

How I started

I started by creating a project from every Visual Studio Blazor project template in a single solution and then I started to move all the files that were the same into a shared library.

At first, I had only a single shared library, but later I split it into OpenHabitTracker of type <Project Sdk="Microsoft.NET.Sdk"> that holds the core classes and to OpenHabitTracker.Blazor of type <Project Sdk="Microsoft.NET.Sdk.Razor"> that holds the razor files. This way the logic is separated from the UI and the razor files contain few lines of C# code which is a good thing because Visual Studio editor for razor files can behave strangely at times, especially with @code blocks. The editor behaves better if you have your C# code in .razor.cs code behind files, but you can just go one step further and have the C# code in a separate library.

At first, I had only my razor components and razor pages in the shared library, I didn't move App.razor, _Imports.razor, MainLayout.razor, JsInterop.cs, jsInterop.js, app.css into the shared library, but later I figured out that you can move all files except Program.cs and index.html into the shared library - if there is any platform specific behavior, you can solve it with C# interfaces - even if you need platform specific razor UI, you can still solve it with interfaces and methods that return a RenderFragment. All .css and .js files can be in the shared library and then included to platform specific projects in index.html with _content/OpenHabitTracker.Blazor/... for example <link rel="stylesheet" href="_content/OpenHabitTracker.Blazor/app.css" />.

How I chose the frameworks

I started comparing all the frameworks that support Blazor on desktop and mobile:

Windows only:

• WPF: works great with Microsoft.AspNetCore.Components.WebView.Wpf NuGet
• WinForms: works great with Microsoft.AspNetCore.Components.WebView.WindowsForms NuGet

Windows, Linux, macOS:

• Photino Blazor: works great with Photino.Blazor NuGet
• Electron.NET: works with ElectronNET.API NuGet - long compile times, very large builds, slow startup, opens the GUI window AND a terminal
• Chromely: works with Chromely NuGet - long compile times, slow startup, opens the GUI window AND a terminal - GitHub repo was archived by the owner on Jan 16, 2023

Windows, macOS, iOS, Android:

• MAUI: works with several Maui NuGet packages and dotnet workloads: android, ios, maccatalyst, maui-windows, see https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-workload

To support WASM, Windows, Linux, macOS, iOS, Android you need at least:

• Blazor WASM
• Maui
• Photino Blazor

I develop on Windows with Visual Studio 2022 and my startup project is usually OpenHabitTracker.Blazor.Photino because it compiles and starts much faster than OpenHabitTracker.Blazor.Wasm or OpenHabitTracker.Blazor.Maui.

Saving user data

I took a look at the different options for storing user data:

Because I wanted a large, persistent storage that does not require prompting the user for permission and is not deprecated I chose IndexedDB:

• https://github.com/wtulloch/Blazor.IndexedDB - TG.Blazor.IndexedDB NuGet - awkward, not user friendly, abandoned project
• https://github.com/Reshiru/Blazor.IndexedDB.Framework - Reshiru.Blazor.IndexedDB.Framework NuGet - wraps TG.Blazor.IndexedDB NuGet, making it much nicer to work with - but it has a huge flaw: it always loads all data - you don't have the ability to load only some objects - repository has been archived by the owner on Jan 26, 2021
• https://github.com/amuste/DnetIndexedDb - DnetIndexedDb NuGet - works well enough

I made two mistakes:

• I chose Reshiru.Blazor.IndexedDB.Framework and I even fixed a few things and created https://github.com/Jinjinov/IndexedDB.Blazor (don't use it, it has the same problem)
• I used IndexedDB on desktop and mobile - it works, but I think SQLite is a better option.

I switched to DnetIndexedDb for the browser and to EF Core + SQLite for desktop and mobile.

The user interface

At first, I wanted to write all CSS on my own, but I soon realized that using Bootstrap is not that bad and saves you a lot of time.
That proved to be a good decision when I decided to implement themes and discovered that Bootswatch offers 26 themes for Bootstrap.

I decided to use a free UI library, so I took a look at what was available:

In my previous Blazor project, I used the Blazorise UI library because it had the most controls at the time and because it abstracts the CSS to C# enums and classes - that way it was really easy to switch from Bootstrap 4 to Bootstrap 5. The owner of the project is really responsive to ideas and requests (if you are reasonable and show some initiative). Later I found out that I don't actually need any complex components in my project, so now I use only Bootstrap 5.

In my previous Blazor project, I used Font Awesome icons and Google Fonts, but now I use embedded font files and Bootstrap Icons because I think they work better with Bootstrap 5.

In my previous Blazor project, I used CDN to get the CSS, JS and fonts from the web, but I found out that this makes the app noticeably slower. Now I include all CSS, JS and fonts into the project and the app is much faster. The app is around 2 MB larger because of all the included resources, but at 20 MB for the whole app that is only 10% more - for a much faster UI.

Feel free to ask any questions! :)