Home
%3CLINGO-SUB%20id%3D%22lingo-sub-685222%22%20slang%3D%22en-US%22%3ELet's%20develop%20Blazor%20apps%20on%20Linux%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-685222%22%20slang%3D%22en-US%22%3E%3CP%3EBlazor%20is%20one%20of%20fantastic%20technologies%20I%20think.%3C%2FP%3E%0A%3CP%3EIt%20will%20be%20shipped%20a%20part%20of%20.NET%20Core%203.0.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EIt%20can%20build%20client%20side%20web%20apps%20using%20C%23%2C%20however%20it%20run%20on%20web%20standard%20like%20HTML%2C%20CSS%2C%20JavaScript%2C%20WebAssembly%20and%20more.%20I%20remembered%20Silverlight%20that%20has%20similar%20development%20experience%2C%20I%20liked%20it%2C%20but%20Blazor%20is%20different%20that%20is%20using%20100%25%20open%20web%20standard%20technologies.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThere%20are%20two%20different%20models%3A%3C%2FP%3E%0A%3COL%3E%0A%3CLI%3EServer-side%20Blazor%3CBR%20%2F%3EThis%20runs%20on%20server-side%20through%20SignalR.%3C%2FLI%3E%0A%3CLI%3EClient-side%20Blazor%3CBR%20%2F%3EThis%20runs%20on%20browser%20using%20WebAssembly.%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CP%3EHowever%2C%20you%20can%20create%20apps%20on%20same%20programming%20model.%3C%2FP%3E%0A%3CP%3EOf%20course%2C%20it%20is%20.NET%20Core%2C%20so%20you%20can%20create%20Blazor%20apps%20on%20Linux%20too.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CFONT%20size%3D%225%22%3E%3CSTRONG%3ECreate%20a%20Hello%20world%20app%20on%20Linux%3C%2FSTRONG%3E%3C%2FFONT%3E%3C%2FP%3E%0A%3CP%3EI%20have%20an%20Ubuntu%20VM%20on%20Azure%2C%20and%20I%20have%20been%20using%20the%20environments%20using%20Visual%20Studio%20Code%20Remote%20Development%20feature.%20It's%20really%20cool!!%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ENOTE%3A%20.NET%20Core%203.0%20is%20still%20preview.%20Please%20install%20.NET%20Core%203.0%20from%20%3CA%20href%3D%22https%3A%2F%2Fdotnet.microsoft.com%2Fdownload%2Fdotnet-core%2F3.0%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehere%3C%2FA%3E.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ELet's%20create%20a%20project%20using%20following%20command%3A%3C%2FP%3E%0A%3CPRE%3E%24%20dotnet%20new%20blazor%20-o%20BlazorHelloWorld%3C%2FPRE%3E%0A%3CP%3EThe%20command%20is%20to%20create%20a%20server-side%20blazor%20app.(In%20document%2C%20dotnet%20new%20blazor%20is%20a%20client-side%20blazor%20project%20template.%20However%2C%20in%20my%20case%2C%20it%20was%20created%20a%20server-side%20blazor%20project.)%3C%2FP%3E%0A%3CP%3EAnd%20please%20type%20dotnet%20run!!%3C%2FP%3E%0A%3CPRE%3E%24%20dotnet%20run%3C%2FPRE%3E%0A%3CP%3EYou%20can%20look%20the%20app%20from%20https%3A%2F%2Flocalhost%3A5001.%20When%20using%20Visual%20Studio%20Code%20Remote%20Development%2C%20please%20add%20FORWARDED%20PORTS%20setting%2C%20like%20following%3A%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20655px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F117842i5DBF8F463FC21007%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-12%20114359.jpg%22%20title%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-12%20114359.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EAfter%20access%20the%20address%2C%20you%20can%20see%20an%20app%20like%20below%3A%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20823px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F117843i586FE1726F6988B9%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-12%20114720.jpg%22%20title%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-12%20114720.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%3CFONT%20size%3D%224%22%3E%3CSTRONG%3ELooking%20around%3C%2FSTRONG%3E%3C%2FFONT%3E%3C%2FP%3E%0A%3CP%3EWhen%20displaying%20the%20app%2C%20there%20are%20few%20messages%20on%20Debugging%20tool%20of%20Web%20Browser.(I'm%20using%20Edge%20preview.)%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20714px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F117846iB0E80C1391B312F3%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-12%20115125.jpg%22%20title%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-12%20115125.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EIt%20means%20the%20app%20is%20connecting%20to%20a%20server%20using%20WebSocket%20of%20SignalR.%3C%2FP%3E%0A%3CP%3EAnd%20you%20will%20find%20WebSocket%20connection%20on%20the%20Network%20tab%20that%20name%20is%20_blazor%3Fid%3Dxxxxxx.%20If%20you%20selected%20it%2C%20then%20you%20would%20see%20many%20binary%20messages.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20723px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F117847iE8B754040E622307%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-12%20120120.jpg%22%20title%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-12%20120120.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EServer-side%20blazor%20is%20running%20on%20server%20side%2C%20it%20means%20the%20app%20manages%20many%20information%20for%20client%20like%20DOM%20tree%2C%20state%2C%20etc...%3C%2FP%3E%0A%3CP%3EWeb%20browser%20is%20just%20to%20render%20and%20communicate%20to%20the%20server.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CFONT%20size%3D%225%22%3E%3CSTRONG%3EDeploy%20to%20azure%3C%2FSTRONG%3E%3C%2FFONT%3E%3C%2FP%3E%0A%3CP%3EYou%20can%20deploy%20the%20app%20to%20Azure%20Web%20app%20on%20Linux(Of%20course%2C%20you%20can%20also%20deploy%20Azure%20Web%20app%20on%20Windows.)%3C%2FP%3E%0A%3CP%3ELet's%20create%20Web%20app%20on%20Linux%20with%20Free%20plan.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20748px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F117848i7BBA53D617FA8C83%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-12%20123046.jpg%22%20title%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-12%20123046.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EAnd%20create%20a%20package%20to%20deploy%20the%20Web%20app%20using%20following%20command%3A%3C%2FP%3E%0A%3CPRE%3E%24%20dotnet%20publish%20-c%20Release%20--self-contained%20-r%20linux-x64%0A%24%20cd%20bin%2FRelease%2Fnetcoreapp3.0%2Flinux-x64%2Fpublish%0A%24%20zip%20-r%20app.zip%20.%3C%2FPRE%3E%0A%3CP%3EAfter%20creating%20a%20zip%20package%2C%20you%20can%20deploy%20the%20app%20to%20azure%20using%20Azure%20CLI!%3C%2FP%3E%0A%3CPRE%3E%24%20az%20webapp%20deployment%20source%20config-zip%20--resource-group%20%26lt%3Byour%20resource%20group%20name%26gt%3B%20--name%20%26lt%3Byour%20web%20app%20name%26gt%3B--src%20app.zip%3C%2FPRE%3E%0A%3CP%3EAfter%20that%2C%20set%20%22dotnet%20YourProjectName.dll%22%20to%20%3CYOUR%20web%3D%22%22%20app%3D%22%22%3E%20-%26gt%3B%20Configuration%20-%26gt%3B%20General%20settings%20-%26gt%3B%20Startup%20Command.%3C%2FYOUR%3E%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20811px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F117853i59E76436AB8B7BAB%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-12%20130009.jpg%22%20title%3D%22%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%202019-06-12%20130009.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3ECongrats!!%20The%20Blazor%20app%20works%20on%20App%20Service%20on%20Linux.%20But%20unfortunately%2C%20WebSocket(SignalR)%20is%20unavairable.%20There%20are%20many%20http%20requests.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20820px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F117854i20F58E007A392C1D%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22blazorlinux.gif%22%20title%3D%22blazorlinux.gif%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EIf%20you%20want%20to%20use%20WebSocket%2C%20an%20easy%20way%20is%20to%20use%20Azure%20Web%20app%20on%20Windows.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CFONT%20size%3D%225%22%3E%3CSTRONG%3EWrap%20up%3C%2FSTRONG%3E%3C%2FFONT%3E%3C%2FP%3E%0A%3CP%3EBlazor%20is%20really%20powerful%20technology%20to%20build%20Single%20Page%20Applications!%20It%20will%20be%20released%20a%20part%20of%20.NET%20Core%203.0%20at%20Sep%202019.%3C%2FP%3E%0A%3CP%3EIt%20works%20on%20web%20standard%20technologies(not%20plugin).%26nbsp%3B%3C%2FP%3E%0A%3CP%3EClient-side%20blazor%20is%20not%20in%20this%20article%2C%20but%20you%20can%20try%20it%20and%20deploy%20to%20everywhere.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EThe%20following%20link%20is%20official%20documentation%20of%20Blazor.%20If%20you%20feel%20Blazor%20is%20interesting%2C%20then%20please%20read%20it.%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Faspnet%2Fcore%2Fblazor%2F%3Fview%3Daspnetcore-3.0%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Faspnet%2Fcore%2Fblazor%2F%3Fview%3Daspnetcore-3.0%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Microsoft

