Blazor now in official preview!

Daniel Roth

Daniel

With this newest Blazor release we’re pleased to announce that Blazor is now in official preview! Blazor is no longer experimental and we are committing to ship it as a supported web UI framework including support for running client-side in the browser on WebAssembly.

A little over a year ago we started the Blazor experimental project with the goal of building a client web UI framework based on .NET and WebAssembly. At the time Blazor was little more than a prototype and there were lots of open questions about the viability of running .NET in the browser. Since then we’ve shipped nine experimental Blazor releases addressing a variety of concerns including component model, data binding, event handling, routing, layouts, app size, hosting models, debugging, and tooling. We’re now at the point where we think Blazor is ready to take its next step.

Blazor icon

Simplifying the naming and versioning

For a while, we’ve used the terminology Razor Components in some cases, and Blazor in other cases. This has proven to be confusing, so following a lot of community feedback, we’ve decided to drop the name ASP.NET Core Razor Components, and return to the name Server-side Blazor instead.

This emphasizes that Blazor is a single client app model with multiple hosting models:

  • Server-side Blazor runs on the server via SignalR
  • Client-side Blazor runs client-side on WebAssembly

… but either way, it’s the same programming model. The same Blazor components can be hosted in both environments.

Also, since Blazor is now part of .NET Core, the client-side Blazor package versions now align with the .NET Core 3.0 versions. For example, the version number of all the preview packages we are shipping today is 3.0.0-preview4-19216-03. We no longer use separate 0.x version numbers for client-side Blazor packages.

What will ship when

  • Server-side Blazor will ship as part of .NET Core 3.0. This was already announced last October.
  • Client-side Blazor won’t ship as part of the initial .NET Core 3.0 release, but we are now announcing it is committed to ship as part of a future .NET Core release (and hence is no longer an “experiment”).

With each preview release of .NET Core 3.0, we will continue to ship preview releases of both server and client-side Blazor.

Today’s preview release

New features in this preview release:

  • Templates updated to use the .razor file extension
  • _Imports.razor
  • Scope components with @using
  • New component item template
  • New Blazor icons
  • Blazor support in Visual Studio Code

Check out the ASP.NET Core 3.0 Preview 4 announcement for details on these improvements. See also the Blazor release notes for additional details on this preview release.

Get the Blazor preview

To get started with the Blazor preview install the following:

  1. .NET Core 3.0 Preview 4 SDK (3.0.100-preview4-011223)
  2. The Blazor templates on the command-line:

    dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview4-19216-03
    
  3. Visual Studio 2019 Preview with the ASP.NET and web development workload selected as well as the latest Blazor extension from the Visual Studio Marketplace, or Visual Studio Code with the latest C# extension (now with Blazor support!).

You can find getting started instructions, docs, and tutorials for Blazor at our new Blazor home page at https://blazor.net.

Blazor home page

Upgrade to the Blazor preview:

To upgrade your existing Blazor apps to the new Blazor preview first make sure you’ve installed the prerequisites listed above then follow these steps:

  • Update all Microsoft.AspNetCore.Blazor.* package references to 3.0.0-preview4-19216-03.
  • Remove any package reference to Microsoft.AspNetCore.Components.Server.
  • Remove any DotNetCliToolReference to Microsoft.AspNetCore.Blazor.Cli and replace with a package reference to Microsoft.AspNetCore.Blazor.DevServer.
  • In client Blazor projects remove the <RunCommand>dotnet</RunCommand> and <RunArguments>blazor serve</RunArguments> properties.
  • In client Blazor projects add the <RazorLangVersion>3.0</RazorLangVersion> property.
  • Rename all _ViewImports.cshtml files to _Imports.razor.
  • Rename all remaining .cshtml files to .razor.
  • Rename components.webassembly.js to blazor.webassembly.js
  • Remove any use of the Microsoft.AspNetCore.Components.Services namespace and replace with Microsoft.AspNetCore.Components as required.
  • Update server projects to use endpoint routing:
// Replace this:
app.UseMvc(routes =>
{
    routes.MapRoute(name: "default", template: "{controller}/{action}/{id?}");
});

// With this:
app.UseRouting();

