Update Blazor migration guidance (#20632)
Luke Latham
GitHub
parent
3ddc6f95fc
commit
82cc6736a3
|
|
@ -4,7 +4,7 @@ author: scottaddie
|
|||
description: Learn how to migrate an ASP.NET Core 3.1 project to ASP.NET Core 5.0.
|
||||
ms.author: scaddie
|
||||
ms.custom: mvc
|
||||
ms.date: 11/15/2020
|
||||
ms.date: 11/17/2020
|
||||
no-loc: [appsettings.json, "ASP.NET Core Identity", cookie, Cookie, Blazor, "Blazor Server", "Blazor WebAssembly", "Identity", "Let's Encrypt", Razor, SignalR]
|
||||
uid: migration/31-to-50
|
||||
---
|
||||
|
|
@ -58,71 +58,29 @@ If updating a Blazor WebAssembly project, skip to the [Update Blazor WebAssembly
|
|||
</Project>
|
||||
```
|
||||
|
||||
## Update Blazor WebAssembly projects
|
||||
## Update Blazor WebAssembly and Blazor Server projects
|
||||
|
||||
For a Blazor WebAssembly project, including the *`Client`* project of a hosted Blazor solution, apply the following changes to the project file:
|
||||
*The guidance in this section applies to both Blazor hosting models. Sections following this section provide additional guidance specific to hosting models and app types. Apply the guidnace from all relevant sections to your app.*
|
||||
|
||||
1. Update the SDK from `Microsoft.NET.Sdk.Web` to `Microsoft.NET.Sdk.BlazorWebAssembly`:
|
||||
1. In `wwwroot/index.html` of a Blazor WebAssembly app or the `Pages/_Host.cshtml` of a Blazor Server app, add a `<link>` element to the `<head>` element for styles. In the following `<link>` element `href` attribute values, the placeholder `{ASSEMBLY NAME}` is the app's assembly name.
|
||||
|
||||
```diff
|
||||
- <Project Sdk="Microsoft.NET.Sdk.Web">
|
||||
+ <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
|
||||
+<link href="{ASSEMBLY NAME}.styles.css" rel="stylesheet" />
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> This update only applies to standalone Blazor WebAssembly projects and the *`Client`* projects of hosted Blazor solutions.
|
||||
|
||||
1. Update the following properties:
|
||||
|
||||
```diff
|
||||
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
|
||||
|
||||
<PropertyGroup>
|
||||
- <TargetFramework>netstandard2.1</TargetFramework>
|
||||
- <RazorLangVersion>3.0</RazorLangVersion>
|
||||
+ <TargetFramework>net5.0</TargetFramework>
|
||||
</PropertyGroup>
|
||||
```
|
||||
|
||||
1. Remove the package reference to [Microsoft.AspNetCore.Components.WebAssembly.Build](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebAssembly.Build):
|
||||
|
||||
```diff
|
||||
<ItemGroup>
|
||||
- <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="3.2.1" PrivateAssets="all" />
|
||||
```
|
||||
|
||||
1. Update other packages to their latest versions. The latest versions can be found at [NuGet.org](https://www.nuget.org).
|
||||
|
||||
1. In `wwwroot/index.html`:
|
||||
|
||||
* Add a `<link>` element to the `<head>` element for scoped styles.
|
||||
* Change the element that loads the `App` component.
|
||||
|
||||
```diff
|
||||
+<link href="_framework/scoped.styles.css" rel="stylesheet" />
|
||||
```
|
||||
Standalone Blazor WebAssembly example:
|
||||
|
||||
```diff
|
||||
-<app>Loading...</app>
|
||||
+<app id="app">Loading...</app>
|
||||
+<link href="BlazorSample.styles.css" rel="stylesheet" />
|
||||
```
|
||||
|
||||
*`Client`* project of a hosted Blazor WebAssembly solution example:
|
||||
|
||||
1. In `Program.Main`:
|
||||
|
||||
* Change the reference to the `<app>` element to a CSS selector by adding a hash `#` to it.
|
||||
* Change the `HttpClient` registration to scoped.
|
||||
|
||||
```diff
|
||||
-builder.RootComponents.Add<App>("app");
|
||||
+builder.RootComponents.Add<App>("#app");
|
||||
|
||||
-builder.Services.AddTransient(sp => new HttpClient
|
||||
- { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
+builder.Services.AddScoped(sp => new HttpClient
|
||||
+ { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
+<link href="BlazorSample.Client.styles.css" rel="stylesheet" />
|
||||
```
|
||||
|
||||
1. In `Shared/MainLayout.razor`, surround all of the content in a `<div>` element with an `id` of `page`:
|
||||
|
||||
1. In the `Shared/MainLayout.razor` file, surround all of the content in a `<div>` element with an `id` of `page`:
|
||||
|
||||
```razor
|
||||
<div class="page">
|
||||
|
|
@ -275,10 +233,10 @@ For a Blazor WebAssembly project, including the *`Client`* project of a hosted B
|
|||
}
|
||||
}
|
||||
```
|
||||
|
||||
1. The latest base `wwwroot/css/app.css` file includes the following styles. Remove extra styles leaving the following styles and any that you've added to the app.
|
||||
|
||||
`wwwroot/css/app.css` (base styles not including styles added by the developer):
|
||||
1. The latest base `wwwroot/css/app.css` file of a Blazor WebAssembly app or `wwwroot/css/site.css` file of a Blazor Server app includes the following styles. Remove extra styles leaving the following styles and any that you've added to the app.
|
||||
|
||||
The following stylesheet only includes base styles and does **not** include custom styles added by the developer:
|
||||
|
||||
```css
|
||||
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
|
||||
|
|
@ -333,6 +291,63 @@ For a Blazor WebAssembly project, including the *`Client`* project of a hosted B
|
|||
}
|
||||
```
|
||||
|
||||
## Update Blazor WebAssembly projects
|
||||
|
||||
For a Blazor WebAssembly project, including the *`Client`* project of a hosted Blazor solution, apply the following changes to the project file:
|
||||
|
||||
1. Update the SDK from `Microsoft.NET.Sdk.Web` to `Microsoft.NET.Sdk.BlazorWebAssembly`:
|
||||
|
||||
```diff
|
||||
- <Project Sdk="Microsoft.NET.Sdk.Web">
|
||||
+ <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> This update only applies to standalone Blazor WebAssembly projects and the *`Client`* projects of hosted Blazor solutions.
|
||||
|
||||
1. Update the following properties:
|
||||
|
||||
```diff
|
||||
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
|
||||
|
||||
<PropertyGroup>
|
||||
- <TargetFramework>netstandard2.1</TargetFramework>
|
||||
- <RazorLangVersion>3.0</RazorLangVersion>
|
||||
+ <TargetFramework>net5.0</TargetFramework>
|
||||
</PropertyGroup>
|
||||
```
|
||||
|
||||
1. Remove the package reference to [Microsoft.AspNetCore.Components.WebAssembly.Build](https://www.nuget.org/packages/Microsoft.AspNetCore.Components.WebAssembly.Build):
|
||||
|
||||
```diff
|
||||
<ItemGroup>
|
||||
- <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.Build" Version="3.2.1" PrivateAssets="all" />
|
||||
```
|
||||
|
||||
1. Update other packages to their latest versions. The latest versions can be found at [NuGet.org](https://www.nuget.org).
|
||||
|
||||
1. In `wwwroot/index.html`, change the element that loads the `App` component:
|
||||
|
||||
```diff
|
||||
-<app>Loading...</app>
|
||||
+<app id="app">Loading...</app>
|
||||
```
|
||||
|
||||
1. In `Program.Main`:
|
||||
|
||||
* Change the reference to the `<app>` element to a CSS selector by adding a hash `#` to it.
|
||||
* Change the `HttpClient` registration to scoped.
|
||||
|
||||
```diff
|
||||
-builder.RootComponents.Add<App>("app");
|
||||
+builder.RootComponents.Add<App>("#app");
|
||||
|
||||
-builder.Services.AddTransient(sp => new HttpClient
|
||||
- { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
+builder.Services.AddScoped(sp => new HttpClient
|
||||
+ { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
|
||||
```
|
||||
|
||||
### Standalone Blazor WebAssembly app with Microsoft Accounts
|
||||
|
||||
For a standalone Blazor WebAssembly app registered in the Azure portal to use Azure Active Directory (AAD) for Microsoft Accounts:
|
||||
|
|
|
|||
Loading…
Reference in New Issue