Quick Start

The fastest way to get started with IcuBlazor is to just copy one of the sample projects and add your tests! If you need more details however, configuring IcuBlazor is very simple.

Sample projects

IcuBlazor supports all blazor hosting projects including Client-Side Blazor (CSB) and Server-Side Blazor (SSB). If you like, you can maintain both code-bases with two thin server projects: Server.CSBLinked and Server.SSBLinked. These projects use a CSB app as if it was an external library. With this setup, you can easily switch between server and wasm execution by changing Visual Studio's Startup Project. Here is a layout of the sample projects:

sample projects

To run the samples load QuickStart.sln in Visual Studio, set a startup project like Server.SSBLinked and run it. Note: CSB.csproj does not fully utilize IcuBlazor because it is a standalone app without a server.

Configuration

Like other Blazor Libraries, IcuBlazor requires a little configuration.

  1. For client .csprojs (e.g. CSB.csproj) just reference IcuBlazor.

    <TargetFramework>net5.0</TargetFramework>
<PackageReference Include="IcuBlazor" Version="x.y.z" />

    And configure Program.cs:

    using IcuBlazor;
    :
    public static async Task Main(string[] args) {
        :
        var baseAddr = builder.HostEnvironment.BaseAddress;
        builder.Services.AddIcuBlazor(new IcuConfig {
            IcuServer = baseAddr,
            //EnableServer = false, // default is true
        });
        builder.Services.AddScoped(sp => new HttpClient {
            BaseAddress = new Uri(baseAddr)
        });

        await builder.Build().RunAsync();
    }

    You can run CSB as a standalone web app by setting EnableServer=false. However, IcuBlazor will ignore some checks such as Checker.TextFile() & CompareDiv(). To get the full use of IcuBlazor (EnableServer=true), your CSB project needs a server like Server.CSBLinked or Server.SSBLinked.

  2. For server .csprojs (e.g. SSB, Server.CSBLinked and Server.SSBLinked), target net5.0-windows and reference IcuBlazor.Server.

    <TargetFramework>net5.0-windows</TargetFramework>
<PackageReference Include="IcuBlazor.Server" Version="x.y.z" />

    And configure Startup.cs:

    using IcuBlazor;
:

public void ConfigureServices(IServiceCollection services)
{
    :
    services.AddIcuBlazor(new IcuConfig {
        TestDir = "icu_test_data", // dir under wwwroot
    });
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    :
    app.UseIcuServer(env);
}

    TestDir is a directory below wwwroot/ where IcuBlazor stores testing data.

  3. Some recommendations:

    • In _Imports.razor we recommend adding @using IcuBlazor.

    • You shouldn't have to change index.html or _Host.cshtml but ensure that you include the appropriate css files.

      <head>
  :
  <link href="{MyApp-assembly-name}.styles.css" rel="stylesheet" />
</head>

  4. And that's it. You are ready to start making tests!

Thin Servers

The following notes describe how the thin servers were created. The details of these projects are changing. Please consult the sample projects for working examples.

Server.SSBLinked

SSBLinked projects start from the simple SSB template project. Then you need to:

  1. Cleanup the *.razor files that clash with the CSB files:
    • Remove App.razor
    • Remove Shared\*.
    • Under wwwroot remove css/bootstrap/, css/open-iconic/ & favicon.ico
    • Remove Pages\* except Pages\Error.razor & Pages\_Host.cshtml.

  2. In _Hosts.cshtml point to your CSB library. html <head> : <link href="css/site.css" rel="stylesheet" /> <link href="{CSB}.styles.css" rel="stylesheet" /> </head> <body> <component type="typeof({CSB}.App)" render-mode="ServerPrerendered" /> : </body>

Server.CSBLinked

A CSBLinked project starts as an ASP hosted CSB project then make it thin. We only need the {CSBLinked}.Server project so remove the {CSBLinked}.Shared/ & {CSBLinked}.Client/ sub-projects.