app.UseEndpoints(routes =>
{
    routes.MapDefaultControllerRoute();
});
  • Run dotnet clean on the solution to clear out old Razor declarations.

Blazor community page is now Awesome Blazor

As part of updating the Blazor site, we’ve decided to retire the Blazor community page and instead direct folks to the community driven Awesome Blazor site. Thank you Adrien Torris for maintaining this truly “awesome” list of Blazor resources!

Try out preview Blazor UI offerings from Telerik, DevExpress, and Syncfusion

Blazor benefits from an active and supportive community that has contributed all sorts of sample apps, components, and libraries to the Blazor ecosystem. Recently popular component vendors like Telerik, DevExpress, and Syncfusion have joined in the fun and shipped previews of Blazor UI components. We encourage you to give these Blazor UI offerings a try and let them know what you think.

Give feedback

We hope you enjoy this latest preview release of Blazor. As with previous releases, your feedback is important to us. If you run into issues or have questions while trying out Blazor, file issues on GitHub. You can also chat with us and the Blazor community on Gitter if you get stuck or to share how Blazor is working for you. After you’ve tried out Blazor for a while please let us know what you think by taking our in-product survey. Click the survey link shown on the app home page when running one of the Blazor project templates:

Blazor survey

Thanks for trying out Blazor!

Daniel Roth
Daniel Roth

Principal Program Manager, ASP.NET

Follow Daniel   

69 Comments
Bob Collins
Bob Collins 2019-04-18 16:10:18
Looks very promising 
Avatar
Bishnu Rawal 2019-04-18 18:08:57
Thanks team for the hard work. News of the day for me.
Troy Robinson
Troy Robinson 2019-04-18 18:36:57
Glad to hear this, was worried that the news would be that the project was scrapped!  Awesome - can't wait for JS to slowly go away.
Avatar
Warren R 2019-04-18 19:11:11
Thank you for committing to this, really looking forward to coming back to C# for web development in the years to come.
Jiping
Jiping 2019-04-18 21:03:41
Awesome Blazor awesome! Is there a rich starter kit, like those Bootstrap Admin Template, it will boost the community.
Avatar
anonymous 2019-04-18 21:15:20

This comment has been deleted.

Avatar
Baran Ozdemir 2019-04-18 21:53:52
Great !!!! Congratulations, amazing work. 
Avatar
shiva prasanth 2019-04-18 22:06:03
personally i feel like this is revolution, same like when nodejs introduced which lets us run javascript in both server and browser. there are some projects like brython(runs python(syntax) on browser) but it won't leverage webassembly. blazor using webassembly really boosts performance IMO. very very cool.
Ben Hayat
Ben Hayat 2019-04-18 22:28:58

So Dan, what wasaccomplished or resolved in this preview that kicked Blazor out of experimental into offical product?

Thanks!
..Ben

Avatar
锦 王 2019-04-18 23:43:56
Thanks for your guys great jobs! I have one question: where is blazor library template in visual studio? or shoud i use blazorlib cli to generate blazor library project? or just use razor library project?
Avatar
MATTIAS ENGMAN 2019-04-19 01:46:29
Wow, very nice!!! One of my best moments this year.:) You’re doing a good job 👌
Avatar
Howard Richards 2019-04-19 02:16:33
Does this mean we have a go-live licence for Blazor server-side apps since it’s on .Net core 3
Avatar
David Walker 2019-04-19 02:25:29
Is it possible to include both server side and client side balzor in a single project?
Adrian Cockburn
Adrian Cockburn 2019-04-19 02:28:50
Great news! You should add that services.AddRazorComponents need to be changed to services.AddServerSideBlazor for server side startup.cs.
Ben Hayat
Ben Hayat 2019-04-19 07:44:32

Hi Dan;

In the last .Net standup session, when you asked steve about the the direction of Auth, he said he is planning to piggypack on the existing [old] Auth system where we have to store user's data/password in our database and be responsible for it. I'm sure many hackers were pleased to hear that, as lots opportunities will open up.

That was disturbing to hear as security is very important, and it is still being neglected with the lastest technology from MSFT.

My humble request is to at least give us an easy and clean way to use Azure B2C in both types of hostings, where we can use B2C from server side rendered code and how to deal with tokens and the client side Blazor to obtain tokens, send it to backend Web API.

