Blazor WebAssembly 3.2.0 now available

Daniel Roth

Daniel

I’m thrilled to announce that Blazor WebAssembly is now officially released. This is a fully-featured and supported release of Blazor WebAssembly that is ready for production use. Full stack web development with .NET is now here!

Get started

Getting started with Blazor WebAssembly is easy: simply go to https://blazor.net and install the latest .NET Core SDK (3.1.300 or later), which includes everything you need to build and run Blazor WebAssembly apps.

You can then create and run your first Blazor WebAssembly app by running:

dotnet new blazorwasm -o BlazorApp1
cd BlazorApp1
dotnet run

Browse to https://localhost:5001 and voilà! You’ve just built and run your first Blazor WebAssembly app!

Running Blazor WebAssembly app

To maximize your Blazor productivity, be sure to install a supported version of Visual Studio for your platform of choice:

You can find additional docs and samples on https://blazor.net.

Upgrade an existing project

If you already have an existing Blazor WebAssembly project, you can upgrade it from the 3.2.0 Release Candidate to the official 3.2.0 release by doing the following:

  • Update all Microsoft.AspNetCore.Components.WebAssembly.* and System.Net.Http.Json package references to version 3.2.0.

That’s it, you’re all set!

What is Blazor WebAssembly?

In case this is your first time learning about Blazor, let me introduce you to what Blazor WebAssembly is all about.

Blazor is an open source and cross-platform web UI framework for building single-page apps using .NET and C# instead of JavaScript. Blazor is based on a powerful and flexible component model for building rich interactive web UI. You implement Blazor UI components using a combination of .NET code and Razor syntax: an elegant melding of HTML and C#. Blazor components can seamlessly handle UI events, bind to user input, and efficiently render UI updates.

Blazor components can then be hosted in different ways to create your web app. The first supported way is called Blazor Server. In a Blazor Server app, the components run on the server using .NET Core. All UI interactions and updates are handled using a real-time WebSocket connection with the browser. Blazor Server apps are fast to load and simple to implement. Support for Blazor Server is available with .NET Core 3.1 LTS.

Blazor WebAssembly is now the second supported way to host your Blazor components: client-side in the browser using a WebAssembly-based .NET runtime. Blazor WebAssembly includes a proper .NET runtime implemented in WebAssembly, a standardized bytecode for the web. This .NET runtime is downloaded with your Blazor WebAssembly app and enables running normal .NET code directly in the browser. No plugins or code transpilation are required. Blazor WebAssembly works with all modern web browsers, both desktop and mobile. Similar to JavaScript, Blazor WebAssembly apps run securely on the user’s device from within the browser’s security sandbox. These apps can be deployed as completely standalone static sites without any .NET server component at all, or they can be paired with ASP.NET Core to enable full stack web development with .NET, where code can be effortlessly shared with the client and server.

Fully-featured

Blazor WebAssembly comes packed with features to keep you productive on your next web app project:

Blazor in action

Blazor WebAssembly has everything you need to build fully-featured production web apps. To see all these Blazor WebAssembly features in action, checkout Steve Sanderson’s on-demand BUILD session (link should be live after 12pm PT): Modern Web UI with Blazor WebAssembly.

Ready-made components

Of course, any web app is going to need beautiful and feature rich components. A variety of Blazor UI components are available from our fantastic partners that work great in any Blazor app, including Blazor WebAssembly apps:

Open-source community

Blazor also has a thriving open-source community and ecosystem. Members of the community, (folks just like you!) have built lots of great component libraries, interop libraries, test frameworks, and more, and then made them freely available for you to use. Some great examples include:

You can find these community projects and many others listed on the Awesome Blazor GitHub repo.

LTS or Current?

Blazor WebAssembly 3.2.0 is a fully supported release under the .NET Core Support Policy. Since this is the first release of Blazor WebAssembly, it is a Current release, not an LTS release; it does not the inherit LTS status of .NET Core 3.1. This means that once Blazor WebAssembly ships with .NET 5 later this year, you will need to upgrade to .NET 5 to stay in support. We expect Blazor in .NET 5 to be a highly compatible release.

What’s next?

Now that we have shipped Blazor WebAssembly, we are shifting our attention to .NET 5. Work has already started on making Blazor WebAssembly available with .NET 5, which we expect to complete for preview next month.

We also have a number of Blazor features and improvements that we are investigating for the .NET 5 & 6 wave. You can see the list of core deliverables that we are considering in the Blazor Roadmap for .NET 5 issue on GitHub. Please note that we consider this list to be highly aspirational. While we hope to deliver all of the improvements listed, there are still many unknown and plans will certainly change as we go. We also expect that there will be plenty of smaller improvements that we will deliver as well.