Blazor is one of fantastic technologies I think.

It will be shipped a part of .NET Core 3.0.

 

It can build client side web apps using C#, however it run on web standard like HTML, CSS, JavaScript, WebAssembly and more. I remembered Silverlight that has similar development experience, I liked it, but Blazor is different that is using 100% open web standard technologies.

 

There are two different models:

  1. Server-side Blazor
    This runs on server-side through SignalR.
  2. Client-side Blazor
    This runs on browser using WebAssembly.

However, you can create apps on same programming model.

Of course, it is .NET Core, so you can create Blazor apps on Linux too.

 

Create a Hello world app on Linux

I have an Ubuntu VM on Azure, and I have been using the environments using Visual Studio Code Remote Development feature. It's really cool!!

 

NOTE: .NET Core 3.0 is still preview. Please install .NET Core 3.0 from here.

 

Let's create a project using following command:

$ dotnet new blazor -o BlazorHelloWorld

The command is to create a server-side blazor app.(In document, dotnet new blazor is a client-side blazor project template. However, in my case, it was created a server-side blazor project.)

And please type dotnet run!!

$ dotnet run

You can look the app from https://localhost:5001. When using Visual Studio Code Remote Development, please add FORWARDED PORTS setting, like following:

コメント 2019-06-12 114359.jpg

After access the address, you can see an app like below:

コメント 2019-06-12 114720.jpg

Looking around

When displaying the app, there are few messages on Debugging tool of Web Browser.(I'm using Edge preview.)

コメント 2019-06-12 115125.jpg

It means the app is connecting to a server using WebSocket of SignalR.

And you will find WebSocket connection on the Network tab that name is _blazor?id=xxxxxx. If you selected it, then you would see many binary messages.

コメント 2019-06-12 120120.jpg

Server-side blazor is running on server side, it means the app manages many information for client like DOM tree, state, etc...

Web browser is just to render and communicate to the server.

 

Deploy to azure

You can deploy the app to Azure Web app on Linux(Of course, you can also deploy Azure Web app on Windows.)

Let's create Web app on Linux with Free plan.

コメント 2019-06-12 123046.jpg

And create a package to deploy the Web app using following command:

$ dotnet publish -c Release --self-contained -r linux-x64
$ cd bin/Release/netcoreapp3.0/linux-x64/publish
$ zip -r app.zip .

After creating a zip package, you can deploy the app to azure using Azure CLI!

$ az webapp deployment source config-zip --resource-group <your resource group name> --name <your web app name>--src app.zip

After that, set "dotnet YourProjectName.dll" to <your web app> -> Configuration -> General settings -> Startup Command.

コメント 2019-06-12 130009.jpg

Congrats!! The Blazor app works on App Service on Linux. But unfortunately, WebSocket(SignalR) is unavairable. There are many http requests.

blazorlinux.gif

If you want to use WebSocket, an easy way is to use Azure Web app on Windows.

 

Wrap up

Blazor is really powerful technology to build Single Page Applications! It will be released a part of .NET Core 3.0 at Sep 2019.

It works on web standard technologies(not plugin). 

Client-side blazor is not in this article, but you can try it and deploy to everywhere.

 

The following link is official documentation of Blazor. If you feel Blazor is interesting, then please read it.

https://docs.microsoft.com/en-us/aspnet/core/blazor/?view=aspnetcore-3.0