Blazor WebAssembly 3.2.0 Release Candidate now available

Daniel Roth

The Blazor WebAssembly Release Candidate is here! This release contains all of the features and improvements that we expect to release for the upcoming Blazor WebAssembly release. There are no more breaking changes planned at this point. Please give the Blazor WebAssembly Release Candidate a try and let us know what you think!

Here’s what’s new in this release:

  • Custom boot resource loading
  • API reference docs

Get started

To get started with Blazor WebAssembly 3.2.0 Release Candidate, install the latest .NET Core 3.1 SDK.

NOTE: Version 3.1.201 or later of the .NET Core SDK is required to use this Blazor WebAssembly release! Make sure you have the correct .NET Core SDK version by running dotnet --version from a command prompt.

Once you have the appropriate .NET Core SDK installed, run the following command to install the updated Blazor WebAssembly template:

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

If you’re on Windows using Visual Studio, we recommend installing the latest preview of Visual Studio 2019 16.6. For this preview, you should still install the template from the command-line as described above to ensure that the Blazor WebAssembly template shows up correctly in Visual Studio and on the command-line.

That’s it! You can find additional docs and samples on https://blazor.net.

Upgrade an existing project

To upgrade an existing Blazor WebAssembly app from 3.2.0 Preview 5 to the 3.2.0 Release Candidate:

  • Update all Microsoft.AspNetCore.Components.WebAssembly.* package references to version 3.2.0-rc1.20223.4.
  • Update any Microsoft.AspNetCore.Components.WebAssembly.Runtime package references to version 3.2.0-rc1.20222.2 (having a reference to this package is uncommon).
  • Update all System.Net.Http.Json package references to 3.2.0-rc1.20217.1

You’re all set!

Custom boot resource loading

When a Blazor WebAssembly app loads in the browser, it first downloads all of the required boot resources from the server, including the .NET runtime, the bootstrapping JavaScript code, locale specific data, and the .NET assemblies that make up the app. You can now customize how these boot resources are loading using the loadBootResource API. You can use this API to make any needed modifications to how these specific outbound requests are constructed. For example, you might want to load some of the resources from an external CDN. Although Microsoft does not currently host the Blazor framework files on any specific public Content Delivery Network (CDN), you are free to add them to your own CDN if you wish. For example, if you have published the _framework\wasm files to a CDN within the base URL https://mycdn.example.com/blazorwebassembly/3.2.0-rc1/, then you could configure your application to use those resources as follows:

<script src="_framework/blazor.webassembly.js" autostart="false"></script>
<script>
    Blazor.start({
        loadBootResource: function (type, name, defaultUri, integrity) {
            console.log(`Will load '${type}' with name '${name}' from URI '${defaultUri}' and integrity '${integrity}'`);

            switch (type) {
                case 'dotnetjs':
                case 'dotnetwasm':
                case 'timezonedata':
                    return `https://mycdn.external.cdn/blazorwebassembly/3.2.0-rc1/${name}`;
            }

            // Other types are 'assembly' and 'pdb' but you probably wouldn't want to fetch those from a CDN as they would be custom-linked for your app
            // By returning undefined for other types, we let the framework use its normal strategy for those types
        }
    });
</script>

If you want to customize more than just the URLs that are being used, then your loadBootResource function can call fetch directly and return the result. For example:

<script src="_framework/blazor.webassembly.js" autostart="false"></script>
<script>
    Blazor.start({
        loadBootResource: function (type, name, defaultUri, integrity) {
            // Adds a custom HTTP header to the outbound requests
            // To retain the default integrity checking behavior, it's necessary to pass through the 'integrity' parameter
            return fetch(defaultUri, { 
                cache: 'no-cache',
                integrity: integrity,
                headers: { 'MyCustomHeader': 'My custom value' }
            });
        }
    });
</script>

API reference docs

API reference docs for the Blazor WebAssembly namespaces (Microsoft.AspNetCore.Components.WebAssembly.*) are now available in the .NET API browser as part of the ASP.NET Core 3.1 API docs.

