Blazor Web Assembly Template

nukedbit · September 11, 2020, 6:01am

Just made public a new experimental template for Blazor Web Assembly integration.
It run on .NET preview 8 both client and server side.

It provide auth integration with an example protected end point.
Also you get the benefits on sharing your dtos with the *.ServiceModel project if don’t contains any server side impl. as suggested on Physical Project Structure

As suggested on the README this is a x tool compatible template so you can use it as a starting point for your new project.

If you have any suggestion or want to contribute an improvement/fix to the template let me know

mythz · September 11, 2020, 7:15am

Ahh great work, never tested it yet, but nice to see you can already use this net5.0.

Anyone who wants to build projects using this template can use the standard x dotnet tool:

$ x new nukedbit/blazor-wasm-servicestack ProjectName

nukedbit · September 11, 2020, 7:42am

Yeah it seem to be working fine, it was very easy, just changed the TFM on the service side, during the weekend i will try to convert a more complex project to .net 5.0 and see if everything works as expected

mythz · September 11, 2020, 9:25am

I’ve had to publish a new version of app dotnet tool to work with the latest v5.9.3 App, but you can open this in a Chromium Desktop App with the latest v0.0.81+ app tool:

$ dotnet tool update -g app
$ x new nukedbit/blazor-wasm-servicestack Acme
$ cd Acme\Acme
$ dotnet public -c Release
$ cd bin\Release\net5.0\publish
$ app Acme.dll

Where it will launch it in its own Windows Desktop App:

Which you can also create a Windows Desktop Shortcut to launch:

$ app shortcut Acme.dll

Might be a good idea to include in the template docs as launching as a stand-alone Windows Desktop App would likely be a popular use-case.

nukedbit · September 11, 2020, 9:42am

Very interesting!.
Just updated the readme as you suggested .

Do you think it would be possibile to extend the app tool to work on MacOS ?

mythz · September 11, 2020, 10:13am

It wouldn’t be feasible to expand it support multiple platforms as it bundles an entire x64 Chromium Build with the tool which makes it a large download. There’s also a lot of Win32 API integration in the app tool which supports launching Sharp Apps including support for Win32 APIs that wouldn’t be possible in non Windows OS’s.

But launching an external .NET Core App is just one of the features of the app tool, it should be possible to create a different dotnet tool to achieve the same behavior on macOS, e.g:

$ mac Acme.dll

Although it would still require bundling Chromium build in the dotnet tool which still requires a fair bit of effort.

Ultimately the most workable cross-platform solution might be to use the WebWindow shim which tries to use the WebView available in each OS. Although that’d mean you couldn’t target a single latest version of Chromium & would need to support multiple Browser Engines which isn’t typical for Chromium Desktop Apps like Electron or Custom CEF Apps like Spotify which bundles Chromium with their App.

nukedbit · September 11, 2020, 11:51am

Great explanation thanks. Yeah i did a quick look to the source code, and there is a lot of dependency on Windows API.
Probably would be best to create a new tool completely specific for the platform, and honestly using a native tool could be the best solution to provide native integration.
If i find time i will take a shot at it
This is the app tool source right?

mythz · September 11, 2020, 12:32pm

Yep that’s the app dotnet tool Project source code, which mostly contains the Windows app related functionality.

The main shared functionality for all dotnet tools are contained in the linked sources at:

This specific feature of launching an external .NET .dll process starts from:

github.com

ServiceStack/dotnet-app/blob/2b961798c819f67e7d3d542f13514430ab768414/src/Web/Startup.cs#L638-L645


Events.RunNetCoreProcess(new WebAppContext { 
    Arguments = dotnetArgs.ToArray(), 
    RunProcess = runProcess,
    AppDir = publishDir,
    FavIcon = File.Exists(Path.Combine(publishDir, "favicon.ico")) 
        ? Path.Combine(publishDir, "favicon.ico")
        : ToolFavIcon,
});

Which calls this API to launches the dotnet process and opens the URL in the CEF Browser:

github.com

ServiceStack/dotnet-app/blob/2b961798c819f67e7d3d542f13514430ab768414/src/App/Program.cs#L111-L127


RunNetCoreProcess = ctx => {
    var url = Environment.GetEnvironmentVariable("ASPNETCORE_URLS")?.LeftPart(';') ??
              "http://localhost:5000";
    var target = ctx.RunProcess;


    var fileName = ctx.RunProcess;
    var arguments = "";
    if (target.EndsWith(".dll"))
    {
        fileName = "dotnet";
        arguments = ctx.RunProcess;
    }


    process = Startup.PipeProcess(fileName, arguments, fn: () =>
        CefPlatformWindows.Start(new CefConfig { StartUrl = url, Icon = ctx.FavIcon, 
            HideConsoleWindow = !DesktopState.AppDebug }));
},

Johan · September 17, 2020, 1:09pm

@nukedbit if you want cross platform I know Steve Sanderson demoed a Blazor app running native cross platform using WebWindow. Not production ready but I know it works.

WebWindow uses :

On Windows , WebWindow uses the new Chromium-based Edge via webview2, assuming you have that browser installed (it could fall back on older Edge if you don’t, but I haven’t implemented that)
On Mac , it uses the OS’s built-in WKWebView, which is the same technology behind Safari
On Linux , it uses WebKitGTK+2, which is yet again a WebKit-based technology

And best of all the download size is negligible if framework already on computer

nukedbit · September 17, 2020, 1:47pm

Thanks @Johan, yeah WebWindow is one of the options i was evaluating.
I have not started working on it, but i was also undecided if go WebWindow or chrome also for MacOS.
There is also a https://github.com/chromelyapps/Chromely a cross platform project which use chrome as a runtime, but it’s going to be more heavy.