We either need to have a built in system in Blazor or the least a full guideline/best practices how to use Blazor with B2C.

Thank you for your hard work Dan;
..Ben

Ben Hayat
Ben Hayat 2019-04-19 08:09:03

Hi Dan;

Are we still missing tooling in the VS19 to create a Blazor page (xys.razor)? The included template to create "Razor" page seems to be creating the ASP.Net razor page and not for Blazor.
I looked at the roadmap for Preview 6 and didn't see any mention of this tooling.
Thanks!
..Ben

Avatar
Anthony Spruyt 2019-04-19 09:46:07
Exciting times. Congratulations and looking forward to using Blazor.
Avatar
Raffaello Damgaard 2019-04-19 12:17:47
Awesome!
Avatar
Sarathlal Saseendran 2019-04-19 13:24:23
Hi, Thanks for the great information. How can we use HttpClient in this new Blazor? Any sample code available?
Avatar
Jeremy Knaggs 2019-04-19 15:19:34
This is seriously fantastic. I'm really thinking this type of tech will be what brings about the next era of web development. Keep up the fantastic work and a million thanks to entire Blazor team!
Avatar
新民 黄 2019-04-23 02:30:47
Why not give Server-side Blazor a brand new and unique name, such as Blazerver (Blazor + Server), this makes it short and recognizable, and the new name mostly helps when developers use search engine to solve problems.  And Client-side Blazor can named Blazent also. :)
Avatar
Danish Jafri 2019-04-23 07:58:41
Thank you for all the effort! This is going to be an awesome adventure.
Avatar
Anderson Moscarelli 2019-04-23 18:28:07
I have a client server blazor project and these properties <RunCommand>dotnet</RunCommand> and <RunArguments>blazor serve</RunArguments> , <RazorLangVersion>3.0</RazorLangVersion> are not present in anyware and i have no clue where to put <RazorLangVersion>3.0</RazorLangVersion>  . Can you advice?
Avatar
remi bourgarel 2019-04-24 12:38:46
If you want to rename all your project file, user the following powershell Get-ChildItem -Path . -Filter *.cshtml -Recurse | Rename-Item -NewName{[System.IO.Path]::ChangeExtension($_.Name, ".razor")}
Avatar
Ross Jempson 2019-04-25 17:50:15
This sounds like Silverlight without a plugin?  When strategy changes, and resources have been prioritised for other things, and the project is retired by Microsoft, is it likely to become a community open source project.  In other words, if someone was to invest time learning this framework and build production software upon it, is there any chance that will backfire?
Avatar
Evaldas Jocys 2019-04-26 04:03:41
Good effort. Problem is that downloading NuGet packages and providing examples which can’t simply run in the browser will result in many developers just ignoring this technology. Running C# in web browser must be simple as running single Example.html file from the local disks: <html><head>    <script type="text/csharp">        void Add(x, y)        {            var value = x + y;            document.getElementById("Result").value = value;        }    </script></head><body>    <input type="text" id="Result" />    <button onclick="Add(1, 2)">Calculate</button></body></html>
thiyagu Raj
thiyagu Raj 2019-04-26 12:44:08
Awesome MS ,, i am following webassembly last 6 years when it was announced and MS pickup and finally its ready , waiting to code a browser behaviors in c#,, 
Avatar
Ma, Chuanshan 2019-04-27 18:44:45
Do we still need 10s to load a hello world demo in latest release?
Avatar
D Faruque Ahmad 2019-04-29 22:33:21
Just awesome...
Avatar
Frank Thomas 2019-04-30 06:53:32
I agree, it does look promising. I think my main question is how does it compare to the likes of Angular and React, or is there a comparison?
Avatar
Agustin Silva 2019-05-05 08:16:25
We are  loving blazor. Thanks.  After the update we are getting lots of errors: The type or namespace name 'Mvc' does not exist in the namespace 'Microsoft.AspNetCore' , any suggestions?
Avatar
Michael Easterbrook 2019-05-14 13:00:31
I have a website built with Razor. How difficult would it be to convert it to Blazor? It uses C# and the backend is SQL Server.
Prashant Nagori
Prashant Nagori 2019-05-23 22:07:01
Is it targetted for mobile & tabs also ?
Avatar
jorge arana 2019-05-28 07:30:44
unfortunately I have started learning blazor a week ago, using .net core 3.0 and official blazor preview where it is not possible to connect to a database using Microsoft.EntityFrameworkCore.SqlServer. Before it was very easy to connect in asp.net MVC. Now I see that this is not possible. The MSB3073 error appears I have seen your comment on github:"The issue you are seeing is due to the IL Linker complaining about a native dependency in your dependency graph (probably from microsoft.entityframeworkcore.sqlserver in this case). Native dependencies will not work when running on WebAssembly (for obvious reasons), so if you want to run client-side then you should clean up your dependencies to just the stuff that can work in a browser." I must understand that the case is closed and it is not possible to work with a data server.
Avatar
Hitesh Davey 2019-06-04 03:44:52
Hi Daniel, I understand that C# & VB.NET compilers are based on common compiler platform called "Roslyn" and both languages compile code into common IL for execution; then what is so hard for MS to enable the development of Blazer/Xamarin/cross-platform apps using VB.NET? I am sure the entire VB.NET developer community would be interested to know more about this in detail. Pl don't disappoint us!
Riaan G
Riaan G 2019-06-06 02:59:09
Just came here to say, Yaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaas!
Avatar
Ra D 2019-06-08 11:52:32
Hi Dan, Blazor looks very promising. Can you include Authentication into .NetCore Preview3 VS2019 templates. I like the Blazor server-side model, it has a simple and clean code layout and foot print; however injecting authentication seem to be a pain so far. Having a solid individual user (user registration) code template would simplify our Blazor development.  Thanks
Avatar
Alexandru Gusacinschi 2019-06-09 15:33:17
RIP JS!!!
Avatar
ron jones 2019-06-17 20:08:59
Can't wait til the Production Release date!!!
Avatar
Agung Buana 2019-06-20 22:49:25
I just downloaded vs 2019 16.2 preview 2 and netcore 3 preview6. I couldn't find Razor Components template. So what is the official name of the template? is it Blazor (server-side) now?
Mohammad M
Mohammad M 2019-06-24 13:48:51
You guys are doing such an amazing job.  Much appreaciated  Thanks a lot.
Dong Lou
Dong Lou 2019-07-15 15:39:39
Very promising. I will sure be using this for my next projects.
Avatar
Dharmraj 2019-07-18 23:53:29
Hello Roth,I can see the future, it would be the new era of web development by this amazing feature and invention of Blazor. Its really nice and i am sure most of i.t. proffessionals will move to use Blazor for making SPA.Also please solve my prob,Using: visual studio code + latest C# extension. OS: windows 10 - 64biti have made .net core app wit blazor, this throws error while i build the app [appname: CodeCoreBlazor]:Error: C:\Program Files\dotnet\sdk\3.0.100-preview6-012264\Microsoft.Common.CurrentVersion.targets(4552,5): error MSB3027: Could not copy "D:\TestProjects\New folder\CodeCoreBlazor\obj\Debug\netcoreapp3.0\CodeCoreBlazor.exe" to "bin\Debug\netcoreapp3.0\CodeCoreBlazor.exe". Exceeded retry countof 10. Failed. [D:\TestProjects\New folder\CodeCoreBlazor\CodeCoreBlazor.csproj] C:\Program Files\dotnet\sdk\3.0.100-preview6-012264\Microsoft.Common.CurrentVersion.targets(4552,5): error MSB3021: Unable to copy file "D:\TestProjects\New folder\CodeCoreBlazor\obj\Debug\netcoreapp3.0\CodeCoreBlazor.exe" to "bin\Debug\netcoreapp3.0\CodeCoreBlazor.exe". The process cannot access the file 'D:\TestProjects\New folder\CodeCoreBlazor\bin\Debug\netcoreapp3.0\CodeCoreBlazor.exe' because it is being used by another process. [D:\TestProjects\New folder\CodeCoreBlazor\CodeCoreBlazor.csproj] The build failed. Fix the build errors and run again.Please solve my prob, i have done much r&d on internet, not getting the solution. Thanks.