HOWTO Add Blazor to existing ASP.NET Core app.

Question

User-2022643801 posted

Please help,

Given VS2017, and an existing ASP.NET Core app, how can one add a Blazor (0.5.0) page to it?

And to clarify, I am referring to client side C# from the WebAssembly.

Also, how can one add a Blazor page to a ASP.NET app that is not .NET Core?

Answer 1

User-821857111 posted

how can one add a Blazor page to a ASP.NET app that is not .NET Core?

I don't think you can do that. Blazor requires ASP.NET Core. It runs in a completely different process to non-core applications. You could maybe use an iframe to include the output of the Blazor app in the pre-Core application.

Given VS2017, and an existing ASP.NET Core app, how can one add a Blazor (0.5.0) page to it?

Seems that someone has got this going to some extent: https://github.com/aspnet/Blazor/issues/1069

Answer 2

User1526051739 posted

 hello,

please refer https://marketplace.visualstudio.com/items?itemName=aspnet.blazor for  install blazor in vs2017. 

you can create new asp.net core app with blazor but can't create in existing asp.net core with mvc or web app.

Answer 3

User-474980206 posted

a blazer app is a separate project. its build and compiled separate from an asp.net core app. the asp.net core app is just to host the compiled blazor files and serve as a webapi.

if you create a new blazer project, you will get a solution with three projects. a blazer project, a shared .netstandard 2.0 project (to share code & POC's), and an asp.net core project. currently there is no add blazer to existing project. you should create the new project. copy the blazer project to where you want it, and add to your current asp.net core solution. then look in the new blazer asp.net core project file for the blazer component it uses, and add to your asp.net core project. then add the blazer startup code support (this is really nothing but a static file handler that knows how blazer projects are built)

a client blazer project from the hosting point of view, is a html file, a javascript file and a mono based webassembly that can load the blazer dlls built by the blazer project. the razor files in the blazor project are compiled to dll's that the web assembly can load.

also currently blazor is designed as a SPA. That is its the whole UI. You can add a blazor page to your existing site, but its more like a sub site. if you review the blazor html page, you can see it is like most javascript frameworks. there is an app div, some javascript source files, and some javascript code to load the web assembly and start the app. you could add this code to any html, or view page in your application.

Answer 4

User-2022643801 posted

Thanks for the reply, but I sincerely hope Blazor is not always and only meant to be in a separate app of its own.

Granted I understand Blazor is still being worked upon, but surely there must be a way to add a simple Hello World Blazor page to an existing app. And while I did ask for the existing app to be ASP.NET core, it would be great to add it to any app. Without the ability to add onto existing apps, Blazor is not going to be as accepted in the short term, albeit, I can understand people thinking, just add multiple apps to the same solution, but imagine an app that has a lot of GUI in it, where a business has invested a lot of time/money/resources to build that app.

Is there anyone I can talk/correspond to about Blazor?

Answer 5

User-821857111 posted

Is there anyone I can talk/correspond to about Blazor?

The GitHub repo. They would welcome discussion of potential use-cases. That's what helps drive their direction.

Answer 6

User-474980206 posted

Remember your client blazor client app code is a DLL that is downloaded to the client. Building standalone dll's is pretty much the job of a vs project. While a asp.net project could have a custom build step to build an embedded blazor project, the main project would need to ignore the blazor source file, etc. 

also blazor project is pretty complex, here is a very simple layout:

   myblazor.client
      /components
            -- razor components or pages go here *.cshtml
      /services
            appstate.cs
      /wwwroot
            index.html -- html page that hosts the blazor app
            /css -- static css files and images
      myblazor.client.proj -- blazor project file, supports references to other projects
      main.cshtml  -- the startup page
      program.cs   -- the blazor program
      startup.cs     
      _ViewImports.cshtml  -- imports for blazor razor pages / components 

when published, you get a /wwwroot with the static files and the blazor dll(s). this folder should be exposed by the hosting site as static files. 

it would be nice to have a VS template that built a npm / blazor project. to make integrating to an existing site simpler. 

to follow the progress of blazor see:

https://github.com/aspnet/Blazor

use the issues page to request features

 

Answer 7

User1289604957 posted

Hi,

You should use both Visual Studio and <g class="gr_ gr_38 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling" id="38" data-gr-id="38">dotnet</g> <g class="gr_ gr_62 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="62" data-gr-id="62">cli</g> to do it : https://chrissainty.com/creating-blazor-component-libraries/

Best Regards,

Maher