App template: Server Rendered Blazor Tailwind App with Vue

Blazor
1

Hi,

Am quite new to Blazor and was wondering what the differences are with the .razor files in the Client project and the .razor files in the asp.net project? What should determine where I create new .razor files?

And if I have a service (that listens to server events coming from servicestack) that I need to use in both the asp.net host and the client project, would I need to add it to the DI container twice, once in the Program.cs in both projects?

2

Can you link to the project template you’re using and anything else you’re referring to like the Client project.

All .NET Templates are located at: https://github.com/NetCoreTemplates

3

We used the getting started feature on your website, but I think this is the template…

4

OK that’s confusing, you’re referring Blazor Server Rendered with Vue but the Blazor Vue project is statically rendered, Blazor Server is server rendered and Blazor WASM is for client rendered Apps with WASM.

So the MyApp.Client is for Blazor Components you want rendered with WASM and fallback rendered by Blazor Server. It should only include components that can run in the Browser with WASM. Since you’re using Blazor WASM most of your components should be placed in here first, but when you use features that don’t work in Blazor WASM they’ll need to be added in MyApp/Components where they’ll only be rendered by Blazor Server.

The ServerEventsFeature is a Server Plugin that should only be registered in the MyApp (server) project.

The ServerEventsClient hasn’t been tested in Blazor WASM so it’s not clear it will work. But there wouldn’t be anything registered in the IOC, you’d just use the ServerEventsClient class directly. But in general you should only use features that have explicit support for Blazor WASM. E.g. the BlazorApiClient needed special support to work in WASM.

5

Ok, thanks, that helps. I guess I got confused with the template project - we created the app a few months back

So I guess I’d be best using vue for listening to and reacting to the server events?
I’m basically using sqldependency to monitor changes to a sql server record (only one record in the table) and I want changes to the record to be automatically updated on the blazor front-end.

6

Yeah if you definitely need to use Server Events I’d use the blazor-vue project where most of your App can still be created and statically rendered in Blazor whilst your interactive features can be implemented in Vue.

You’ll also have access to the full Vue Component Gallery and the TypeScript ServerEvents Client.

1 Like