+- Sick Gaming (https://www.sickgaming.net)
+-- Forum: Programming (https://www.sickgaming.net/forum-76.html)
+--- Forum: C#, Visual Basic, & .Net Frameworks (https://www.sickgaming.net/forum-79.html)
+--- Thread: Blazor WebAssembly 3.2.0 Preview 3 release now available (/thread-94259.html)
Blazor WebAssembly 3.2.0 Preview 3 release now available - xSicKxBot - 03-27-2020
Blazor WebAssembly 3.2.0 Preview 3 release now available
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/03/blazor-webassembly-3-2-0-preview-3-release-now-available.jpg" width="150" height="150" title="" alt="" /></div><div><div class="row justify-content-center">
<div class="col-md-4">
<div><img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/03/blazor-webassembly-3-2-0-preview-3-release-now-available.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>March 26th, 2020</p>
</p></div>
<p><!-- .entry-meta --> </p>
<p>A new preview update of Blazor WebAssembly is now available! Here’s what’s new in this release:</p>
<ul>
<li>Debugging in Visual Studio and Visual Studio Code</li>
<li>Auto-rebuild in Visual Studio</li>
<li>Configuration</li>
<li>New HttpClient extension methods for JSON handling</li>
</ul>
<h2>Get started</h2>
<p>To get started with Blazor WebAssembly 3.2.0 Preview 3 install the latest <a href="https://dotnet.microsoft.com/download/dotnet-core/3.1">.NET Core 3.1 SDK</a>.</p>
<blockquote>
<p>NOTE: Version 3.1.201 or later of the .NET Core SDK is <strong>required</strong> to use this Blazor WebAssembly release! Make sure you have the correct .NET Core SDK version by running <code>dotnet --version</code> from a command prompt.</p>
</blockquote>
<p>Once you have the appropriate .NET Core SDK installed, run the following command to install the updated Blazor WebAssembly template:</p>
<pre><code>dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview3.20168.3
</code></pre>
<p>If you’re on Windows using Visual Studio, we recommend <a href="https://visualstudio.com/preview">installing the latest preview of Visual Studio 2019 16.6</a>. Installing Visual Studio 2019 16.6 Preview 2 or later will also install an updated version of the .NET Core 3.1 SDK that includes the Blazor WebAssembly template, so you don’t need to separately install it.</p>
<p>That’s it! You can find additional docs and samples on <a href="https://blazor.net">https://blazor.net</a>.</p>
<h2>Upgrade an existing project</h2>
<p>To upgrade an existing Blazor WebAssembly app from 3.2.0 Preview 2 to 3.2.0 Preview 3:</p>
<ul>
<li>Update all Microsoft.AspNetCore.Components.WebAssembly.* package references to version 3.2.0-preview3.20168.3.</li>
<li>Update all Microsoft.AspNetCore.Blazor.* package references to version 3.2.0-preview3.20168.3.</li>
</ul>
<p>You’re all set – easy peasy!</p>
<h2>Debugging</h2>
<p>You can now debug Blazor WebAssembly apps directly from Visual Studio and Visual Studio Code. You can set breakpoints, inspect locals, and step through your code. You can also simultaneously debug your Blazor WebAssembly app and any .NET code running on the server. Using the browser dev tools to debug your Blazor WebAssembly apps is also still supported.</p>
<h3>Enable debugging</h3>
<p>To enable debugging in an existing Blazor WebAssembly app, update <em>launchSettings.json</em> in the startup project of your app to include the following <code>inspectUri</code> property in each launch profile:</p>
<pre><code class="json">"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}"
</code></pre>
<p>This property enables the IDE to detect that this is a Blazor WebAssembly app and instructs the script debugging infrastructure to connect to the browser through Blazor’s debugging proxy.</p>
<p>Once updated, your <em>launchSettings.json</em> file should look something like this:</p>
<pre><code class="json">{ "iisSettings": { "windowsAuthentication": false, "anonymousAuthentication": true, "iisExpress": { "applicationUrl": "http://localhost:50454", "sslPort": 44399 } }, "profiles": { "IIS Express": { "commandName": "IISExpress", "launchBrowser": true, "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" } }, "BlazorApp1.Server": { "commandName": "Project", "launchBrowser": true, "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", "applicationUrl": "https://localhost:5001;http://localhost:5000", "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" } } } } </code></pre>
<h3>Visual Studio</h3>
<p>To debug a Blazor WebAssembly app in Visual Studio:</p>
<ol>
<li>Ensure you have <a href="https://visualstudio.com/preview">installed the latest preview release of Visual Studio 2019 16.6</a> or later.</li>
<li>Create a new ASP.NET Core hosted Blazor WebAssembly app.</li>
<li>Hit <kbd>F5</kbd> to run the app in the debugger.</li>
<li>Set a breakpoint in <em>Counter.razor</em> in the <code>IncrementCount</code> method.</li>
<li>
<p>Browser to the Counter tab and click the button to hit the breakpoint:</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/03/blazor-webassembly-3-2-0-preview-3-release-now-available.png"> <img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/03/blazor-webassembly-3-2-0-preview-3-release-now-available.png" alt="Debug Counter"></a></p>
</li>
<li>
<p>Check out the value of the <code>currentCount</code> field in the locals window:</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/03/blazor-webassembly-3-2-0-preview-3-release-now-available-1.png"> <img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/03/blazor-webassembly-3-2-0-preview-3-release-now-available-1.png" alt="View locals"></a></p>
</li>
<li>
<p>Hit <kbd>F5</kbd> to continue execution.</p>
</li>
</ol>
<p>While debugging your Blazor WebAssembly app you can also debug your server code:</p>
<ol>
<li>Set a breakpoint in the <em>FetchData.razor</em> page in <code>OnInitializedAsync</code>.</li>
<li>Set a breakpoint in the <code>WeatherForecastController</code> in the <code>Get</code> action method.</li>
<li>
<p>Browser to the Fetch Data tab to hit the first breakpoint in the <code>FetchData</code> component just before it issues an HTTP request to the server:</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/03/blazor-webassembly-3-2-0-preview-3-release-now-available-2.png"> <img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/03/blazor-webassembly-3-2-0-preview-3-release-now-available-2.png" alt="Debug Fetch Data"></a></p>
</li>
<li>
<p>Hit <kbd>F5</kbd> to continue execution and then hit the breakpoint on the server in the <code>WeatherForecastController</code>:</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/03/blazor-webassembly-3-2-0-preview-3-release-now-available-3.png"> <img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/03/blazor-webassembly-3-2-0-preview-3-release-now-available-3.png" alt="Debug server"></a></p>
</li>
<li>
<p>Hit <kbd>F5</kbd> again to let execution continue and see the weather forecast table rendered.</p>
</li>
</ol>
<h3>Visual Studio Code</h3>
<p>To debug a Blazor WebAssembly app in Visual Studio Code:</p>
<ol>
<li>
<p>Install the <a href="https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp">C# extension</a> and the <a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.js-debug-nightly">JavaScript Debugger (Nightly)</a> extension with the <code>debug.javascript.usePreview</code> setting set to <code>true</code>.</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/03/blazor-webassembly-3-2-0-preview-3-release-now-available-4.png"> <img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/03/blazor-webassembly-3-2-0-preview-3-release-now-available-4.png" alt="Extensions"></a></p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/03/blazor-webassembly-3-2-0-preview-3-release-now-available-5.png"> <img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/03/blazor-webassembly-3-2-0-preview-3-release-now-available-5.png" alt="JS preview debugger"></a></p>
</li>
<li>
<p>Open an existing Blazor WebAssembly app with debugging enabled.</p>
<p>a. If you get the following notification that additional setup is required to enable debugging, recheck that you have the correct extensions installed and JavaScript preview debugging enabled and then reload the window:</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/03/blazor-webassembly-3-2-0-preview-3-release-now-available-6.png"> <img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/03/blazor-webassembly-3-2-0-preview-3-release-now-available-6.png" alt="Additional setup requried"></a></p>
<p>b. A notification should offer to add required assets for building and debugging to the app. Select “Yes”.</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/03/blazor-webassembly-3-2-0-preview-3-release-now-available-7.png"> <img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/03/blazor-webassembly-3-2-0-preview-3-release-now-available-7.png" alt="Add required assets"></a></p>
</li>
<li>
<p>Starting the app in the debugger is then a two-step process:</p>
<p>a. Start the app first using the “.NET Core Launch (Blazor Standalone)” launch configuration.</p>
<p>b. Then start the browser using the “.NET Core Debug Blazor Web Assembly in Chrome” launch configuration (requires Chrome). To use the latest stable release of Edge instead of Chrome, change the <code>type</code> of the launch configuration in <em>.vscode/launch.json</em> from <code>pwa-chrome</code> to <code>pwa-msedge</code>.</p>
</li>
<li>
<p>Set a breakpoint in the <code>IncrementCount</code> method in the <code>Counter</code> component and then select the button to hit the breakpoint:</p>
<p><a href="https://www.sickgaming.net/blog/wp-content/uploads/2020/03/blazor-webassembly-3-2-0-preview-3-release-now-available-8.png"> <img src="https://www.sickgaming.net/blog/wp-content/uploads/2020/03/blazor-webassembly-3-2-0-preview-3-release-now-available-8.png" alt="Debug Counter in VS Code"></a></p>
</li>
</ol>
<h3>Known limitations</h3>
<p>There are a number of limitations with the current debugging experience in Visual Studio and Visual Studio Code. The following debugging features are not yet fully implemented:</p>
<ul>
<li>Inspecting arrays</li>
<li>Hovering to inspect members</li>
<li>Step debugging into or out of managed code</li>
<li>Full support for inspecting value types</li>
<li>Breaking on unhandled exceptions</li>
<li>Hitting breakpoints during app startup</li>
<li>Debugging an app with a service worker</li>
</ul>
<p>We expect to continue to improve the debugging experience in future releases. We appreciate your feedback to help us get the Blazor WebAssembly debugging experience right!</p>
<h2>Auto-rebuild in Visual Studio</h2>
<p>Visual Studio 2019 16.6 will watch for file changes in .cs and .razor files across the solution and automatically rebuild and restart the app so that the changes can be seen by simply refreshing the browser. This enables auto-rebuild support for Blazor WebAssembly projects and Razor Class Libraries. Instead of manually rebuilding and restarting the app when making code changes, just edit, save, and then refresh the browser.</p>
<h2>Configuration</h2>
<p>Blazor WebAssembly apps now have built-in support for loading configuration data from <em>appsettings.json</em> and environment specific configuration data from <em>appsettings.{environment}.json</em>.</p>
<p>To add configuration data to your Blazor WebAssembly app:</p>
<ol>
<li>Add an <em>appsettings.json</em> file in the <em>wwwroot</em> folder of your Blazor WebAssembly app:</li>
</ol>
<pre><code class="json">{ "message": "Hello from config!"
}
</code></pre>
<ol>
<li>Inject an <code>IConfiguration</code> instance into your components to access the configuration data.</li>
</ol>
<pre><code class="razor">@page "/"
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration <h1>Configuration example</h1> <p>@Configuration["message"]</p>
</code></pre>
<ol>
<li>
<p>Run the app to see the configured message displayed on the home page.</p>
</li>
<li>
<p>To optionally override this configuration with values specific to the Development environment, add an <em>appsettings.Development.json</em> to your <em>wwwroot</em> folder:</p>
</li>
</ol>
<pre><code class="json">{ "message": "Hello from Development config!"
}
</code></pre>
<ol>
<li>If you now run the app in Development, you’ll see the new message.</li>
</ol>
<blockquote>
<p>Note: Blazor WebAssembly apps load the configuration data by downloading the JSON files to the browser, so these configuration files must be publicly addressable. Do <em>not</em> store secrets in these configuration files, as they are public and can be viewed by anyone.</p>
</blockquote>
<h2>New HttpClient extension methods for JSON handling</h2>
<p>The .NET team has been hard at work creating a full set of new extension methods for <code>HttpClient</code> that handle JSON serialization and deserialization using <code>System.Text.Json</code>. These extension methods are now available in preview with the <a href="https://nuget.org/packages/System.Net.Http.Json">System.Net.Http.Json</a> package and they will replace the existing helper methods in the <code>Microsoft.AspNetCore.Blazor.HttpClient</code> package. We haven’t updated the Blazor WebAssembly template yet to use the new extension methods, but we will in our next Blazor WebAssembly preview update.</p>
<p>You can try the new extension methods yourself by replacing the <code>Microsoft.AspNetCore.Blazor.HttpClient</code> package with the newer <code>System.Net.Http.Json</code> package. Then add <code>@using System.Net.Http.Json</code> to your <em>_Imports.razor</em> file and update your code as follows:</p>
<table>
<thead>
<tr>
<th>Microsoft.AspNetCore.Blazor.HttpClient</th>
<th>System.Net.Http.Json</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>GetJsonAsync</code></td>
<td><code>GetFromJsonAsync</code></td>
</tr>
<tr>
<td><code>PostJsonAsync</code></td>
<td><code>PostAsJsonAsync</code></td>
</tr>
<tr>
<td><code>PutJsonAsync</code></td>
<td><code>PutAsJsonAsync</code></td>
</tr>
</tbody>
</table>
<p>The updated implementation of the <code>FetchData</code> component in the default Blazor WebAssembly template looks like this:</p>
<pre><code class="razor">@code { private WeatherForecast[] forecasts; protected override async Task OnInitializedAsync() { forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast"); }
}
</code></pre>
<p><code>System.Net.Http.Json</code> also provides a <code>JsonContent</code> class that can be used for sending serialized JSON, as well as convenient helper methods for reading JSON from an <code>HttpContent</code> instance.</p>
<p>Look for more details on <code>System.Net.Http.Json</code> to be published soon on the <a href="https://devblogs.microsoft.com/dotnet/">.NET blog</a>.</p>
<h2>Known issues</h2>
<p>There are a few known issues with this release that you may run into:</p>
<ul>
<li>
<p>When building a Blazor WebAssembly app using an older .NET Core SDK you may see the following build error:</p>
<pre><code>error MSB4018: The "ResolveBlazorRuntimeDependencies" task failed unexpectedly.
error MSB4018: System.IO.FileNotFoundException: Could not load file or assembly '\BlazorApp1\obj\Debug\netstandard2.1\BlazorApp1.dll'. The system cannot find the file specified.
error MSB4018: File name: '\BlazorApp1\obj\Debug\netstandard2.1\BlazorApp1.dll' error MSB4018: at System.Reflection.AssemblyName.nGetFileInformation(String s)
error MSB4018: at System.Reflection.AssemblyName.GetAssemblyName(String assemblyFile)
error MSB4018: at Microsoft.AspNetCore.Components.WebAssembly.Build.ResolveBlazorRuntimeDependencies.GetAssemblyName(String assemblyPath)
error MSB4018: at Microsoft.AspNetCore.Components.WebAssembly.Build.ResolveBlazorRuntimeDependencies.ResolveRuntimeDependenciesCore(String entryPoint, IEnumerable`1 applicationDependencies, IEnumerable`1 monoBclAssemblies)
error MSB4018: at Microsoft.AspNetCore.Components.WebAssembly.Build.ResolveBlazorRuntimeDependencies.Execute()
error MSB4018: at Microsoft.Build.BackEnd.TaskExecutionHost.Microsoft.Build.BackEnd.ITaskExecutionHost.Execute()
error MSB4018: at Microsoft.Build.BackEnd.TaskBuilder.ExecuteInstantiatedTask(ITaskExecutionHost taskExecutionHost, TaskLoggingContext taskLoggingContext, TaskHost taskHost, ItemBucket bucket, TaskExecutionMode howToExecuteTask)
</code></pre>
<p>To address this issue, update to version 3.1.201 or later of the <a href="https://dotnet.microsoft.com/download/dotnet-core/3.1">.NET Core 3.1 SDK</a>.</p>
</li>
<li>
<p>You may see the following warning when building from the command-line:</p>
<pre><code>CSC : warning CS8034: Unable to load Analyzer assembly C:\Users\user\.nuget\packages\microsoft.aspnetcore.components.analyzers\3.1.0\analyzers\dotnet\cs\Microsoft.AspNetCore.Components.Analyzers.dll : Assembly with same name is already loaded
</code></pre>
<p>To address this issue, update to your package reference to <code>Microsoft.AspNetCore.Components</code> to 3.1.3 or newer. If your project reference the <code>Microsoft.AspNetCore.Components</code> package through a transitive package reference that has not been updated, you can add a reference in your project to resolve the issue in your project.</p>
</li>
<li>
<p>The following error may occur when publishing an ASP.NET Core hosted Blazor app with the .NET IL linker disabled:</p>
<pre><code>An assembly specified in the application dependencies manifest (BlazorApp1.Server.deps.json) was not found
</code></pre>
<p>This error occurs when assemblies shared by the server and Blazor client project get removed during publish (see https://github.com/dotnet/aspnetcore/issues/19926).</p>
<p>To workaround this issue, ensure that you publish with the .NET IL linker enabled. To publish with the linker enabled:</p>
<ul>
<li>Publish using a Release build configuration: <code>dotnet publish -c Release</code>. The .NET IL linker is automatically run for Release builds, but not for Debug builds. </li>
<li>Don’t set <code>BlazorWebAssemblyEnableLinking</code> to <code>false</code> in your client project file.</li>
</ul>
<p>If you’re hitting issues running with the linker disabled, you may need to configure the linker to preserve code that is being called using reflection. See https://docs.microsoft.com/aspnet/core/host-and-deploy/blazor/configure-linker for details.</p>
</li>
</ul>
<h2>Feedback</h2>
<p>We hope you enjoy the new features in this preview release of Blazor WebAssembly! Please let us know what you think by filing issues on <a href="https://github.com/dotnet/aspnetcore/issues">GitHub</a>.</p>
<p>Thanks for trying out Blazor!</p>
</div>
https://www.sickgaming.net/blog/2020/03/26/blazor-webassembly-3-2-0-preview-3-release-now-available/