We are also continuing to collaborate with our friends on the Xamarin team on experimental support for building native UI using Blazor through the Mobile Blazor Bindings project. This includes some early efforts to explore building hybrid UI for native apps, which we hope to share more about soon.

Thank you

We sincerely appreciate all the enthusiastic support we have received from the Blazor community as we’ve worked to make the release a reality. The number of Blazor articles, blog posts, docs, sample apps, libraries, books, videos, presentations, workshops, courses, meetups, feature suggestions, and feedback issues that have been contributed by the community to the Blazor ecosystem even while it was still in preview has been truly outstanding. To everyone who helped make this release possible, thank you! We couldn’t have done it without you.

Try Blazor today

We hope you enjoy this release of Blazor WebAssembly. Give Blazor a try today by going to https://blazor.net. We look forward to seeing what you create with it.

As always, if you have any questions of feedback about Blazor please let us know by filing an issue on GitHub.

154 comments

Leave a comment

  • Avatar
    Ross

    Congratulations! About this time a year ago, I started researching the various current web app technologies (Angular, React, Vue, and Blazor) to decide which one to use for a brand new large project we’ll be working on over the coming years. I decided to take a punt and go with Blazor. And I’m glad I did – it’s been a delight to work with. In saying that, some of those items on your .NET 5 Blazor roadmap would go down nicely! 🙂

  • Avatar
    Carlos Hevia Colinas

    Congrats Daniel, I love WebAssembly.

    By the way, I have been troubling with Location. I’m trying to use a common resx file (sharedstrings.xx.resx) for all my pages. But it does not work. I did same on MVC projects.

    The location just works if you use a resx file by page (Index.resx, Index.xx.resx, Counter.resx, etc.)

    Is this a limitation on Blazor?

  • Avatar
    Fabela, Jose

    Thanks Daniel,

    I have been working for some months in a project with Blazor WebAssembly and I have finished it, but haven’t been able to make it works in my local IIS on windows 10, the antivirus is blocking the dll files when i open the site, I changed the files extension but the antivirus blocks the files, is there a workarround to solve this issue? I have created a new project with the new template in VS 2019 16.6 and i have published it locally and throws the same error, Could you please give me a tip to solve it?

    • Daniel Roth
      Daniel RothMicrosoft logo

      Hi Roshawn. You can use VB code from a Blazor app by factoring the code into separate libraries that you reference. It’s all .NET assemblies after the app is built. The only constraint is that Razor is C# based, so the Razor components need to be built in a C# project.

  • Avatar
    Kazimir Dugandzic

    Any reason why I’m getting over 50 “blazor.webassembly.js:1 Uncaught (in promise) DOMException: Entry already exists.” console errors on startup? This is from a base template project for WebAssembly using the latest bits from today. The error only happens in Chrome (not Edge). I published a version and deployed it to storage as a static site as a test and the errors did not occur. Seems specific to debugging locally on Chrome only (Debug and Release both the same) ….

    Interesting note: When using Release build locally the amount of console errors is cut in half.

  • Sagar Moharil
    Sagar Moharil

    Congratulations Daniel, have been following Blazor from start. I was searching for two way binding in .net and my search ended at experimental project Blazor. The wasm concept is really awesome. I would love to see Blazor mobile binding also in production.

  • Avatar
    Daniel P

    Congratulations and thank you for your hard work!

    I have published my first Blazor app to Azure Static Website. It’s a very basic app just to test various concepts of Blazor – it uses JWT authentication, authorization and a few pages with rudimentary 3rd party components from one of the vendors listed in your post. However, the size of the app is 11 MB! I suspect the culprit is predominantly the external library.

    Size of all .dll files in the _framework/_bin folder is about 9 MB, but the total size of .gz files is only about 3 MB. When inspecting the network traffic using Chrome Developer tools, as far as I can tell all files are being transferred uncompressed. Is there something special that needs to be done during the publishing process? What about tree shaking? I thought this was part of publishing and even uncompressed DLLs would be much smaller.

    Is there a tool that I can use to determine which DLLs referenced in my project are causing individual assemblies to be published? I’m basically looking for a way to identify which published assemblies are referenced by the 3rd party library so that I can discuss this with the vendor.

    Thanks!

    • Daniel Roth
      Daniel RothMicrosoft logo

      Hi daniq. Did you publish the app using the Release configuration (dotnet publish -c Release)? Using the Release build configuration will trigger the IL linker to run. To use the precompressed files, you need to have some URL rewrite logic that handles returning the precompressed files with the correct content encoding header. When the app is ASP.NET Core hosted, we handle this for you. With an Azure Static Website there isn’t really a good way to use the precompressed files. Instead you could setup the site with a CDN that will do runtime compression or try to setup URL rewrite rules in the CDN to handle it. It might actually be easier to instead handle using the precompressed files client-side by adding a bit of JavaScript to your app. Steve Sanderson has a GitHub Pages based sample that shows how to do this: https://github.com/SteveSandersonMS/BlazorOnGitHubPages/blob/master/wwwroot/index.html

  • Avatar
    哲 张

    Congratulations! I started to create a Blazor UI component library about a year ago. Until now, the component library is now fully functional and has a production environment use case, but I do n’t know how to publicize it, so not many people know about it. In the plan, Blazui will support multiple different UI libraries with the same calling method, such as ant design and IView. Repopsitory address: https://github.com/wzxinchen/Blazui/blob/master/README.en.md. I hope bloggers can add my UI library to your blog post and the recommended list of UI libraries on the Blazor homepage. Thank you!

  • Avatar
    Vlad Olaru

    Congratulations!

    I have a question re. this feature:
    “Easily reuse code and existing .NET Standard libraries on the client and server”

    Does this mean that we can expect that a NuGet package targeting .NET Standard can be used in a Blazor WebAssembly application? I am looking to use such a package in an application and after completing a debug or release build its dependencies are not listed in blazor.boot.json or deployed to the wwwroot_framework_bin folder (even though they are copied to the netstandard2.1 folder); as a result trying to use the package results in a System.IO.FileNotFoundException. I understand that not all features may work due to missing APIs and other issues, but I would have expected it to at least come through the build process and load.

    I logged this issue at https://github.com/dotnet/aspnetcore/issues/21482 two weeks ago, no progress so far.

    Thanks.

    • Daniel Roth
      Daniel RothMicrosoft logo

      Hi Vlad. Yes, in general, .NET Standard libraries should work with Blazor WebAssembly apps as long as the library can function within the browser’s security sandbox (no native dependencies, doesn’t need arbitrary network/filesystem access, etc.).

      Thanks for filing the issue! We will follow up with you on that issue on GitHub.

  • Avatar
    Howard Richards

    Congratulations to the Blazor team on RTM for WASM!

    Quick point: you might want to note that anyone who had the preview Blazor templates will need to upgrade to the RTM versions:

    dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0

    This worked for me

  • Mark Baldwin
    Mark Baldwin

    I run “dotnet new blazorwasm -o BlazorApp1”

    and get

    “Couldn’t find an installed template that matches the input, searching online for one that does…”

    “No templates matched the input template name: blazorwasm.”

    I have VS 16.6 and the 3.1.300 SDK installed.

    I can use the IDE to create a project using the 3.1.5 template. This seems to create a valid project using the 3.2.0 packages, but when I compile it fails with

    Error MSB4018 The “ResolveBlazorRuntimeDependencies” task failed unexpectedly.
    System.IO.FileNotFoundException: Could not load file or assembly ‘BlazorApp1.dll’ or one of its dependencies. The system cannot find the file specified.
    File name: ‘BlazorApp1.dll’ —> System.IO.FileNotFoundException: The system cannot find the file specified. (Exception from HRESULT: 0x80070002)
    at System.Reflection.AssemblyName.nGetFileInformation(String s)
    at System.Reflection.AssemblyName.GetAssemblyName(String assemblyFile)
    at Microsoft.AspNetCore.Components.WebAssembly.Build.ResolveBlazorRuntimeDependencies.ResolveRuntimeDependenciesCore(String entryPoint, IEnumerable1 applicationDependencies, IEnumerable1 monoBclAssemblies)
    at Microsoft.AspNetCore.Components.WebAssembly.Build.ResolveBlazorRuntimeDependencies.Execute()
    at Microsoft.Build.BackEnd.TaskExecutionHost.Microsoft.Build.BackEnd.ITaskExecutionHost.Execute()
    at Microsoft.Build.BackEnd.TaskBuilder.d__26.MoveNext()

    C:\Users\markb.nuget\packages\microsoft.aspnetcore.components.webassembly.build\3.2.0\targets\Blazor.MonoRuntime.targets line 376

    • Daniel Roth
      Daniel RothMicrosoft logo

      Hi Mark. If you have the 3.1.300 version of the .NET Core SDK installed you should certainly be able create a Blazor WebAssembly project from command-line. When you run dotnet --version what version is returned? When you run dotnet new -h does blazorwasm show up on the list? Do you have a global.json file on the machine pinning the SDK version to something other than 3.1.300?

      The 3.1.5 version that shows up in Visual Studio is unfortunately misleading and has confused some other folks, but it does indicate that you do have the latest SDK installed on your machine and the Blazor WebAssembly template is getting picked up.

      Also the file path to your NuGet packages looks a little unusual, in that there appears to be a missing slash between your user name and the “.nuget” folder. Was that just a copy and paste error in your comment? Or do you have any special characters in your user name?

  • Avatar
    Dhiogo Acioli

    Is it just me that I can’t get the login to work at all with the webassembly + host template?
    I’ve read all kinds of documentation and videos, and none work. simply each different option gives a different error. not even with a fake, I managed to make it work.

    • Avatar
      Dhiogo Acioli
       builder.Services.AddOidcAuthentication(options =>
                  {
                      options.ProviderOptions.Authority = "https://accounts.google.com/";
                      options.ProviderOptions.ClientId = "...";
                      options.ProviderOptions.ResponseType = "token";
                      options.ProviderOptions.RedirectUri = "https://localhost:44306/authentication/login-callback";
                      options.UserOptions.AuthenticationType = "google";
                  });

      the only code that didn’t generate any errors was this one and it still doesn’t work or do anything.

        • Avatar
          Dhiogo Acioli

          Chrome, latest version. I also tested with the edge.

          With this code that I mentioned, the following errors happen:

          Login Page: info: Microsoft.AspNetCore.Authorization.DefaultAuthorizationService [2]
                Authorization failed.

          Register Page (this error can only be seen with the edge, not with chrome):
          crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer [100]
                Unhandled exception rendering component: Invalid calling object
                TypeError: Invalid calling object
                   at Anonymous function (https: // localhost: 44306 / _framework / blazor.webassembly.js: 1: 9866)
                   at Promise (native code)
                   at e.jsCallDispatcher.beginInvokeJSFromDotNet (https: // localhost: 44306 / _framework / blazor.webassembly.js: 1: 9835)
                   at _mono_wasm_invoke_js_marshalled (https: // localhost: 44306 / _framework / wasm / dotnet.3.2.0.js: 1: 171263)
                   at Module [_mono_wasm_invoke_method] (https: // localhost: 44306 / _framework / wasm / dotnet.3.2.0.js: 1: 195650)
                   at BINDING.call_method (https: // localhost: 44306 / _framework / wasm / dotnet.3.2.0.js: 1: 160810)
                   at Anonymous function (https: // localhost: 44306 / _framework / wasm / dotnet.3.2.0.js: 1: 163079)
                   at beginInvokeDotNetFromJS (https: // localhost: 44306 / _framework / blazor.webassembly.js: 1: 41356)
                   at s (https: // localhost: 44306 / _framework / blazor.webassembly.js: 1: 8558)
                   at e.invokeMethodAsync (https: // localhost: 44306 / _framework / blazor.webassembly.js: 1: 9634)

        • Avatar
          Dhiogo Acioli

          this because I commented this code: builder.Services.AddApiAuthorization ()

          if I uncomment, it gives another error:
          crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer [100]
                 Unhandled exception rendering component: Could not load settings from ‘_configuration / VerusDate.Client’
                 Error: Could not load settings from ‘_configuration / VerusDate.Client’
                     at Function.createUserManager (https: // localhost: 44306 / _content / Microsoft.AspNetCore.Components.WebAssembly.Authentication / AuthenticationService.js: 1: 5893)
                     at async Function.initializeCore (https: // localhost: 44306 / _content / Microsoft.AspNetCore.Components.WebAssembly.Authentication / AuthenticationService.js: 1: 5027)

          • Daniel Roth
            Daniel RothMicrosoft logo

            Hi Dhiogo. The AddApiAuthorization method is used when you want to authenticate users using ASP.NET Core Identity, which needs to be setup in a companion ASP.NET Core project. When you use this method, the app will try to query the server for configuration data that it should use for authentication purposes. It sounds like your app isn’t setup with the configuration endpoint. This can happen in an ASP.NET Core hosted app when you run the Client project instead of the Server project.

            Based on your earlier post, it sounded like you were trying to setup authentication using Google as your OpenID Connect provider. That should work, so we’d have to see more about what you’re trying to do to understand why it’s not working. The related docs are here: https://docs.microsoft.com/aspnet/core/security/blazor/webassembly/standalone-with-authentication-library

  • Avatar
    Dhiogo Acioli

    It is a template project from scratch. I commented on AddApiAuthorization and put that code.

    I’ve read this docs about five times, but nothing makes sense. What is the relationship between connecting with google and setting up access in azure? Anyway, I already followed this step by step, but it doesn’t work.

  • Avatar
    Ramon Nogueron

    Hi,

    I had installed Blazor webassembly 3.2.0 preview a few weeks ago. Now, I installed VS 16.6.
    Then I saw the announcement and I downloaded the SDK 3.1.300, installing it complains, it can’t. I think because it was already installed by the VS 16.6 ok, we continue.

    I create new app, blazor webassembly, uses 3.2.0, ok!

    Problem: I open previous app (created few weeks ago), also blazor webassembly, used 3.2.0-preview. I am unable to find how to update it. In nuget manager it does not show the 3.2.0 available.

    How can I update the old app?

    Thanks.
    Ray

  • Avatar
    - noctis -

    Congratulations for the release. We’re eager to try out Blazor WASM and updated visual studio just to do that. However, we got the following error when trying to build from the default Blazor WASM project template.

    Package System.Text.Encodings.Web 4.7.0 is not compatible with netstandard2.1 (.NETStandard,Version=v2.1). Package System.Text.Encodings.Web 4.7.0 does not support any target frameworks. BlazorApp2 C:\Users\user\source\repos\BlazorApp2\BlazorApp2\BlazorApp2.csproj.

    Been googling around but didn’t found the solutions, so we thought posting here might help us to get some clues.

  • Avatar
    Иван Ночной

    Well done, thanks for the work! Please consider the possibility of a progressive initial download. The initial download time for a slow 3G connection (emulated in browser’s devtools ) before the first visible screen is 55 seconds, compared to 13 seconds of a traditional web 1.0 site.

  • Avatar
    Christian McGowan

    Hi Daniel,

    I’m a CEO of a Dev Company. We currently use WinForms and are looking at building a SaaS version of our Products. I think that the Blazer route could be a good way forward for us, however when I put the question to our developer his response was “basically ANYTHING that doesnt run clientside (javascript) will be slow as it has to ping and pong the server for everything, meaning all the workload is on the server, when you have all those client cpu’s doing nothing, its better to have the operational code on the client and just request data from the server, its cheaper, faster, more responsive and more reliable. After using javascript frameworks on client side for so long, offering faster responsive single page apps with no real load waits for page changes – over mvc/razor style server side everything which is where we were in year 2000.” – I’m not is a position to validate/de-bunk his response so hoping you could let me know what your response would be?

    Regards

    Christian

    • Avatar
      Иван Ночной

      I am not Daniel, but I will express my opinion.

      It depends on the application. In many web applications, almost every action requires access to the server. For example, go to the Amazon or Facebook page, disconnect from the Internet and try to click somewhere. How many clicks can you make before an application throws an error? 1 to 3 no more.

      If you are creating an online store, news site, translator or any application that requires a permanent network connection, then Blazor server is a good choice. If you are doing a photo editor, diagram editor, drawing tool, arcade game, then Blazor server will not work well.

      Blazor server is somewhere between traditional and SPA apps. And, by the way, do not think that users will be grateful to you for loading their processors.

  • Avatar
    N

    Daniel

    after upgrading i running into a problem which surfaces only when compiled in release version, works fine in debug version.
    I am using custom Authentication

    Severity Code Description Project File Line Suppression State
    Error Unhandled exception. Mono.Linker.MarkException: Error processing method: ‘System.Void Microsoft.Extensions.DependencyInjection.MvcCoreMvcCoreBuilderExtensions::AddAuthorizationServices(Microsoft.Extensions.DependencyInjection.IServiceCollection)’ in assembly: ‘Microsoft.AspNetCore.Mvc.Core.dll’ BlazorWebAssembly.Client C:\Users\XXXXX.nuget\packages\microsoft.aspnetcore.components.webassembly.build\3.2.0\targets\Blazor.MonoRuntime.targets 326

    looks like it is related to this package

    any adivse on how to get around this ?

    i have tried different version(even pre-released one ) for

  • Avatar
    Ed Hansen

    Job well done, Dan. Congratulations!
    I’m a beginner with Blazor. I created a WASM with the Release Candidate. I don’t understand how to upgrade it.

    “Update all Microsoft.AspNetCore.Components.WebAssembly.* and System.Net.Http.Json package references to version 3.2.0.”

    What is the procedure to follow?

    Many Thanks.

  • Avatar
    Dhiogo Acioli

    I’m accessing an API that returns a class with a protected constructor and gives the following error: Default constructor not found for type MyClass

    Testing with the postman works normally. is there any limitation of blazor webassembly?

  • Avatar
    Endy Tjahjono

    Hi Dan,

    Congratulations on the release! I appreciate all the hard work to make it happen.

    Looks like routing navigation using hash (for example localhost/#/, localhost/#/about) is not supported.
    Is there a plan to add support to it in the future?

  • Avatar
    Ramzi DEBAB

    Hi Dan,

    So delighted with this news! I have two questions please:

    1- Are there any benchmarks measuring Blazor’s performance (for the frontend part) with other competing technologies like Angular or React?
    2- Is there any roadmap for integrating Blazor in SharePoint Framework (SPFx)? As a .Net developer, I won’t be obliged to learn another JS framework.

    Thanx for your time.

    • Daniel Roth
      Daniel RothMicrosoft logo

      Hi Ramzi.

      1- Are there any benchmarks measuring Blazor’s performance (for the frontend part) with other competing technologies like Angular or React?

      Blazor WebAssembly isn’t going to win in any performance comparisons with JavaScript based frameworks like Angular or React. Blazor WebAssembly runs on a .NET IL interpreter based runtime – there’s no JIT compilation to WebAssembly happening, so execution performance is much slower than normal .NET code execution. You’re not going to want to use Blazor WebAssembly for CPU intensive workloads. But for most UI scenarios, it’s sufficient. We hope to improve the runtime performance of Blazor WebAssembly apps with ahead of time (AoT) compilation to WebAssembly in a future release.

      2- Is there any roadmap for integrating Blazor in SharePoint Framework (SPFx)? As a .Net developer, I won’t be obliged to learn another JS framework.

      We don’t provide this support out the box, but anywhere you use JavaScript it should be possible to use Blazor WebAssembly. You could try out the https://github.com/smjltd/BlazorPoint community open source project suggested earlier in these blog post comments by the project author.

      • Rod Macdonald
        Rod Macdonald

        “Blazor WebAssembly isn’t going to win in any performance comparisons with JavaScript based frameworks like Angular or React.”

        I thought the promise of Blazor was that it would run at near client speed i.e. was many times faster than Javascript?

        • Daniel Roth
          Daniel RothMicrosoft logo

          Hi Rod. WebAssembly is designed to bring significant performance improvements to the web, but in a Blazor WebAssembly app we currently only use WebAssembly for the .NET runtime implementation. All of the code that then makes up your app is then interpreted as .NET IL. While the interpreter is very functional, it is significantly slower that a JIT based runtime. We are now working on various ways to improve performance, including work to add support for AoT compilation to WebAssembly.

  • Avatar
    bruno damaso

    Great work, although now I have a problem, until preview4 and visual studio preview the debug worked on the client side, but I updated from preview version 16.6 to preview 17 and the debug stopped working. and i updated the vs16.5 to vs16.6 and it don’t working too.

    I create a new blazoer project, the nuget version is 3.2.0, put a breakpoint on the currentCount ++ line; but it does not work

  • Avatar
    Rod Macdonald

    Awesome Build 2020 with Daniel & Steve. Thank you, can’t have been easy to pull off a show like that. Apols if I’m a few streets behind with Blazor, have been waiting to see where it was a travelling before getting started. 2 things and sorry if I’ve missed some key points.

    I’m having a go with some 3rd party tools and I’m just realising I’m missing a WYSIWYG pane to see what I’m building. Now at that point I’m wondering if my ears did hear there is a hot reload somewhere, though that will only solve part of the problem. More important is for 3rd party controls, I can’t seem to right click on a control and bring up a CSS designer dialog to stylise my control as I could. Is that something I’m missing or is that on its way?

    Secondly, I’m of the opinion Steve’s WebWindow is a way forwards (though I didn’t hear anything on that front from Build) and instead of MS embarking on yet another mission (aka Maui), focus on WinUI and use Blazor Native with a bit of Fluent to link up i.e. make Blazor the cross platform bit and keep the Windows stuff non cross platform. That’s more a deliverable for 6 rather than 18 months I’d say. I thought a pretty good name for the cross platform part would be ‘Blazor Portable’.

    PS is Blazor Server with its diff-dom kind of a future too as 5G approaches and perhaps the days of the traditional OS are supplanted with app rendering OS’s i.e. apps becoming ‘streamed’? Just a thought!

    • Daniel Roth
      Daniel RothMicrosoft logo

      Hi Rod. Hot reload is something that we’re looking at for the .NET 5 & 6 wave. We’re investigating different approaches. For now, I found it convenient to start the server for the Blazor app and then run dotnet watch build on the client project so that the client project is rebuilt whenever it is changed. You can then refresh the browser to see the changes reasonably quickly. We don’t have a WYSIWYG editor for Blazor, but there are some third-party options that you could look at, like Radzen. We are also looking at enabling hybrid web UI for native apps using .NET and Blazor in a way that is aligned with .NET MAUI and we expect to have something to share for that soon.

      • Rod Macdonald
        Rod Macdonald

        Thank you for getting back to me and for the tip, it is appreciated. Very interesting to hear about the hybrid web UI. I’ll look out for the share! I mentioned this to the XAML team years back, but XAML re-stacked to embrace HTML, with HTML being rendered on non-windows devices.

        I managed to smash my Samsung phone on my last day of work before Covid forced a shutdown. Eventually the local supermarket that sold these things re-opened and I bought a new Samsung. What struck me once again is how poor Android is (totally unintuitive with a gooey interface). I know it’s an old wound but I remain to this day amazed at how a Windows ‘phone/mobile OS released to 3rd party device manufacturers could ever be any worse than this thing. No firm is going to give up an OS with a billion desktop users, yet I can’t help wondering if the OS is holding back MS from getting Windows everywhere (screens, not the OS). That is what could be so exciting for Blazor.

        Sorry for the pipeline dreams!

  • Avatar
    Todd Albers

    Apologies if previous (deleted) post was too lengthy or came off wrong. I thought it was a generally good idea. I don’t think anything was out of line with code of conduct. But I guess too wordy and\or maybe off topic. Apologies if there was some reason. Again, great job on delivering Blazor to release!

  • Avatar
    Nicky Heuperman

    Being able to customize the boot process is a welcome addition for me.

    There’s however 1 file that appears to not be loaded this way: blazor.boot.json, which I would like to modify the request headers for.
    Use case:

    I define routes server side based on a header value, basically different users should be able to load different versions of the application (this is done based on the token).
    As different versions possibly have different versions of blazor.boot.json the request for this file would also need to have the header attached.
    I’ve achieved this by manually editing blazor.webassembly.js but I was wondering if there was a framework supported way of doing this?

    Thanks in advance

  • Avatar
    Richard Hernandez

    Congrats Daniel,
    I’m loving Blazor WebAssembly, got CI/CD going from Github repo thru Azure Pipelines, sweet!

    Only one little issue, I can’t seem to access Azure Application Settings. If I publish via Visual Studio including appsettings.json in wwwroot everythings works but with CI there is no appsettings.json in the repo. I’m sure I’m missing something in the program.cs, at the moment I inject IConfiguration into a service.

    Any thoughts?

    • Daniel Roth
      Daniel RothMicrosoft logo

      Hi Richard. I don’t think there is a way to read Azure App Settings from Blazor WebAssembly. The Azure App Settings are stored in environment variables on the server or injected into a server-side .NET app through System.Configuration. There isn’t a mechanism to flow these values to the browser. Instead, any configuration values that you want to flow to the browser need to be stored in appsettings.json so that they can be retrieved.

  • Avatar
    Steven Pua

    Is there an existing prototype for aot blazor wasm? How was the performance gain for starting the app? My current setup using my laptop loads the basic template in 1-1.5 sec with cache. My phone loads it around 4 sec with cache.

  • Avatar
    Guru Vignesh

    Hi All,
    It’s really excited to see the official web assembly version, I am thrilled and I just updated my existing project to 3.2 Version. To my surprise I read like TimeZone support is already there in preview 5 version. But still now If I try for DateTime.Now -> It is returning UTC Time only.

    Related Issue in GitHub is also marked as Closed:
    https://github.com/dotnet/aspnetcore/issues/15776

    Could any one please help me, Or Still the Issue needs to be fixed even in 3.2.0 version. It would be really helpful.

  • Avatar
    Sergei Y.Kitáev

    Good day, Daniel!
    Here I continue my question about BLAZORHOSTED template: https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-release-candidate-now-available/#comment-2338.
    Thank you for the response!
    Thank you very much for long-awaited release of WebAssembly!
    I do have .NET Core 3.1.4 installed and “dotnet –version” command returns 3.1.300 after installation of the SDK and adding path to “C:\Program Files\dotnet\sdk\3.1.300” folder (via Path-env.var.correction).
    Directly after installation of SDK 3.1.300 the only two Blazor templates are available: blazorwasm and blazorserver. (After executing “dotnet new -i Microsoft.AspNetCore.Blazor.Templates” command — some old templates appear, including “blazorhosted”.)
    Now I have following questions:

    I. My simple server is build with the latest packages, it responds on REST-queries and even index.html is visible to WASM-Client, but not other files. I can not guess how to make it correctly without any example. Please, make BLAZORHOSTED-sample available and not secret (no matter, by templates or somehow else).

    II. Also, I would like to obtain a way which allows to build Web-server for WASM without importing DLL-code from client-side. I wish to avoid anything like “app.UseClientSideBlazorFiles%Client.Program%()” and to use C# source-code sharing (instead of hard binary dependency with client platform specific). Is such scenario possible somehow?

    III. Are there any plans to realize something like DOM-API in C# (instead of using JS-interop.)?

    IV. Is intensive usage of JS-interop. (for DOM-correction) acceptable in Blazor or it is definitely not recommended for Blazor application?

    Thanks!

    • Daniel Roth
      Daniel RothMicrosoft logo

      Hi Sergei.

      It sounds like you have the correct version of the .NET Core SDK installed (3.1.300), which includes the Blazor WebAssembly template. No need to separately install the template anymore.

      I. Any static files in the wwwroot folders of the client or server projects should be accessible to the Blazor client.

      II. The dependency from the server project to the client is not technically necessary, but it is used to the development experience much more smooth. If you want to remove this dependency, you could set up your own automation to publish the client project into the server project, but I think you will probably find that setup inconvenient.

      III. Blazor has its own component model that handles most of the DOM manipulation for you. You author components that define their rendering logic, and the Blazor takes care of updating the DOM accordingly. We don’t have any plans to provide DOM API wrappers in C# at this time. If you need to manipulate the DOM directly, you can use JS interop.

      IV. When using JS interop to manipulate the DOM you have to be careful to not interfere with Blazor’s DOM tracking and diffing. Blazor won’t know about any changes you make manually to the DOM, which may result in those changes getting overwritten on the next render.

      • Avatar
        Sergei Y.Kitáev

        Good day, Daniel!
        Thank you for explanation concerning strategy (DOM, JS-interop., binary dependency on client-side)!

        My apologizes for inconvenience. However key question is still obscure, because there is neither official confirmation nor denial whether well-known and so important former template/sample/example (no matter) which was named previously as BLAZORHOSTED (client/server sides in action) still exists in Blazor WebAssembly 3.2.0 + SDK 3.1.300. (One of sample’s component – AspNetCore-sample demonstrated sole server query — WeatherForecasts action in SampleDataController controller accessed by HTTP-GET.)
        Now, without fresh example compatible with WASM-release and SDK 3.1.300 I do not have any idea, what to do with following lines (commented with “//”):

        =I.=
        1) //app.UseBlazorDebugging(); // may be it’s obsolete
        2) //app.UseClientSideBlazorFiles%Client.Program%();
        3)
        app.UseEndpoints(endpoints =%
        {
        endpoints.MapDefaultControllerRoute();
        //endpoints.MapFallbackToClientSideBlazor%Client.Program%( “index.html” );
        });

        Also:
        =II.=
        No certitude about Web-host building:
        1)
        static IWebHost BuildWebHost(string[] args) =%
        WebHost.CreateDefaultBuilder( args )
        .UseConfiguration(new ConfigurationBuilder()
        .AddCommandLine( args )
        .Build())
        .UseStartup%Startup%()
        .Build();
        -or-
        2)
        static IHostBuilder CreateHostBuilder(string[] args) =%
        Host.CreateDefaultBuilder(args)
        .ConfigureWebHostDefaults(webBuilder =%
        {
        webBuilder.UseStartup%Startup%();
        });
        — which is the right way?

        And about new configuring of Client-Server projects couple:
        =III.=
        New configuration “.StaticWebAssets.xml” is so:
        %StaticWebAssets Version=”1.0″%
        %ContentRoot BasePath=”/” Path=”…..\Client\bin\Debug\netstandard2.1\wwwroot\” /%
        %/StaticWebAssets%
        in comparison with previous “.blazor.config”:
        line-1: path to …..Client.csproj
        line-2: path to …..Client.dll
        line-3: debug:true
        1) From where server knows now (in SDK 3.1.300) where client project and wwwroot with user files are explicitly resided?
        Previously (in SDK 3.1.202) the server was starting in server project folder (concerning establishing Kestrel endpoints) and was able to know about client project location by information containing in the first line of “.blazor.config”-file (with path to client project).
        2) Now (in SDK 3.1.300) what is the directory Web-server should run in:
        – server-project directory;
        – client-project directory;
        – another directory???
        3)Properties\launchSettings.json” from client project, — is it used somewhere in server-hosting scenario, and what this new property is needed for:
        inspectUri“: “{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}”?
        I was wrong about visibility of index.html (may be it was cached by Chrome-browser).

        All that is listed above is necessary to understand. This release of WASM-Blazor is important event and it is very desirable to adapt to it as WASM-Client so as the ASP Web-Server (user projects). Unfortunately, I do not see in the net actual information concerning server-side (that must be compatible with the client release).

        =IV.=
        My excuse, but I still do have questions about strategy of Blazor. Being in doubt how powerful WASM-client may be without native support of traditional DOM-API (using JS-interop. only), it also could be interesting (and not only for me) to know something about plans to future incarnations of Blazor and Razor.
        1) Will Blazor ever target desktop for building cross-platform UI, and against what markup language it is planned to do (HTML/CSS, XAML)?
        2) Is Blazor technology (or another similar approach) considered at list theoretically to be implemented for development of Web-application (in browser or standalone) together with some another markup language (not HTML)?

        Thank you very much!
        (I’ll try not to return to initial blazorhosted-question.)