How to Create a Modular Blazor Web App

Question

I am currently using ExtCore to build a modular API and I want to make the Blazor SPA application Modular too.

I want to have a core Blazor project which imports the .cshtml files from other projects so that I have a single project per section of the SPA application coding the solution in a modular way.

I can't use ExtCore as it required the project to be .net core and Blazor is .net standard (tried changing it to .net core and it blew up).

Any guidance greatly appreciated.

https://github.com/aspnet/Blazor

Answer 1

Since asking my question a lot has changed. Blazor is now a fully supported part of .net core and the tooling has massively improved.

Creating a modular Blazor app is now made easier through Razor class libraries

Razor Class Libraries allow you to create a project which contains

• Static Assets (css, js etc)
• Components
• Blazor Pages (see below on how to make them work in a modular way)

Microsoft Docs: Razor class library

Making Razor Class Libraries Modular

Inside App.razor is the router for Blazor.

The router has a baked in parameter that takes an array of additional assemblies to look at and find any additional routes. Cleverly named AdditionalAssemblies

So you can use the "AdditionalAssemblies" parameter to point to a method which scans the referenced Razor Class Libraries for Pages.

    <Router AppAssembly="@typeof(Program).Assembly" AdditionalAssemblies="AssemblyScanning.GetAssemblies().ToArray()">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>

Example Project

I have put together an example project on github as an example.

Github : ModularBlazor

No framework. Just the default Blazor bits, a couple of basic interfaces and some assembly scanning.

Answer 2

Create a ClassLibrary (.Net Standard). Modify the csproj by unloading it in Visual Studio. It must look similar to this.

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

  <PropertyGroup>
    <BlazorLinkOnBuild>False</BlazorLinkOnBuild>
    <TargetFramework>netstandard2.0</TargetFramework>
    <RunCommand>dotnet</RunCommand>
    <RunArguments>blazor serve</RunArguments>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Razor.Design" Version="2.1.0-preview2-30230" PrivateAssets="all" />
    <PackageReference Include="Microsoft.AspNetCore.Blazor.Browser" Version="0.1.0" PrivateAssets="all" />
    <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="0.1.0" />
    <DotNetCliToolReference Include="Microsoft.AspNetCore.Blazor.Cli" Version="0.1.0" />
  </ItemGroup>

  <ItemGroup>
    <Content Include="Pages\**\*.cshtml" />
  </ItemGroup>

Create a folder structure as below.

Pages
 |-----> _ViewImports.cshtml 
 | 
 |-----> Shared.cshtml

_ViewImports.cshtml

@using System.Net.Http
@using Microsoft.AspNetCore.Blazor
@using Microsoft.AspNetCore.Blazor.Components
@using Microsoft.AspNetCore.Blazor.Layouts
@using Microsoft.AspNetCore.Blazor.Routing
@using MyLibrary

Shared.cshtml

@page "/shared"
<h1>This is a shared page</h1>
@functions {

}

Build the MyLibrary.dll by right click on the project and Rebuild, There is a bug at this moment, this is not auto compiled with main project.

Select the main web application and add the MyLibrary to the dependancies.

In the _ViewImports.cshtml of the main web app add the using directives.

@addTagHelper *, MyLibrary

@using System.Net.Http
@using Microsoft.AspNetCore.Blazor
@using Microsoft.AspNetCore.Blazor.Components
@using Microsoft.AspNetCore.Blazor.Layouts
@using Microsoft.AspNetCore.Blazor.Routing
@using WebApplication7
@using WebApplication7.Shared
@using MyLibrary.Pages

Now its time to add the link to the page

<NavLink href="/shared">
    <span class='glyphicon glyphicon-education'></span> Shared Page
</NavLink>

More information On Razor : https://blogs.msdn.microsoft.com/webdev/2018/03/01/asp-net-core-2-1-razor-ui-in-class-libraries/

On Blazor Issue: https://github.com/aspnet/Blazor/issues/340