Known issues

  • When publishing a ASP.NET Core hosted Blazor WebAssembly app using Visual Studio, satellite assemblies from the client application do not get copied to the publish folder.

    This issue will be addressed in the upcoming release. To workaround this issue, publish the app from the command line using dotnet publish.

Feedback

This is our last planned preview release of Blazor WebAssembly 3.2! We need your help to make sure that we’ve addressed any remaining blocking issues for the upcoming release. Please give it a try and let us know what you think by filing issues on GitHub.

We hope you enjoy the Blazor WebAssembly Release Candidate and thanks for trying out Blazor!

91 comments

Discussion is closed. Login to edit/delete existing comments.

  • Vincent Anzelone 0

    Will there be any support for re-compilation of razor pages (components) so that when I make a change I can just CTRL+SHIFT+R and continue or do we need to stop the debug process, make the change, restart the app? BTW, I’m loving the latest version. I have a Razor Library that I’m building all of my UI in off to the side to hopefully reuse between future project. Super exciting stuff.

    • Rogier van der Hee 0

      Agree! I also really like Razor Class libraries to separate UI in re-usable building blocks. Hot Reload is mentioned here, please vote so it gets higher priority: https://github.com/dotnet/aspnetcore/issues/18486

      • Daniel RothMicrosoft employee 0

        Hi Vincent. Currently you do need to rebuild the Blazor WebAssembly app and rehost it for changes to get picked up. If you’re running with the debugger attached, you’ll also need to restart the debugging session. We know that improving the development workflow to make it faster and more iterative is important, and we plan to improve the workflow for .NET 5.

  • Douglas Simao 0

    [Silly question]

    As the default web assembly app with authentication and hosted asp.net core creates 1 client project and 1 server project where the server starts the client and all the security and web API etc.

    Is there any reason or recommendation about why it should be like that? I mean would be a problem if we extra the hosted, web API, and the client in 3 distinct applications where we could host in different places?

    • Daniel RothMicrosoft employee 0

      Hi Douglas. The current structure of the default template does simplify a few things:

      • The client knows how to find and download the authentication configuration metadata from the server so you don’t have to manually configure
      • The web APIs are hosted on the same origin as the client app so you don’t have to worry about setting up CORS

      There’s nothing that technically prevents you from splitting the server project apart. It just means you’ll need to do a bit more manual configuration.

      • Wil Wilder Apaza Bustamante 0

        this comment has been deleted.

      • Douglas Simao 0

        Thank you for the explanation, was just a bit confused in the beginning as most of the videos from MS was about how flexible it was, that we could even host it in Azure blob storage as it was only static files etc, then when I saw all in the same project we can’t do those things anymore so was before it was previews was wondering if anything had changed, but for security e other reasons I think most of devs will prefer split it so we could host things in different servers, etc. but thanks for the explanation that is a really good product!

  • Mark Lawrence 0

    Hi Daniel,

    Is there any reason we shouldn’t use the latest version of System.Net.Http.Json? (v5.0.0-preview.3.20214.6)?

    Thanks
    Mark

    • Daniel RothMicrosoft employee 0

      Hi Mark. System.Net.Http.Json version 3.2 is scheduled to ship at the same time as Blazor WebAssembly 3.2, so if you want to use a stable and supported version then we recommend sticking with 3.2. The 5.0 previews of System.Net.Http.Json should also work, but they will be in preview until the end of this year.

  • Mark Lawrence 0

    Daniel,

    I’m wondering if the team is planning any support for Visual Studio 2019’s “Quick Actions and Refactoring” tools? It would be great if the code in the Razor files could be integrated with this, so that we get the same refactoring support we have for straight C# code in the @code sections of our razor components.

    Cheers
    Mark

    • Daniel RothMicrosoft employee 0

      Hi Mark. Yes, we are actively working on support for code actions and refactorings in Razor, as well as a bunch of other improvements.. This work is part of a major re-architecture of the Razor tooling that is in progress to move to an LSP based model. We expect to start sharing the new Razor tooling later this year.

      • Mark Lawrence 0

        Thanks for the update Daniel, that’s great news! Keep up the good work, and I hope you and all the team are staying safe!

  • Taylor Watson 0

    Hi Daniel,

    With these new startup API’s, how do you host 2 blazor wasm apps in one wasm hosted -au project?

    I mapped different apps to their /appurl in the server app and the project runs perfectly with 1 at the new url. However, when I add a second and configure it, I can’t get it to run because the static files are compiling in the same place. I tried setting content root differently but that seemed to have no effect.

    Any advice would be wonderful. Thank you in advance!!!

    /usr/local/share/dotnet/sdk/3.1.201/Sdks/Microsoft.NET.Sdk.Razor/build/netstandard2.0/Microsoft.NET.Sdk.Razor.StaticWebAssets.targets(191,5): error : Conflicting assets with the same path ‘/appsettings.Development.json’ for content root paths ‘/Users/user/Developer/WasmHosted/App1/wwwroot/appsettings.Development.json’ and ‘/Users/user/Developer/WasmHosted/App2/wwwroot/appsettings.Development.json’.

    • Daniel RothMicrosoft employee 0

      Hi Taylor. I’d be interested to understand more about why you want to do this. Could you please open a GitHub issue with your question and some more details about your scenario? https://github.com/dotnet/aspnetcore/issues. We’ll do our best to help you out!

  • Eduardo Gómez Dorado 0

    Hi great job with blazor webassembly.
    I have a question because i don’t find documentation about this.

    I doing a Blazor Webassembly Hosted server role based authorization. In some part of my code i have AuthorizeView Roles=”Manager, Super Admin” for handle ui visibility. All is fine if the userinfo endpoint return only one role as string. But if the user have more than once role and user info return an array of string the authorization fails.

    any help i appreciate

  • Karl Cinnamond 0

    Super excited by the RC, our organisation is looking at mandating a new Development platform and we’re seriously watching Blazor Client for that – it always gives great confidence when you see a company using their own tech, has Microsoft any plans to develop in or port any of their products to Blazor?

    • Daniel Pach 0

      My thoughts exactly, I made the same suggestion several months ago. One problem that I currently see with the adoption of Blazor is the lack of comprehensive third party components needed for the development of an enterprise application. I’ve looked at what DevExpress has to offer but their suite seems to cover only basic components needed for a simple demo.

      Keep up the great work, very excited that Blazor WebAssembly is close to be production ready!

      • Daniel RothMicrosoft employee 0

        There are various teams at Microsoft using Blazor for internal projects. It is also used for https://try.dot.net.

        Check out https://aka.ms/awesomeblazor if you’re looking for Blazor components and libraries.

  • Joaquim Ferreira 0

    @Daniel Very good work. Now that will not have breaking changes planned I will finish my first app. Hope to share soon 🙂

  • thomas ebner 0

    Hi,
    is there an option/solution to control the appsettings environment and pathbase at build time?

    Current Problem:
    – I have an azure storage account to deploy my SPA ($web container in the storage account)
    – I have 4 environments for every SPA (development, test, staging, production)
    – Every environment has a own subfolder (myspa-dev, myspa-test, myspa-staging, myspa)
    – I want to build a ‘static artifact’ for every environment and copy the necessary files in the specified folder
    – A command like

    dotnet build --environment development --pathbase myspa-dev

    would be very helpful

    • Daniel RothMicrosoft employee 0

      Hi Thomas. Thank you for this suggestion! Could you please file this suggestion as a GitHub issue so that it can be triaged and prioritized appropriately?: https://github.com/dotnet/aspnetcore/issues. Thanks again!

  • Muhammad Ibrahiem Abdelhameed 0

    When will the stable version be announced?
    I have been worked with the Blazer server more than 3 months and build web applications, but there is a slow performance in UI. Is wasm solve this issue?

    • Daniel RothMicrosoft employee 0

      Hi Muhammad. We expect to ship a stable version later this month.

      • Muhammad Ibrahiem Abdelhameed 0

        Thanks, Can you answer the second question about the performance of UI in wasm, please?

        • Daniel RothMicrosoft employee 0

          UI performance problems could be due to a variety of issues. To figure out exactly what problem your hitting and why we’d need more details about how your app is written the specific problem you are seeing. Feel free to open an issue on GitHub and we’ll do our best to help you out: https://github.com/dotnet/aspnetcore/issues.

Feedback usabilla icon