Upgrade blazor to .net 5.0

Author: boyanio

README.md

@@ -4,23 +4,23 @@ This demo shows how React apps can live together with Blazor apps, which are bas
 
 ## Getting started
 
-To configure Blazor on your machine, you can follow the [instructions](https://docs.microsoft.com/en-us/aspnet/core/blazor/get-started) online. For the rest, you only need:
+To configure Blazor on your machine, you can follow the [instructions](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor) online. For the rest, you only need:
 
 ```
 npm install
 ```
 
 ### Build
 
-To build the project and run it locally, run
+To build the project and run it locally run
 
 ```
 npm run build
 npm start
 ```
 
-The later will create a web site at `http://localhost:8080/react-blazor/`.
+Then you can access it at `http://localhost:8080/react-blazor/`.
 
 ## Questions & contribution
 
-You can follow me on Twitter with [@boyanio](https://twitter.com/boyanio) and ask me questions you might have. You can also open an issue here on GitHub. Pull requests are welcome, too :-)
+You can follow me on Twitter [@boyanio](https://twitter.com/boyanio) and ask me any questions you might have. You can also open an issue here on GitHub. Pull Requests are welcome too :-)

blazor-output.js

@@ -1,15 +1,14 @@
 const { promisify } = require('util');
 const fs = require('fs');
 const rimraf = require('rimraf');
-const ncp = require('ncp').ncp;
+const { ncp } = require('ncp');
 
 const fsAsync = ['exists', 'mkdir']
  .reduce((value, func) => Object.assign(value, { [func]: promisify(fs[func]) }), {});
 const rimrafAsync = promisify(rimraf);
 const ncpAsync = promisify(ncp);
 
 const run = async (buildConfiguration) => {
- const publishDir = `${__dirname}/src/blazor/BlazorChatApp/bin/${buildConfiguration}/netstandard2.0/publish/BlazorChatApp/dist`;
  const buildDir = `${__dirname}/build/apps/blazor`;
 
  if (await fsAsync.exists(buildDir)) {
@@ -18,6 +17,7 @@ const run = async (buildConfiguration) => {
 
  await fsAsync.mkdir(buildDir);
 
+ const publishDir = `${__dirname}/src/blazor/BlazorChatApp/bin/${buildConfiguration}/net5.0/publish/wwwroot`;
  await ncpAsync(`${publishDir}/_framework`, `${buildDir}/_framework`);
 };
 

package.json

@@ -9,7 +9,7 @@
  ],
  "scripts": {
  "build:react": "webpack",
- "build:blazor": "dotnet publish src/blazor/BlazorChatApp.sln -c Release && node blazor-output.js Release",
+ "build:blazor": "dotnet publish src/blazor/BlazorChatApp/BlazorChatApp.csproj -c Release && node blazor-output.js Release",
  "build": "npm run build:react && npm run build:blazor",
  "start": "node serve.js"
  },

src/blazor/BlazorChatApp.sln

@@ -1,5 +1,10 @@
-<Router AppAssembly="typeof(Program).Assembly">
- <NotFoundContent>
- <p>Sorry, there's nothing at this address.</p>
- </NotFoundContent>
+<Router AppAssembly="@typeof(Program).Assembly">
+ <Found Context="routeData">
+ <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+ </Found>
+ <NotFound>
+ <LayoutView Layout="@typeof(MainLayout)">
+ <p>Sorry, there's nothing at this address.</p>
+ </LayoutView>
+ </NotFound>
 </Router>

src/blazor/BlazorChatApp/App.razor

@@ -1,16 +1,13 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
  <PropertyGroup>
- <TargetFramework>netstandard2.0</TargetFramework>
- <LangVersion>7.3</LangVersion>
- <RazorLangVersion>3.0</RazorLangVersion>
+ <TargetFramework>net5.0</TargetFramework>
  </PropertyGroup>
 
  <ItemGroup>
- <PackageReference Include="Microsoft.AspNetCore.Blazor" Version="3.0.0-preview8.19405.7" />
- <PackageReference Include="Microsoft.AspNetCore.Blazor.Build" Version="3.0.0-preview8.19405.7" PrivateAssets="all" />
- <PackageReference Include="Microsoft.AspNetCore.Blazor.DevServer" Version="3.0.0-preview8.19405.7" PrivateAssets="all" />
- <PackageReference Include="Microsoft.AspNetCore.Blazor.HttpClient" Version="3.0.0-preview8.19405.7" PrivateAssets="all" />
+ <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.0" />
+ <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.0" PrivateAssets="all" />
+ <PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
  </ItemGroup>
 
 </Project>

src/blazor/BlazorChatApp/BlazorChatApp.csproj

@@ -1,16 +1,19 @@
-using Microsoft.AspNetCore.Blazor.Hosting;
+using BlazorChatApp.Core;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Microsoft.Extensions.DependencyInjection;
 
 namespace BlazorChatApp
 {
  public class Program
  {
- public static IWebAssemblyHostBuilder CreateHostBuilder(string[] args) =>
- BlazorWebAssemblyHost.CreateDefaultBuilder()
- .UseBlazorStartup<Startup>();
-
- public static void Main(string[] args)
+ public static async Task Main(string[] args)
  {
- CreateHostBuilder(args).Build().Run();
+ var builder = WebAssemblyHostBuilder.CreateDefault(args);
+ builder.RootComponents.Add<App>("#blazor-app");
+ builder.Services.AddSingleton<ChatMessageRepository>();
+
+ await builder.Build().RunAsync();
  }
  }
-}
+}

src/blazor/BlazorChatApp/Program.cs

@@ -3,7 +3,7 @@
 <form class="new-message-form">
  <div class="row">
  <div class="col-md-9">
- <input type="text" id="newChatMessage" class="form-control" placeholder="Enter your message here..." @bind="_newMessage" />
+ <input type="text" class="form-control" placeholder="Enter your message here..." @bind="newMessage" />
  </div>
  <div class="col-md-3">
  <button type="button" class="btn btn-primary btn-block" @onclick="AddChatMessageAsync">Send</button>
@@ -12,11 +12,16 @@
 </form>
 
 @code {
- private string _newMessage = null;
+ private string newMessage = null;
 
- private async Task AddChatMessageAsync()
+ private async Task AddChatMessageAsync(MouseEventArgs e)
  {
- await ChatMessageRepository.AddChatMessageAsync(new ChatMessage { Time = DateTime.Now, From = "Blazor", Text = _newMessage });
- _newMessage = null;
+ await ChatMessageRepository.AddChatMessageAsync(new ChatMessage
+ {
+ Time = DateTime.Now,
+ From = "Blazor",
+ Text = newMessage
+ });
+ newMessage = null;
  }
 }

src/blazor/BlazorChatApp/Shared/NewChatMessage.razor

@@ -2,6 +2,7 @@
 @using System.Net.Http
 @using Microsoft.AspNetCore.Components.Forms
 @using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
 @using Microsoft.JSInterop
 @using BlazorChatApp
 @using BlazorChatApp.Core