How should I add a Blazor UI to an existing .NET Core API?

Question

We have a .NET Core product with an API that we want to create a UI for. We've decided to switch from React (which we've used on other projects) to Blazor because our team all knows C# and only one person knows React/JS.

I've done some initial learning on Blazor and now I'm trying to figure out how to add server-side Blazor to the existing API. We want the UI and API to be in the same solution and running on the same server. My initial feeling is that they should be in separate projects in the solution so that the API and UI code aren't intermingled.

External apps use the API to put data into the database and the UI will be used internally for accessing and modifying the data. I think it makes more sense for the UI to be able to make calls directly to the domain logic without having to go through the API.

My initial roadblock is how do I create two projects in a solution and have one handle all the calls to example.com/api and the other handle all the calls to example.com/ui?

(Disclosure: I've been a programmer for decades but this API project was my first web API. I learned ASP.NET Core as I went so my knowledge is superficial.)

Answer 1

you probably want the new blazor web app template. this creates a server webapi project and a client blazor project. for server side blazor, the server project references the blazor client project. at build the blazor client output is copied to the webapi output, to make a single deployment.

just create a template project, then copy the client project to where you want it. then make the simple project and program.cs changes to the webapi project file.

using server blazor will require more resources on your server. each user will have a dedicated signal/r connection to the server. each connection will have a blazor app instance running on the server. also as every registered browser event needs to sent to the server via signal/r it can be very chatty.

while blazor supports file uploads, they are slow and limited in size (as the signal/r connection is used). you get better performance from jsinterop and a webapi endpoint.

note: blazor is architected very similar to classic react, using class objects instances rather than pure functions. the state management is similar to props (only attributed class properties are used instead of an array) and triggering state changed. there is the equivalent mount/unmount events to the render tree.