Blazor WebAssembly 3.2.0 now available
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!
To maximize your Blazor productivity, be sure to install a supported version of Visual Studio for your platform of choice:
- Windows: Visual Studio 2019 16.6
- macOS: Visual Studio for Mac 8.6
- Windows/macOS/Linux: Visual Studio Code with the C# extension
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:
- Leverage the productivity of C# and strong runtime typing.
- Build on the stable and mature .NET ecosystem.
- Easily reuse code and existing .NET Standard libraries on the client and server.
- Shared component model with Blazor Server apps.
- Deploy your app as a standalone static site, or hosted with ASP.NET Core.
- Build Progressive Web Apps (PWA) with offline capabilities and native OS integration.
- Built-in support for authentication.
- Integrated globalization & localization support.
- Environment-based configuration.
- IL trimming and build-time precompression.
- Full stack debugging.
- Great tooling with Visual Studio, Visual Studio for Mac, and Visual Studio Code.
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.
Light
Dark
164 comments
I was hoping for a brief mention about how much WebAssembly reduces download size and improves speed over polyfill.
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?
Hi Dhiogo. I assume you’re referring to calling a web API through some sort .NET code that handles deserializing the response. Is the response JSON? Are you using System.Net.Http.Json to make the API call? If you try to make the same API call from a console app does it work?
Hi Daniel,
Yes, I am using the standard components indicated in the blazor template.
Yes, I tested it with a console project and it works normal. It only gives an error when I remove the constructor (which is expected).
note: I already have another constructor in the class with parameters for other purposes.
public string Id {get; protected set; }
In the attribute also does not work
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?
Hi Endy. We do have on our backlog an issue for adding support for hash based routing: https://github.com/dotnet/aspnetcore/issues/6175. Give the issue a thumbs up if this is something you’re interested in!
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.
Hi Ramzi.
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.
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.
“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?
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.
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
Hi Bruno. Please submit a Visual Studio Feedback issue on this and we’ll investigate.
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!
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 buildon 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.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!
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!
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
Hi Nicky. It looks like we are tracking this enhancement request on GitHub: https://github.com/dotnet/aspnetcore/issues/22220. Please give the issue a +1 if it aligns with your request.
Blazor Webassembly not working on Safari IOS 13.5.
Showing the message “This browser does not support WebAssembly.” on console.
Hi Rafael. Blazor WebAssembly should work with Safari on iOS. Could you please open a GitHub issue for this so that we can investigate? https://github.com/dotnet/aspnetcore/issues.
Hi Daniel,
Is server side pre rendering still supported? I wanted to prerender the start page for SEO reasons.
I have tried the following article but it is erroring out with 3.2.0 release – https://chrissainty.com/prerendering-a-client-side-blazor-application/
and the code – https://github.com/chrissainty/ClientSideBlazorPrerendering
First of all I could no longer find Microsoft.AspNetCore.Blazor.Server nuget package in nuget. Is there a new version of it? So i was sticking to the preview version like below
But when i run the server web application, I get the following exception.
crit: Microsoft.AspNetCore.Hosting.Diagnostics[6]
Application startup exception
System.IO.FileNotFoundException: Could not find file ‘c:\Users\KSundar\source\repos\WebApplication4\bin\Debug\netcoreapp3.1\BlazorApp1.blazor.config’.
File name: ‘c:\Users\KSundar\source\repos\WebApplication4\bin\Debug\netcoreapp3.1\BlazorApp1.blazor.config’
at System.IO.FileStream.ValidateFileHandle(SafeFileHandle fileHandle)
at System.IO.FileStream.CreateFileOpenHandle(FileMode mode, FileShare share, FileOptions options)
at System.IO.FileStream..ctor(String path, FileMode mode, FileAccess access, FileShare share, Int32 bufferSize, FileOptions options)
at System.IO.StreamReader.ValidateArgsAndOpenPath(String path, Encoding encoding, Int32 bufferSize)
at System.IO.StreamReader..ctor(String path, Encoding encoding)
at System.IO.File.ReadLines(String path)
at Microsoft.AspNetCore.Blazor.Server.BlazorConfig..ctor(String assemblyPath)
at Microsoft.AspNetCore.Blazor.Server.BlazorConfig.Read(String assemblyPath)
at Microsoft.AspNetCore.Builder.BlazorHostingApplicationBuilderExtensions.UseClientSideBlazorFiles(IApplicationBuilder app, String clientAssemblyFilePath)
at Microsoft.AspNetCore.Builder.BlazorHostingApplicationBuilderExtensions.UseClientSideBlazorFiles[TClientApp](IApplicationBuilder app)
at WebApplication4.Startup.Configure(IApplicationBuilder app, IWebHostEnvironment env) in c:\Users\KSundar\source\repos\WebApplication4\Startup.cs:line 50
at System.RuntimeMethodHandle.InvokeMethod(Object target, Object[] arguments, Signature sig, Boolean constructor, Boolean wrapExceptions)
at System.Reflection.RuntimeMethodInfo.Invoke(Object obj, BindingFlags invokeAttr, Binder binder, Object[] parameters, CultureInfo culture)
at Microsoft.AspNetCore.Hosting.ConfigureBuilder.Invoke(Object instance, IApplicationBuilder builder)
at Microsoft.AspNetCore.Hosting.ConfigureBuilder.<>c__DisplayClass4_0.b__0(IApplicationBuilder builder)
at Microsoft.AspNetCore.Hosting.GenericWebHostBuilder.<>c__DisplayClass13_0.b__2(IApplicationBuilder app)
at Microsoft.AspNetCore.Mvc.Filters.MiddlewareFilterBuilderStartupFilter.<>c__DisplayClass0_0.g__MiddlewareFilterBuilder|0(IApplicationBuilder builder)
at Microsoft.AspNetCore.HostFilteringStartupFilter.<>c__DisplayClass0_0.b__0(IApplicationBuilder app)
at Microsoft.AspNetCore.Hosting.GenericWebHostService.StartAsync(CancellationToken cancellationToken)
Is there an article of github that showcases prerendering with the latest release bits? Appreciate your help.
Thanks,
Kumaran