Blazor Full-Stack Web App UI Option

[hikalkan]

We will work on this in this milestone to see if we can create an option on new solution creation.

[khalilsheikh]

feature will also include authentication razor pages (login, forgot password etc.) into blazor project ?

[hikalkan]

feature will also include authentication razor pages (login, forgot password etc.) into blazor project ?

We think to reuse the account module. So, it includes all these.

[bxjg1987]

It seems that the blazer web app can replace the previous mvc/blazer server/assembly. Should those templates still be retained.

[sturlath]

Can you try to stick with SSR as much as possible and try out something like HTMX instead of doing interactive server rendering mode (needing socket/SignalR)? Fast and scalable should be the goal.

[maliming]

I started to study this new feature today.

[bxjg1987]

I started to study this new feature today.

Would you consider the coexistence of server and auto rendering modes.

In this way, within the same project, some pages or components are allowed to run in server rendering mode, while others run in auto mode.

Reference: https://www.cnblogs.com/jionsoft/p/17880805.html http://zlj.cqyuzuji.com:19911/ https://www.bilibili.com/video/BV1Me411z7eN/?spm_id_from=333.337.search-card.all.click

[gdunit]

@maliming I made an initial attempt at doing this to see what it might look like, starting from the Blazor Server template then modifying it to a Blazor web app per the Microsoft upgrade instructions.

My use case is to use SSR for the initial load, then switch to WASM for most components once that runtime is loaded.

I only got part-way so far but here is what I learned, in case it helps you:

• Created new projects to replace any server component packages (I named them BlazorWeb / Blazor.Web), mostly the changes were just to the naming of the elements in the projects:
  • Volo.Abp.AspNetCore.Components.BlazorWeb
  • Volo.Abp.AspNetCore.Components.BlazorWeb.Theming
  • Volo.Abp.AspNetCore.Components.BlazorWeb.BasicTheme
  • Volo.Abp.FeatureManagement.BlazorWeb
  • Volo.Abp.Identity.Blazor.Web
  • Volo.Abp.PermissionManagement.Blazor.Web
  • Volo.Abp.SettingManagement.Blazor.Web
  • Volo.Abp.TenantManagement.Blazor.Web
• Set up a new *.Blazor.Client project for the WASM components (only a basic test component so far)
• The script/style bundling tag helpers won't work in the server project's new App.razor file because it's not an MVC view as _Host.cshtml was. Equally, the WebAssembly CLI bundling wouldn't be suitable. My thoughts were to create a new Blazor component embedded in App.razor which would perform the bundling on initalization of the component. I have not attempted this yet.
• The new Blazor project type seems to require that routable components in referenced assemblies are explicitly added in the app.MapRazorComponents() ... .AddAdditionalAssemblies() call otherwise the pages cannot be found by the router. I created a helper method which detects all assemblies with routable components, passing this to the AddAdditionalAssemblies(), and this seems to work. I used the approach discussed here to find routable components: Find WebAssembly Routable Components.
• The render mode of the in-built components ( e.g. UserManagement.razor) is defaulted to SSR, which means that they won't work as there is no interactivity. This can be overcome by setting the render mode against the HeadOutlet and Routes components within the App.razor file. However there is a pretty big downside - per the documents you cannot then set a different interactive render mode to child components, which would mean you would not be able to use WASM for any children (indeed I tried it and it doesn't work). So it seems there would need to be a different way to apply an interactive render mode to the in-built components that the developer could control according to their preference.

Apart from the above, so far, it seems to work - although it is just a basic test.

Happy to provide more information if it helps at all.

[maliming]

Thank you very much @gdunit
Your information is very helpful.

[johnnypea]

@gdunit thanks for sharing your approach. Do you have any working examples?

[gdunit]

@johnnypea I'll find some time to pull out what I've done and put up a repo. It's messy and not fully working, but hopefully gives a starting point.

[gdunit]

@johnnypea So here you go: Repo link

I did a lot of experimenting so please expect things to be quite untidy. It is by no means finished, I stopped work as I know there is an officially supported version coming in 8.2.

On the home page, you will see a link to the counter component. This initialises using SSR but then moves to WASM, there is an element in the UI that shows the transition.

Issues:

• I am not clear on how you could set render mode for routable components (pages) that come from an external package, as is the case with tenantmanagement for example. Therefore, the externally imported pages (e.g. tenantmanagement) are rendered via default SSR and do not work properly. This can be overcome if you set the render mode against the and components, which I did not want to do as it would be too limiting; it would prevent any child component using a different interactive mode.
• I had to override the MainLayout and explicitly set render modes for components within that - otherwise the menus would not be interactive (again, SSR rendering). Note that render modes can't be set against a layout per se.

Interested to hear any thoughts or feedback.

[diegompimenta]

Hi guys! Thanks for all your work on this and congratulations for this progress! @johnnypea @hikalkan @maliming One question, Abp on this template will support sharing access token between a page SSR and a form component in Wasm? Example: I have a page SSR with the user logged in and just one form in WASM. When i submit this form the user will create a product posting on API right? How it will work to map the API on this template? The token of user authenticated is on the site/ssr. How it will work? It makes sense or the context for SSR and WASM will be separated? How the application will handle authentication and token between these different contexts/modes? Thanks again!

[maliming]

hi

One question, Abp on this template will support sharing access token between a page SSR and a form component in Wasm?

Yes.

https://github.com/abpframework/abp/blob/blazor-full-stack-web-ui/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.WebApp.Tiered/Components/App.razor#L65-L94

https://github.com/abpframework/abp/blob/blazor-full-stack-web-ui/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Blazor.WebApp.Tiered.Client/MyProjectNameBlazorClientModule.cs#L81C26-L81C55

https://github.com/abpframework/abp/blob/blazor-full-stack-web-ui/framework/src/Volo.Abp.AspNetCore.Components.WebAssembly/Volo/Abp/AspNetCore/Components/WebAssembly/WebApp/PersistentComponentStateAbpAccessTokenProvider.cs#L7-L32