Apr 29

Written by: Michael Washington
4/29/2019 4:28 PM  RssIcon

image

In this article we will compare the structure and the differences between the client side version of the Blazor Blazing Pizza example and the server side version.

Client Side Blazor and Server Side Blazor

image

Blazor can run either as a client application or…

image

…completely as a server application (with a thin layer of JavaScript to generate the UI (User Interface) and to respond to events).

The primary difference is that the server side version of Blazor renders everything on the server. While this can provide for faster application start up (the user does not need to download all the code to their web browser), it has to manage a lot of traffic between the web browser and the server.

The client side version of Blazor runs using web assembly. This requires a lot less server resources (or none at all), and can perform non network functionality if the user loses their internet connection.

The development and debugging experience is a lot easier with the server side version of Blazor and rendering all the code on the server supports scenarios that might otherwise be limited due to sandbox security issues with code that runs in the web browser.

 

The Application

image

The Blazing Pizza application, originally created by Blazor creator Steve Sanderson (with commits by Ryan Nowak and Dan Roth), allows users to log in using a Twitter account (this is required to place an order).

image

The application allows users to configure pizzas and place orders.

image

It saves and tracks the orders in an internal SQLite database.

image

It also simulates showing the order being delivered using a map with animations.

Steve Sanderson confirms that it uses Drone Delivery Smile

 

Upgrade Blazor

image

This is the link to the original version of Blazing Pizza (.Net Core 2.0 Client Side).

The following versions:

Upgraded the original version (that was written in .Net Core 2.0) using the directions here:

ASP.NET Core updates in .NET Core 3.0 Preview 4

image

(The following is copied from the post by Daniel Roth):

To upgrade an existing ASP.NET Core 3.0 Preview 3 project to Preview 4:

  • Update Microsoft.AspNetCore.* package references to 3.0.0-preview4-19216-03
  • In Razor Components apps (i.e. server-side Blazor apps) rename _ViewImports.cshtml to _Imports.razor for Razor imports that should apply to Razor components.
  • In Razor Component apps, in your Index.cshtml file, change the <script> tag that references components.server.js so that it references blazor.server.js instead.
  • Remove any use of the _RazorComponentInclude property in your project file and rename and component files using the .cshtml file extension to use the .razor file extension instead.
  • Remove package references to Microsoft.AspNetCore.Components.Server.
  • Replace calls to AddRazorComponents in Startup.ConfigureServices with AddServerSideBlazor.
  • Replace calls to MapComponentHub<TComponent> with MapBlazorHub.
  • Remove any use of the Microsoft.AspNetCore.Components.Services namespace and replace with Microsoft.AspNetCore.Components as required.
  • In Razor Component apps, rename the host Razor Page from Index.cshtml to _Host.cshtmlreplace the {*clientPath} route in the host page with “/”.
  • Update any call to UseRouting in your Startup.Configure method to move the route mapping logic into a call to UseEndpoints at the point where you want the endpoints to be executed. Add a call to MapFallbackToPage("_Host") in UseEndpoints.

 

Looking At The Client Side Version Of Blazing Pizza

image

The Blazing Pizza (.Net Core 3.0 Preview 4 Client Side) version closely resembles the original Blazing Pizza (.Net Core 2.0 Client Side).

This version, created by @SQL-MisterMagoo, shows all of the changes required in a single GitHub commit at this link.

The major changes are as follows:

 

Looking At The Server Side Version Of Blazing Pizza

image

The primary difference between the structure of the Client Side version and the Server Side version is that the BlazingPizza.Client and BlazingPizza.Server projects are merged into the single BlazingPizza project.

The BlazingPizza project is simply a .Net Core web application that references the other projects (BlazingComponents, BlazingPizza.ComponentsLibrary, and BlazingPizza.Shared) that are virtually identical to the migrated Client Side Blazor versions.

image

The server side project contains some additional configuration changes such as using the _Host.cshtml page as the starting page of the application (rather than the index.html page).

(Also, the _Host.cshtml page now contains JavaScript methods that should have come over as embedded resources from the BlazingPizza.ComponentsLibrary project but that did not seem to work).

 

Links

Blazor.net

Get started with Blazor

Blazing Pizza (.Net Core 2.0 Client Side) (original version)

Blazing Pizza (.Net Core 3.0 Preview 4 Server Side) (@ADefWebserver)

Blazing Pizza (.Net Core 3.0 Preview 4 Client Side) (@SQL-MisterMagoo)

Tags: Blazor
Categories:

2 comment(s) so far...


Gravatar

Re: Migrating Blazing Pizza (server side Blazor and client side Blazor)

Hi Michael,

thank you for your great work, Your samples helped me quite a lot. Will there be an update to preview 6 ?
I am rather new to web programming. Coming from winforms I found Blazor enabling me to get into web rather easily. But there is a lot to learn. I also have to convert a legacy Silverlight app and this seems the way to go after struggling with angular for some time. For the next time I will stick to SSB.
It would be great, if you also could provide an authentication / authorization sample for SSB using EF but maybe dapper with a custom user db. Using authorization with the templates is easy, but there is too much hidden. We cannot go that path as we have to use our legacy user db which is also used by our winforms app. I am sure that there are a lot of other people - especially those coming from winforms - who have the same problem.

Thanks

regards

Uwe

By Uwe on   6/16/2019 5:20 AM
Gravatar

Re: Migrating Blazing Pizza (server side Blazor and client side Blazor)

@Uwe - I will post more in the future, however, for now the best thing to look at for Authentication/Authorization is: https://github.com/dotnet-presentations/blazor-workshop/blob/master/docs/06-authentication-and-authorization.md

By Michael Washington on   6/16/2019 5:21 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 
Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation