It's possible to reuse Blazor Wasm pages in MAUI #10564

2 Answer(s)

• 

  0

  AI-Bot created 6 months ago

  Support Team ABP Agent

  • You can reuse your Blazor UI code only if it’s real Blazor components (Razor .razor files) and not tied to WebAssembly hosting specifics.
    In practice, this means you can move/share pages/components into a shared Razor Class Library (RCL) and then use them from a .NET MAUI Blazor Hybrid app.

  • ABP does not provide an “official template/feature” that automatically turns an ABP Blazor Web App UI into a MAUI Blazor Hybrid app without work. You’ll need to create a MAUI client and integrate it (auth + API consumption), then reference your shared UI components.

  • Important constraint: If your “Blazor Web App” is ABP’s Blazor WebAssembly UI (with ABP’s WASM theme/components), it usually won’t be a drop-in reuse in MAUI. You typically can still reuse pure Razor components/pages, but you may need to adapt:

    • authentication flow (MAUI uses device/browser-based OIDC),
    • navigation/root layout,
    • any browser-specific JS interop,
    • any ABP WASM-specific UI packages/theme usage.

  What to do (recommended approach)

  1. Extract reusable UI into a shared project

     • Create a Razor Class Library (RCL), e.g. MyCompany.MyApp.Ui.Shared.
     • Move the pages/components you want to reuse into it.
     • Keep them as “pure” as possible (minimal hosting assumptions).

  2. Create a .NET MAUI Blazor Hybrid app

     • Use MAUI Blazor (Hybrid) so it can render Razor components.
     • Reference the shared RCL from the MAUI app.

  3. Consume your existing ABP backend from MAUI (typical ABP way)

     • Keep ABP backend (HttpApi.Host) as-is.
     • In MAUI, consume your server via ABP HttpApi.Client / client proxies, and implement authentication (OIDC) suitable for mobile.

  4. Implement login/token handling for MAUI

     • Use an OIDC flow appropriate for MAUI, then attach tokens to ABP remote service calls (via ABP’s HTTP client authentication abstractions).

  Verified examples you can follow (MAUI client + ABP backend)

  These show how to build a MAUI client that consumes an ABP application (auth + client proxies), which is the core missing piece when moving from web UI to MAUI:

  • https://abp.io/community/articles/em7x1s8k
  • https://abp.io/community/articles/e74fmblw
  • https://github.com/abpframework/abp-samples/tree/master/MAUI-OpenId

  Also relevant ABP support discussion about MAUI Blazor hybrid direction + sample:

  • https://abp.io/support/questions/3640

  • https://github.com/hikalkan/maui-abp-playing

  • https://community.abp.io/posts/integrating-maui-client-via-using-openid-connect-aqjjwsdf

  • ABP UI options (shows MAUI is a UI option in ABP ecosystem, but not “reuse web UI automatically”):
    https://abp.io/docs/latest/framework/ui/

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  maliming created 6 months ago

  Support Team Fullstack Developer

  Hi,

  Yes, you can reuse Blazor WebAssembly pages in a MAUI Blazor Hybrid application with ABP. ABP provides a MAUI Blazor application template specifically designed for this purpose.

  How reuse works at different levels:

  1. ABP built-in module pages (Identity, Settings, Audit Logging, Language Management, OpenIddict, etc.) — These are already shared. Both MAUI Blazor and Blazor WebAssembly reference the same base Blazor UI packages (e.g., Volo.Abp.Identity.Pro.Blazor). The WebAssembly variant just adds a .WebAssembly suffix package for WASM-specific service registration, but the actual Razor pages/components come from the same base package. So you get all the built-in module pages working in MAUI Blazor without any extra work.

  2. Template-generated pages (like Index.razor, HostDashboard.razor) — In our current templates, these pages are duplicated between MAUI Blazor and Blazor WebApp Client projects. The markup is almost identical, but there are small differences. For example, the Login button on Index.razor uses <a href="/Account/Login"> in MAUI Blazor vs <a @onclick="Login"> with NavigationManager in WebApp Client. The HostDashboard.razor is essentially the same in both templates.

  3. Your custom pages — If you want to share your own custom pages between both apps, you can create a Razor Class Library (RCL) project and reference it from both the MAUI Blazor and Blazor WebAssembly projects. Keep in mind that you may need to handle some platform-specific differences (like navigation and authentication) through abstractions or conditional logic.

  4. HttpApi.Client — Both MAUI Blazor and Blazor WebAssembly reference the same HttpApi.Client project, so all your API client proxy code is fully shared.

  What requires separate implementation:

  • Authentication: MAUI Blazor uses OIDC via Duende.IdentityModel.OidcClient with a platform-specific MauiAuthenticationBrowser (supporting both authorization code flow and password flow). Blazor WebAssembly uses standard ASP.NET Core authentication (AddBlazorWebAppServices()). ABP provides Volo.Abp.Account.Pro.Public.MauiBlazor package that handles MAUI authentication for you.

  • Module configuration: MAUI Blazor module (MyProjectNameMauiBlazorModule) has its own setup for Blazorise, routing, bundling, and authentication that differs from the WebAssembly module.

  • Navigation menus: Each template has its own MenuContributor. For example, the MAUI Blazor user menu links to external URLs (Account management pages on the auth server) with target: "_blank", while the WebAssembly version uses OperatingSystem.IsBrowser() to differentiate behavior.

  • Platform-specific code: MAUI Blazor includes platform handlers for Android, iOS, MacCatalyst, and Windows (e.g., WebAuthenticator callbacks, SSL certificate handling in debug mode).

  Getting started:

  You can create a new ABP solution with the MAUI Blazor option using ABP Studio. The generated template comes pre-configured with everything needed. Then, to maximize code reuse with your existing Blazor WebAssembly app, extract shared custom components into a Razor Class Library.

  Thanks

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel