Blazor WebAssembly 3.2.0 now available

Daniel Roth

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.

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 within three months 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.

164 comments

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

  • Sagar Moharil 0

    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.

  • Daniel P 0

    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 RothMicrosoft employee 0

      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

      • Daniel P 0

        Thank you for your answer. I ended up publishing the app as a Web App and the deployment process was a much better experience. The size of all downloaded files is now 6.5 MB which is a lot better but still too much. But that is something that will need to be addressed by the components vendor… I see that lazy loading is on the roadmap, when do you think it will be available in preview? OK, I know that you and the team just really needs a short break right now.

        • Daniel RothMicrosoft employee 0

          Hmm, yeah, that still seems surprisingly large. Again, make sure you published a release build, and also make sure you’re taking advantage of Brotli compression, ideally the precompressed files produced on build.

        • Daniel RothMicrosoft employee 0

          We’re looking at adding lazy loading for .NET 5. Exact preview when it will show up is still to be determined.

      • Raphael Borrelli 0

        Congratulations for this great work. Blazor is exactly what I’ve been waiting for to get into web development.

        Thanks for this answer, I had the same need as Daniel, I couldn’t see how to use the compressed files from a static project hosted on Github Pages. Steve’s code works perfectly with a published project.

  • Charlie Pfeifer 0

    Congrats Daniel.
    I’ve been following your Blazor posts from day 1.
    Thank you for the detailed update steps with each release.

  • 哲 å¼  0

    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!

  • Henrik Larsson 0

    Great job guys, I’ll be fiddling with this today. Keep up the good work! <3

  • Prem Shah 0

    What about Blazor Hybrid, Native and Mobile ?

    • Daniel RothMicrosoft employee 0

      Hi Prem. For Native, be sure to check out the experimental Mobile Blazor Bindings if you haven’t already. For Hybrid, nothing new to share at this point, but it is a scenario that we are still investigating.

  • Vlad Olaru 0

    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 RothMicrosoft employee 0

      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.

  • Howard Richards 0

    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

    • Daniel RothMicrosoft employee 0

      Hi Howard. We recommend that folks install the latest .NET Core SDK (3.1.300) to get the latest Blazor WebAssembly template. If you install the latest SDK, then separately installing the Blazor WebAssembly template shouldn’t be required. Let us know if you’re seeing otherwise!

      • Howard Richards 0

        Thanks – I’d missed the point increase in the SDK. Have now fixed it.

  • Mark Baldwin 0

    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 RothMicrosoft employee 0

      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?

      • Mark Baldwin 0

        dotnet –version returned “5.0.100-alpha1-015463”

        after uninstalling that, version is now 3.1.300 and I can create a successful project

        Thanks

        • Daniel RothMicrosoft employee 0

          Ah, of course, we haven’t added Blazor WebAssembly to .NET 5 yet and it sounds like there are issues using Blazor WebAssembly with .NET 5 that we’ll need to sort out. Thanks for trying the .NET 5 previews though!

  • Dhiogo Acioli 0

    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.

    • Dhiogo Acioli 0
       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.

      • Daniel RothMicrosoft employee 0

        Hi Dhiogo. Which browser and browser version are you using?

        • Dhiogo Acioli 0

          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)

        • Dhiogo Acioli 0

          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 RothMicrosoft employee 0

            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

Feedback usabilla icon