04-25-2019, 02:15 AM
Blazor now in official preview!
<div style="margin: 5px 5% 10px 5%;"><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/blazor-now-in-official-preview.jpg" width="150" height="150" title="" alt="" /></div><div><div class="row justify-content-center">
<div class="col-md-4">
<div><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/blazor-now-in-official-preview.jpg" width="58" height="58" alt="Daniel Roth" class="avatar avatar-58 wp-user-avatar wp-user-avatar-58 alignnone photo"></p>
<p>Daniel</p>
</div>
</div>
</div>
<div class="entry-meta">
<p>April 18th, 2019</p>
</p></div>
<p><!-- .entry-meta --> </p>
<p>With this newest Blazor release we’re pleased to announce that <strong>Blazor is now in official preview!</strong> 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.</p>
<p>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.</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/blazor-now-in-official-preview.png" alt="Blazor icon"></p>
<h3>Simplifying the naming and versioning</h3>
<p>For a while, we’ve used the terminology <em>Razor Components</em> in some cases, and <em>Blazor</em> in other cases. This has proven to be confusing, so following a lot of community feedback, we’ve decided to drop the name <em>ASP.NET Core Razor Components</em>, and return to the name <em>Server-side Blazor</em> instead.</p>
<p>This emphasizes that Blazor is a single client app model with multiple hosting models:</p>
<ul>
<li><strong>Server-side Blazor</strong> runs on the server via SignalR</li>
<li><strong>Client-side Blazor</strong> runs client-side on WebAssembly</li>
</ul>
<p>… but either way, it’s the same programming model. The same Blazor components can be hosted in both environments.</p>
<p>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 <code>3.0.0-preview4-19216-03</code>. We no longer use separate <code>0.x</code> version numbers for client-side Blazor packages.</p>
<h3>What will ship when</h3>
<ul>
<li>Server-side Blazor will ship as part of .NET Core 3.0. This was already announced last October.</li>
<li>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”).</li>
</ul>
<p>With each preview release of .NET Core 3.0, we will continue to ship preview releases of both server and client-side Blazor.</p>
<h3>Today’s preview release</h3>
<p>New features in this preview release:</p>
<ul>
<li>Templates updated to use the .razor file extension</li>
<li>_Imports.razor</li>
<li>Scope components with <code>@using</code></li>
<li>New component item template</li>
<li>New Blazor icons</li>
<li>Blazor support in Visual Studio Code</li>
</ul>
<p>Check out the <a href="https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-core-3-0-preview-4/">ASP.NET Core 3.0 Preview 4 announcement</a> for details on these improvements. See also the Blazor <a href="https://github.com/aspnet/Blazor/releases/tag/3.0.0-preview4">release notes</a> for additional details on this preview release.</p>
<h2>Get the Blazor preview</h2>
<p>To get started with the Blazor preview install the following:</p>
<ol>
<li><a href="https://dotnet.microsoft.com/download/dotnet-core/3.0">.NET Core 3.0 Preview 4 SDK</a> (3.0.100-preview4-011223)</li>
<li>
<p>The Blazor templates on the command-line:</p>
<pre><code>dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview4-19216-03
</code></pre>
</li>
<li>
<p><a href="https://visualstudio.com/preview">Visual Studio 2019 Preview</a> with the <em>ASP.NET and web development</em> workload selected as well as the latest <a href="https://go.microsoft.com/fwlink/?linkid=870389">Blazor</a> extension from the Visual Studio Marketplace, <em>or</em> <a href="https://code.visualstudio.com">Visual Studio Code</a> with the latest <a href="https://marketplace.visualstudio.com/itemdetails?itemName=ms-vscode.csharp">C# extension</a> (now with <a href="https://devblogs.microsoft.com/aspnet/updated-razor-support-in-visual-studio-code-now-with-blazor-support/">Blazor support!</a>).</p>
</li>
</ol>
<p>You can find getting started instructions, docs, and tutorials for Blazor at our <strong>new</strong> Blazor home page at https://blazor.net.</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/blazor-now-in-official-preview-1.png" alt="Blazor home page"></p>
<h2>Upgrade to the Blazor preview:</h2>
<p>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:</p>
<ul>
<li>Update all Microsoft.AspNetCore.Blazor.* package references to 3.0.0-preview4-19216-03.</li>
<li>Remove any package reference to Microsoft.AspNetCore.Components.Server.</li>
<li>Remove any <code>DotNetCliToolReference</code> to Microsoft.AspNetCore.Blazor.Cli and replace with a package reference to Microsoft.AspNetCore.Blazor.DevServer.</li>
<li>In client Blazor projects remove the <code><RunCommand>dotnet</RunCommand></code> and <code><RunArguments>blazor serve</RunArguments></code> properties.</li>
<li>In client Blazor projects add the <code><RazorLangVersion>3.0</RazorLangVersion></code> property.</li>
<li>Rename all <em>_ViewImports.cshtml</em> files to <em>_Imports.razor</em>.</li>
<li>Rename all remaining .cshtml files to .razor.</li>
<li>Rename <em>components.webassembly.js</em> to <em>blazor.webassembly.js</em></li>
<li>Remove any use of the <code>Microsoft.AspNetCore.Components.Services</code> namespace and replace with <code>Microsoft.AspNetCore.Components</code> as required.</li>
<li>Update server projects to use endpoint routing:</li>
</ul>
<pre><code class="csharp">// Replace this:
app.UseMvc(routes =>
{ routes.MapRoute(name: "default", template: "{controller}/{action}/{id?}");
}); // With this:
app.UseRouting(); app.UseEndpoints(routes =>
{ routes.MapDefaultControllerRoute();
});
</code></pre>
<ul>
<li>Run <code>dotnet clean</code> on the solution to clear out old Razor declarations.</li>
</ul>
<h2>Blazor community page is now Awesome Blazor</h2>
<p>As part of updating the <a href="https://blazor.net">Blazor</a> site, we’ve decided to retire the Blazor community page and instead direct folks to the community driven <a href="https://github.com/AdrienTorris/awesome-blazor">Awesome Blazor</a> site. Thank you Adrien Torris for maintaining this truly “awesome” list of Blazor resources!</p>
<h2>Try out preview Blazor UI offerings from Telerik, DevExpress, and Syncfusion</h2>
<p>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 <a href="https://www.telerik.com/blazor-ui">Telerik</a>, <a href="https://www.devexpress.com/blazor-razor-components/">DevExpress</a>, and <a href="https://www.syncfusion.com/aspnet-core-blazor-components">Syncfusion</a> 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.</p>
<h2>Give feedback</h2>
<p>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, <a href="https://github.com/aspnet/aspnetcore/issues">file issues on GitHub</a>. You can also chat with us and the Blazor community on <a href="https://gitter.im/aspnet/blazor">Gitter</a> 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:</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/blazor-now-in-official-preview-2.png" alt="Blazor survey"></p>
<p>Thanks for trying out Blazor!</p>
<div class="authorinfoarea">
<div><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/blazor-now-in-official-preview.jpg" width="96" height="96" alt="Daniel Roth" class="avatar avatar-96 wp-user-avatar wp-user-avatar-96 alignnone photo"></div>
<div>
<h5><a class="no-underline" aria-label="Daniel Roth" target="_blank" href="https://devblogs.microsoft.com/aspnet/author/danroth27/" rel="noopener noreferrer">Daniel Roth</a></h5>
<p>Principal Program Manager, ASP.NET</p>
<p><strong>Follow Daniel</strong> <a class="no-underline stayinformed" aria-label="Daniel Roth Twitter profile" target="_blank" href="https://twitter.com/danroth27" rel="noopener noreferrer"><i class="fa fa-twitter"></i></a><a class="no-underline stayinformed" aria-label="Daniel Roth GitHub profile" target="_blank" href="https://github.com/danroth27" rel="noopener noreferrer"><i class="fa fa-github"></i></a><a class="no-underline stayinformed hvr-pop" aria-label="Daniel Roth RSS Feed" target="_blank" href="https://devblogs.microsoft.com/aspnet/author/danroth27/feed/" rel="noopener noreferrer"></a></p>
</p></div>
</p></div>
</div>
<div style="margin: 5px 5% 10px 5%;"><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/blazor-now-in-official-preview.jpg" width="150" height="150" title="" alt="" /></div><div><div class="row justify-content-center">
<div class="col-md-4">
<div><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/blazor-now-in-official-preview.jpg" width="58" height="58" alt="Daniel Roth" class="avatar avatar-58 wp-user-avatar wp-user-avatar-58 alignnone photo"></p>
<p>Daniel</p>
</div>
</div>
</div>
<div class="entry-meta">
<p>April 18th, 2019</p>
</p></div>
<p><!-- .entry-meta --> </p>
<p>With this newest Blazor release we’re pleased to announce that <strong>Blazor is now in official preview!</strong> 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.</p>
<p>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.</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/blazor-now-in-official-preview.png" alt="Blazor icon"></p>
<h3>Simplifying the naming and versioning</h3>
<p>For a while, we’ve used the terminology <em>Razor Components</em> in some cases, and <em>Blazor</em> in other cases. This has proven to be confusing, so following a lot of community feedback, we’ve decided to drop the name <em>ASP.NET Core Razor Components</em>, and return to the name <em>Server-side Blazor</em> instead.</p>
<p>This emphasizes that Blazor is a single client app model with multiple hosting models:</p>
<ul>
<li><strong>Server-side Blazor</strong> runs on the server via SignalR</li>
<li><strong>Client-side Blazor</strong> runs client-side on WebAssembly</li>
</ul>
<p>… but either way, it’s the same programming model. The same Blazor components can be hosted in both environments.</p>
<p>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 <code>3.0.0-preview4-19216-03</code>. We no longer use separate <code>0.x</code> version numbers for client-side Blazor packages.</p>
<h3>What will ship when</h3>
<ul>
<li>Server-side Blazor will ship as part of .NET Core 3.0. This was already announced last October.</li>
<li>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”).</li>
</ul>
<p>With each preview release of .NET Core 3.0, we will continue to ship preview releases of both server and client-side Blazor.</p>
<h3>Today’s preview release</h3>
<p>New features in this preview release:</p>
<ul>
<li>Templates updated to use the .razor file extension</li>
<li>_Imports.razor</li>
<li>Scope components with <code>@using</code></li>
<li>New component item template</li>
<li>New Blazor icons</li>
<li>Blazor support in Visual Studio Code</li>
</ul>
<p>Check out the <a href="https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-core-3-0-preview-4/">ASP.NET Core 3.0 Preview 4 announcement</a> for details on these improvements. See also the Blazor <a href="https://github.com/aspnet/Blazor/releases/tag/3.0.0-preview4">release notes</a> for additional details on this preview release.</p>
<h2>Get the Blazor preview</h2>
<p>To get started with the Blazor preview install the following:</p>
<ol>
<li><a href="https://dotnet.microsoft.com/download/dotnet-core/3.0">.NET Core 3.0 Preview 4 SDK</a> (3.0.100-preview4-011223)</li>
<li>
<p>The Blazor templates on the command-line:</p>
<pre><code>dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview4-19216-03
</code></pre>
</li>
<li>
<p><a href="https://visualstudio.com/preview">Visual Studio 2019 Preview</a> with the <em>ASP.NET and web development</em> workload selected as well as the latest <a href="https://go.microsoft.com/fwlink/?linkid=870389">Blazor</a> extension from the Visual Studio Marketplace, <em>or</em> <a href="https://code.visualstudio.com">Visual Studio Code</a> with the latest <a href="https://marketplace.visualstudio.com/itemdetails?itemName=ms-vscode.csharp">C# extension</a> (now with <a href="https://devblogs.microsoft.com/aspnet/updated-razor-support-in-visual-studio-code-now-with-blazor-support/">Blazor support!</a>).</p>
</li>
</ol>
<p>You can find getting started instructions, docs, and tutorials for Blazor at our <strong>new</strong> Blazor home page at https://blazor.net.</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/blazor-now-in-official-preview-1.png" alt="Blazor home page"></p>
<h2>Upgrade to the Blazor preview:</h2>
<p>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:</p>
<ul>
<li>Update all Microsoft.AspNetCore.Blazor.* package references to 3.0.0-preview4-19216-03.</li>
<li>Remove any package reference to Microsoft.AspNetCore.Components.Server.</li>
<li>Remove any <code>DotNetCliToolReference</code> to Microsoft.AspNetCore.Blazor.Cli and replace with a package reference to Microsoft.AspNetCore.Blazor.DevServer.</li>
<li>In client Blazor projects remove the <code><RunCommand>dotnet</RunCommand></code> and <code><RunArguments>blazor serve</RunArguments></code> properties.</li>
<li>In client Blazor projects add the <code><RazorLangVersion>3.0</RazorLangVersion></code> property.</li>
<li>Rename all <em>_ViewImports.cshtml</em> files to <em>_Imports.razor</em>.</li>
<li>Rename all remaining .cshtml files to .razor.</li>
<li>Rename <em>components.webassembly.js</em> to <em>blazor.webassembly.js</em></li>
<li>Remove any use of the <code>Microsoft.AspNetCore.Components.Services</code> namespace and replace with <code>Microsoft.AspNetCore.Components</code> as required.</li>
<li>Update server projects to use endpoint routing:</li>
</ul>
<pre><code class="csharp">// Replace this:
app.UseMvc(routes =>
{ routes.MapRoute(name: "default", template: "{controller}/{action}/{id?}");
}); // With this:
app.UseRouting(); app.UseEndpoints(routes =>
{ routes.MapDefaultControllerRoute();
});
</code></pre>
<ul>
<li>Run <code>dotnet clean</code> on the solution to clear out old Razor declarations.</li>
</ul>
<h2>Blazor community page is now Awesome Blazor</h2>
<p>As part of updating the <a href="https://blazor.net">Blazor</a> site, we’ve decided to retire the Blazor community page and instead direct folks to the community driven <a href="https://github.com/AdrienTorris/awesome-blazor">Awesome Blazor</a> site. Thank you Adrien Torris for maintaining this truly “awesome” list of Blazor resources!</p>
<h2>Try out preview Blazor UI offerings from Telerik, DevExpress, and Syncfusion</h2>
<p>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 <a href="https://www.telerik.com/blazor-ui">Telerik</a>, <a href="https://www.devexpress.com/blazor-razor-components/">DevExpress</a>, and <a href="https://www.syncfusion.com/aspnet-core-blazor-components">Syncfusion</a> 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.</p>
<h2>Give feedback</h2>
<p>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, <a href="https://github.com/aspnet/aspnetcore/issues">file issues on GitHub</a>. You can also chat with us and the Blazor community on <a href="https://gitter.im/aspnet/blazor">Gitter</a> 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:</p>
<p><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/blazor-now-in-official-preview-2.png" alt="Blazor survey"></p>
<p>Thanks for trying out Blazor!</p>
<div class="authorinfoarea">
<div><img src="http://www.sickgaming.net/blog/wp-content/uploads/2019/04/blazor-now-in-official-preview.jpg" width="96" height="96" alt="Daniel Roth" class="avatar avatar-96 wp-user-avatar wp-user-avatar-96 alignnone photo"></div>
<div>
<h5><a class="no-underline" aria-label="Daniel Roth" target="_blank" href="https://devblogs.microsoft.com/aspnet/author/danroth27/" rel="noopener noreferrer">Daniel Roth</a></h5>
<p>Principal Program Manager, ASP.NET</p>
<p><strong>Follow Daniel</strong> <a class="no-underline stayinformed" aria-label="Daniel Roth Twitter profile" target="_blank" href="https://twitter.com/danroth27" rel="noopener noreferrer"><i class="fa fa-twitter"></i></a><a class="no-underline stayinformed" aria-label="Daniel Roth GitHub profile" target="_blank" href="https://github.com/danroth27" rel="noopener noreferrer"><i class="fa fa-github"></i></a><a class="no-underline stayinformed hvr-pop" aria-label="Daniel Roth RSS Feed" target="_blank" href="https://devblogs.microsoft.com/aspnet/author/danroth27/feed/" rel="noopener noreferrer"></a></p>
</p></div>
</p></div>
</div>