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
Blazor WebAssembly is amazing! Well done. The only thing that stop me to use is that it does not look SEO friendly.
Is there a way solve this problem ?
Hi Krasen. You can choose to prerender the app from the server statically to make it more SEO friendly. We don’t set this up by default, because it means that your components now need to be runnable both on the server and in the browser, but it is possible to do. See https://docs.microsoft.com/aspnet/core/blazor/integrate-components#render-noninteractive-components.
Congrats!. This is the day the internet takes one great leap forward.
Thank you! We hope you enjoy working with Blazor!
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?
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.
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.
Hi Steven. There is some in progress work to add AoT compilation support to Blazor WebAssembly, but it’s not in an easily consumable form and it will likely go through some significant revisions in the .NET 5 & 6 wave. You can find some info on what’s currently available here: https://github.com/mono/mono/blob/master/sdks/wasm/README.md#aot-support.
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.
Hi Guru.
DateTime.Nowshould reflect the local timezone of the browser. If it isn’t, that may mean the timezone data wasn’t loaded correctly. Could you please check that dotnet.timezones.dat is being download correct to the browser? Did you possibly turn off timezones support as described here? If everything seems setup correctly but timezones are still not working please open a GitHub issue and we’ll take a look: https://github.com/dotnet/aspnetcore/issues.Hi Daniel,
Sorry to hijack the thread but I’m experiencing the same issue as Guru. I followed your advice to no avail so I posted an issue on GitHub: https://github.com/dotnet/aspnetcore/issues/22544
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!
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.
Good day, Daniel!
Thank you for explanation concerning strategy (DOM, JS-interop., binary dependency on client-side)!
I still do have questions about strategy of Blazor. It could be interesting 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 least theoretically to be implemented for development of Web-application (in browser or standalone) together with some another markup language (not HTML)?
Thanks!
The command is (to create former BLAZORHOSTED-sample):
dotnet new blazorwasm –hosted -o YourProjectName
Source:
https://timheuer.com/blog/deploy-blazor-webassembly-applications-on-azure-using-github-actions-wasm/
Good day, Daniel!
I’ve composed my binary independent client-server sample (quasi-independent).
And it seems I can publish them, and even combine: C-Debug vs. S-Release or C-Release vs. S-Debug.
But, could you help me once again with your answer?
What may be supposed cause of following problem:
All looks fine while ASPNETCORE_ENVIRONMENT=Development.
1) When ASPNETCORE_ENVIRONMENT=DebugExpose (my special configuration) all includable “*.js” causes error: “Failed to load resource: net::ERR_CONNECTION_REFUSED”;
2) When ASPNETCORE_ENVIRONMENT=
The errors is “Failed to load resource: the server responded with a status of 404” for all includables (even for blazor.webassembly.js).
Errors above are from my Client-Server sample.
As for your official “blazorwasm –hosted”-sample, it seems it doesn’t work outside Visual Studio when ASPNETCORE_ENVIRONMENT != Development (at least on my PC), in simple standalone console: “HTTP 404 error That’s odd… Microsoft Edge can’t find this page”. (CD = Server dir.; ExePath = D:\Blazor\Server\bin\Release\netcoreapp3.1\Blazor.Server.exe) Why?
May be you met with this or similar situation???
(By the way, how we may clean old templates in SDK without system recovery? May be to drop some folder, … or some command exists?)
Thanks!
Yes, this is a direction we are exploring with the Mobile Blazor Bindings, which uses Razor syntax to build native cross-platform UI. We are working on hybrid web model as well, which we hope to share soon. We hope to apply the learnings from these experiments to .NET MAUI in the .NET 6 timeframe. We don’t have any plans to support XAML with Blazor.
Blazor is primarily focused on web development using Razor syntax. Typically in Blazor you use Razor components to render HTML/CSS, but the renderer can be extended to support other markup, which is how the Mobile Blazor Bindings works. Other frameworks from the community have also built on the same runtime used by Blazor to support alternative app models: Uno, OpenSilver, Ooui, FrogUI.
Is Blazor WebAssembly 3.2.0 still using mono?
Hi Shawn. Blazor WebAssembly is based on a .NET IL interpreter implemented in WebAssembly. The base class libraries are currently from Mono, but we are switching to the .NET Core implementations for .NET 5.
Will there be substantial performance improvements when it’s switched to .NET 5? I’m using BigInteger in my application, but finding the performance problematic. In my specific case the BigInteger.ModPow method is taking 337x longer in blazor wasm then in a .NET Core console app.
I submitted an issue to the mono team
https://github.com/mono/mono/issues/19908
But it would be nice to have some assurance that the performance will be much better once blazor goes live with .NET 5
Thanks!
Good day, Daniel!
In continuation regarding to ASPNETCORE_ENVIRONMENT != Development:
My errors now I see are: “Failed to load resource: the server responded with a status of 404 ()” —
for “https://localhost:5001/_framework/blazor.boot.json” and for all “*.js” (in my client-server sample).
But, official examples have work (I was thinking). Standalone console test (AspNetServer+Blazor) was working earlier in different variations and modes: Development / Production (with empty env.var.) / other. From now any environment which is not marked as Development does not succeed when you run the sample in standalone console (not from Visual Studio). The error at startup is the same: HTTP 404 page not found. (I do have such result on two different computers.) Whereas https://localhost:5001/WeatherForecast returns 200 (+JSON).
MAYBE YOU ARE KNOWING ABOUT THIS STRANGE EFFECT (COULD YOU HINT SOMETHING)?
Thanks!
Hi Sergei. This sounds like the same issue as https://github.com/dotnet/aspnetcore/issues/21992. I suspect the handling of the client static assets in a Blazor WebAssembly app is tied specifically to the Development environment, but we’ll follow up on the GitHub issue and then figure out the correct course of action.
Good day, Daniel!
Thank you for this link.
Indeed, Visual Studio simulates development environment unconditionally when it starts server process: Properties/launchSettings.json/”profiles”/”Blazor.Server”/”environmentVariables“/”ASPNETCORE_ENVIRONMENT”: “Development“.
(All is exacly as they say.)
But, “.StaticWebAssets.xml” is new form of server-to-client referencing.
(The previous was “.blazor.config”.)
Thanks!
=== July 15, 2020: ===
Client-Server WASM-application in C#, TypeScript and T-SQL
Good day, Daniel!
Good day for everyone!
I would like to represent my experimental work which is related to Blazor-WASM (and not only).
The name of the work is Client-Server.WEB (idea).
SUPPORTING RESOURCE (MY DOMAIN)
CSWEB: https://handicraft.remelias.ru/csweb/client_server_web.html (the work)
Handicraft-SDK: https://handicraft.remelias.ru/sdk/handicraft_sdk.html (satellite project/product)
Handicraft-CODE public pages: https://handicraft.remelias.ru/ (HANDICRAFT subdomain)
Indroductory article: https://blog-hc.remelias.ru/ (BLOG-HC subdomain)
Parent domain: https://remelias.ru/ (site root)
IDEA OF CLIENT-SERVER.WEB
The idea is to create reusable skeleton for Web-application simultaneously on both client and server sides, including also some support at database level. This idea also may be named simply as Web-application engine. Such an engine is build in several languages which are normally the same that are used in user application code. (Let us shortly reference to this idea as CSWEB.)
BOOK-REGISTRY APPLICATION
I would like to represent a little but able-to-work sample program which is based on above mentioned app.skeleton — BookRegistry application in Blazor-WASM, with presence of library-level code and user code in three languages: C#, TypeScript and Transact SQL.
ARTICLE
This work was performed some time before WebAssembly 3.2.0 Release.
See my indroductory article: https://blog-hc.remelias.ru/ (BLOG-HC subdomain).
Good day, Daniel!
It is possible to use following trick for the sake of development static assets (while they do like so dev.environment):
public static void Main(string[] args) { // Saving original name of ASP-environment: string environmentName = Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT") ?? ""; Console.WriteLine( "ASPNETCORE_ENVIRONMENT = {0}", environmentName ); // Simulating development environment: Environment.SetEnvironmentVariable( "ASPNETCORE_ENVIRONMENT", "Development" ); CreateHostBuilder( args ).Build().Run(); }I wonder, why don’t you still use “Nullable: enable” in official “.csproj”?
Hi Daniel, great that you managed to integrate localisation and i18n into the first stable release of Blazor! But something strikes me about the actual situation: i18n is based on resx files and those are only editable in Visual Studio and they only compile in Visual Studio. Thus, i18n is not supported in vs code. But vs code is such a charming IDE. I would love to know what are your plans for Blazor: are we bound to Visual Studio when it comes to develop globalized applications or do you pursue any plan to port i18n to vs code, too?
I know it is possible to debug C# code on running on the browser on Visual Studio since Preview 2 or 3, but is it possible to debug JavaScript code the same way? My break points are only being hit on Visual Studio if I first set them on the browser. That doesn’t happen with C# code.