Abp: SPA template using Blazor

[hitaspdotnet]

What Blazor is: An experimental .NET web framework using C#/Razor and HTML that runs in the browser via WebAssembly

• see: https://github.com/aspnet/Blazor

Resources:

• Blazor project website
• Steve Sanderson's demo at NDC Minnesota (Video)
• A collection of awesome Blazor resources

Blazor in action:

https://blazor-demo.github.io/

[hikalkan]

I like the idea behind Blazor. Will work on that template. Thank you for your suggestion.

[bbakermmc]

Everyone would love to not use JS :P I haven't been following it too closely other than its hit v .5 last week I think. But we know MS tends to issue breaking changes a lot so that's the only gotcha with the early life cycle stuff Just look at .net core.

[hitaspdotnet]

@bbakermmc Right. I tried Blazor using GraphQL as server-side query language that was amazing and is made building UX/UI for our modular app very very very simple.

@hikalkan Sir, are you haven't plan to start GraphQL integration? #86
I can help in building modules schema. I'm only waiting for integration.

[hikalkan]

We are not starting GraphQL is the next weeks. But we will work on soon (probably in ~2 months).

[bbakermmc]

Personally I dont see the huge reason for GraphQL, especially if you go with ServerSide Rending in Blazor. How do you throttle GraphQL, does it check permissions to see if the user has access to the table? Why does someone need to query the data? Sure maybe it makes front-end developers jobs slightly easier but they should learn how to do it properly, this is just another abstraction like EF which could generate horrid sql once you get into complex scenarios.

[hitaspdotnet]

@bbakermmc GraphQL is not any specific framework or database query language but rather a specification that describes the capabilities and requirements of data models in client‐server applications.
You can use Application/Domain services + Repositories as GraphQL objects for building schemas. Each module can have own schema at own endpoint.
For example, when you need a list of your store categories and their products and reviews and balabalabala with REST API you need to create the request for each data you needed, but this can be done easily with one request in single line code!! This not useful for multi clients applications?
You can see GraphQL in action on Facebook Mobile UserProfile page. All data of a user (pages, friends, videos, books, places, ....) comes with a single query and a single parameter UserID.

does it check permissions to see if the user has access to the table?

you can add this by design or using available libraries like this

[bbakermmc]

For example, when you need a list of your store categories and their products and reviews and balabalabala with REST API you need to create the request for each data you needed, but this can be done easily with one request in single line code!! This not useful for multi clients applications?

And this is what I would say is bad, the exact reason applies to EF also. It may not always generate the best/optimized query plan for the data. Sure it makes your life easy because you just deal with models, but it doesn't mean it generates proper response. And why not just make an endpoint that returns what you need. Why do I need to send back "everything". A product could have 1000000 reviews, hmm sending that back is bad. Also wouldnt this in return issue multiple SQL calls? 1x per object per repo? So in the end it didnt really save performance, not really, the db still has to issue 6 queries.

Not saying GraphQL isnt fine, but it has its place, and I dont see it taking over, its just another abstraction that I personally dont want to deal with :p Like I said its basically and ORM for the front end like EF. So now we need two ORMs lol? Its just a way for client side folks to get data w/out having to go to the DB people just like EF/ORMS are the same thing for the server side.

[hikalkan]

I didn't work with GraphQL yet, but read a lot.

Also wouldnt this in return issue multiple SQL calls? 1x per object per repo? So in the end it didnt really save performance, not really, the db still has to issue 6 queries.

This is one point I hesitate about. It would not be good to open entire database (or a subset model) to clients if they query unnecessary data which may lead to non optimized queries in the server side.
But it's also valid for REST. Client may perform many unnecessary API calls.

Anyway, as I said, I didn't work in practical. From my current understanding, we will provide a GraphQL endpoint for each module with their own schema/model. We will also provide full REST-style API for each module.

[bbakermmc]

@hikalkan Right, from my understanding it seems it needs to be tied to an IQueryable since its going to be doing its own "magic". REST isn't "better" by any regards, but you cant expose an IQueryable :p, you at-least know what will be sent back and can make better predictions. So in the SPA template you making to versions now, one REST and one GraphQL :)?

[hikalkan]

So in the SPA template you making to versions now, one REST and one GraphQL :)?

It'e very early for me to decide/answer that. I even don't know how to create Blazor template for ABP yet.

[hitaspdotnet]

@bbakermmc

this is what I would say is bad, the exact reason applies to EF also.

When a new technology is introduced, it certainly has its own fans and critics. Given the idea behind the vNext framework, the VOLO has been able to meet the needs of the majority of users. Professional users like you and novice users like me. The GrapgQL for users, who want to run their software on the cloud, has an easy and practical solution. I'm using GraphQL in my ZERO app at Web.Host layer with own controllers for calling my application methods at "myDomain.domainType/graphql" endpoint. That was useful for building my mobile app and my public website in angular.

[bbakermmc]

@hitaspdotnet Right. It just comes down to implementation and maintenance. If you want to use GraphQL why would you implement all the AppServices and REST stuff :p. I'm looking at it from a maintainability/performance standpoint.

Once you offer multiple choices on things maintaing the code becomes a nightmare. I assume youre not running, React, Angualar, MVC, and Blazor right? But if the vNext supports them all you now have to make sure each one is implemented correctly and then if you now say we will support REST and GraphQL now you multiplied the number of updates :p

Then you have security, well if its included as a package in the project but not used, its still potentially a "security" risk, just look at the NPM package hacks and stuff.

Maybe @hikalkan comes up with some super amazing UI to generate permissions per object per field, makes dtos, linked, objects, endpoints, and GraphQL would work great with it, then sure by all means just use GraphQL for the templates.

We see it now with AspNetZero where there are patches after a major release to fix things not caught.

Everyone is excited for vNext and we want the fancy new features.

[hitaspdotnet]

@hikalkan
Bootstrap 4 Components for Blazor Framework: https://github.com/chanan/BlazorStrap
Maintainable CSS with Blazor Framework: https://github.com/chanan/Blazorous

[hikalkan]

Seems a good framework: https://github.com/oqtane/oqtane.framework
Adding link here for a reference.

Also, see these UI component libraries:

• https://blazorstrap.io/
• https://blazorise.com/

[bkv143]

Do you have any date when Blazor UI template will be ready?

[hikalkan]

Do you have any date when Blazor UI template will be ready?

No date. This is an open source project :D

Our first goal to finalize the v1.0. Then we will prioritize other works.

[wocar]

Even without the template I’m sure we can make it work out of the box, at least on server side blazor

[hikalkan]

Sure, you can do it. It is appreciated if anyone creates an article / medium post about it :)

[vnetonline]

I am also very interested in creating a SPA using Blazor Server Side have been playing with Blazor in Preview 9 and it is really cool in a way it reminds me of the old ASP.NET 1.0 days.

I have made some progress just need to work out how to use OAuth and get a token from ABP I have tried using connect/token but it is not working for me

Any ideas which oAuth library I should use ?

[hikalkan]

@mehmet-erim which library you've used for the Angular UI?

[mehmet-erim]

We have used angular-oauth2-oidc

[bkv143]

+1 for Blazor SPA template

[KevinFarrow]

Some interesting sessions at the .Net Conf. next week (as well as the official release of Core 3.0)
https://www.dotnetconf.net/

Day 1: Building Full-stack C# Web Apps with Blazor in .NET Core 3.0 - 12:30 (PDT) | 19:30 (UTC)

Day 2: The Future of Blazor on the Client - 09:30 (PDT) \ 16:30 (UTC)
Day 2: Blazor and Azure Functions for Serverless Websites - 10:00 (PDT) \ 17:00 (UTC)
Day 2: An Introduction to GraphQL in .NET Core - 20:00 (PDT) | 03:00 (UTC)

Day 3: ASP.NET Razor: Into the Razor'verse - 09:30 (PDT) | 16:30 (UTC)

[cld0815]

+1 for Blazor SPA template

[xandervdm]

+1 for Blazor SPA template. Don't initially need any additional theming or 3rd party templates as the main 3rd party component vendors like SyncFusion, DevExpress, Telerik, etc are building great Blazor component libraries. The main thing to get is a sample Blazor app with integrated security into ABP to use as a starting point.

[halybang]

+1 for Blazor SPA template

[hikalkan]

Thank you all. We see that there is a great demand for the Blazor startup template.
👍

[panzhu]

+1 for Blazor SPA template

[KidoPlay]

+1 for Blazor SPA template

[realZhangChi]

+1 for Blazor SPA template

[qqzhw]

+1 for Blazor SPA template

[274188A]

+1 for Blazor SPA template

[bkv143]

Any news about Blazor SPA template?

[danielmeza]

I'm waiting for this to start migrate my project!

[LavenHook]

@hikalkan - I'm starting a new project that I would like to use this framework for. One other requirement for my project is that it needs to use Blazor. It seems the logical thing to do is at least start trying to incorporate Blazor by contributing to this project. If I head down this path, I will need a lot of guidance (I'm new to this framework and Blazor).
Should I just continue to use this issue to get guidance, or should we open another? Incorporating Blazor features doesn't specifically pertain to a new template.

[hikalkan]

Please open new issue(s) when you have problem on creating a Blazor UI.

[kbowma]

Any status on when we might see a Blazor template?

[LavenHook]

@kbowma, (also, @Webdiyer - RE: #1435)
I do have the very early stages of a Blazor module working in my fork of the Abp repository. It's not even to a point where I feel comfortable making a pull request yet. But it is at a point where you could branch my repo, compile the Volo.Abp.AspNetCore.Blazor project, add [DependsOn(AbpAspNetCoreBlazorModule)] to get rolling with a new Blazor-Abp based project. A word of caution though: the nature of RazorPages (and therefore the Abp theming mechanisms) conflict with Blazor - haven't quite gotten this aspect figured out yet.

I would love some feedback on where to go from here. I am in the process of trying to make a reasonable project plan (and creating corresponding tasks/issues) for myself.

Right now, the broad picture is for me to get a basic theming system worked out that can be used for a turn-key site. I would like to make more configuration options available (right now, it is pretty much only capable of a standard configuration). I would like to add a custom routing engine that can be used for multi-tenancy, and route prefixes (not possible without overriding the default Blazor router, from my understanding). Ultimately, all these things need to be done before a real Blazor template can be created - which is my end goal for my fork.

Let me know what you think. For the sake of keeping this issue & repository clean, start new issues on my fork, if you have any input.

[kbowma]

Would someone from Volosoft please confirm whether or not a Blazor template will be part of the commercial version, and maintain at the same level as Angular and MVC. (if so, any indication of timing would be helpful as well)

[hikalkan]

@kbowma yes, we will work on the Blazor template. Not only for the ABP Commercial, but also for the open source side. And we will maintain as we do for all official UI options.

Time? You know this is hard to answer. I can say that we will start to work on that in the February. It will get some time because we will also develop Blazor UIs for all pre-built modules.

[leonkosak]

So, Blazor UI would be just separated projects (.csproj) inside the same solution as API (backend) and therefore would deploy separately?
What about changing the hosting model (server, wasm) - official way would be relatively simple as I can see (just some configuration). Do you see that abp could add any additional complexity for some reason?

[274188A]

I suspect it's not that simple. It takes (given their limited resources) to push out a new Blazor template. Hopefully this will arrive in time for when WASM Blazor goes gets released. I've been saying from the out-set Blazor will eventually come to dominate SPA web apps - and I haven't seen a reason to change my opinion.

[bkv143]

@kbowma yes, we will work on the Blazor template. Not only for the ABP Commercial, but also for the open source side. And we will maintain as we do for all official UI options.

Time? You know this is hard to answer. I can say that we will start to work on that in the February. It will get some time because we will also develop Blazor UIs for all pre-built modules.

So, the Blazor UI development has been started? The task is not in any milestone yet and it is already March.

[ismcagdas]

Not yet

[hikalkan]

Actually, we have started to work on the gRPC integration (currently testing & creating an integration design), since we will use it with Blazor UI.

[leonkosak]

@hikalkan , @ismcagdas There is approx. 2 months till Blazor Wasm release date. I know that Blazor is one of the most desired "features", but I think that Blazor Wasm is the "mode" which are we waiting for (or most of us).

Maybe development after Blazor Wasm release is a better time to start developing Blazor UI.

[274188A]

Agree with Wasm being the best option. Don't see how starting now can be a disadvantage. The debugging is still to come for sure. The way forward is pretty clear though.

[leonkosak]

That's also true.

[xiety]

What about Blazor Server? It is very useful technology too.

[hikalkan]

I also agree that client side blazor is the real blazor :)
I also agree that it is good time to start on that. I see the demand and I am also very excited to start on that.

[274188A]

good timing! - Just announced

preview of template for IdentityServer to auth users and API calls -
https://docs.microsoft.com/en-us/aspnet/core/security/blazor/webassembly/hosted-with-identity-server?view=aspnetcore-3.1

https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-preview-2-release-now-available/

:-)

[mgochmuradov]

I have tried integrating Abp into Blazor Wasm, (Using HttpClient / Dynamic proxies).
Almost everything seems to be working as expected, the only error was with the Configuration part, as Blazor doesn't have platform support for Adding application.json. So I have to register IConfiguration manually so that AbpCore would not try to add file-based configurations (see this code).
Here is the resulted Wasm Program Code:

public static async Task Main(string[] args)
{
    var builder = WebAssemblyHostBuilder.CreateDefault(args);
    builder.RootComponents.Add<TemplateUiWebBlazorApp>("app");

    // Add Autofac
    var containerBuilder = new ContainerBuilder();
    builder.ConfigureContainer(new AbpAutofacServiceProviderFactory(containerBuilder));
    builder.Services.AddObjectAccessor(containerBuilder);

    builder.Services.AddBaseAddressHttpClient();

    // Need to register IConfiguration manually
    builder.Services.AddSingleton(typeof(IConfiguration), new ConfigurationBuilder().Build());
    builder.Services.AddApplication<TemplateUiWebBlazorModule>();

    await builder.Build().RunAsync();
}

[geffzhang]

https://github.com/ElderJames/ant-design-blazor

[realZhangChi]

https://github.com/ElderJames/ant-design-blazor

Is there an open source Blazor UI project for AdminLTE 3?

[leonkosak]

@hikalkan Does development of Blazor UI option already started?

[hikalkan]

@hikalkan Does development of Blazor UI option already started?

To be honest, we are not currently working on this, but it is still a very high priority waiting work.

[274188A]

To be honest, we are not currently working on this, but it is still a very high priority waiting work.

The Blazor UI Framework it is on the "Backlog", not on any current Milestone path. To use a colloquial - 'don't hold your breath'.

[geffzhang]

https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0-release-candidate-now-available/

[leonkosak]

Blazor WebAssembly first final version is out! 😎

[amarmechai]

@hikalkan When we get the first version of SPA template using Blazor?

[274188A]

there is no date...it is on the "Back Log". I have found Abp templates No-UI template has some friction when trying to using it with Blazor. Others have said similar. Very Javascript focused right now - maybe it will make available a new project template one day...

[ElderJames]

Welcome to try Ant Design Blazor - A set of enterprise-class UI components based on Ant Design and Blazor WebAssembly.

https://github.com/ant-design-blazor/ant-design-blazor

[tvddev]

Any update on this?

[hikalkan]

see https://blog.abp.io/abp/ABP-v2.8.0-Releases-%26-Road-Map (The Road Map) and https://docs.abp.io/en/abp/latest/Road-Map

[hikalkan]

Short answer: We planned to start to work on after v3.0 release, in the July.

[joe704la]

Something you may want to check out for help or a resource https://blazorboilerplate.com/

[leonkosak]

The page is unavailable.
GitHub project: https://github.com/enkodellc/blazorboilerplate

Oqtane (https://github.com/oqtane/oqtane.framework) is also becoming new rising star.

[tvddev]

Now that 3.0 is released, how is progress on Blazor?

[realLiangshiwei]

In the next few versions, we will be focused on the Blazor UI
https://github.com/abpframework/abp/blob/dev/docs/en/Blog-Posts/2020-07-01%20v3_0_Release/Post.md#about-the-next-versions

[tvddev]

@liangshiw Awesome! keep us updated on progress!

[ElderJames]

Hi @liangshiw , @hikalkan ,
I can contribute a startup template using Blazor WebAssembly, what else do I need to integrate?

[tvddev]

@liangshiw can you give us an update on blazor progress and timeline?

[geffzhang]

https://github.com/FlorianRappl/microfrontends-with-blazor-demos
https://github.com/FlorianRappl/Piral.Blazor

[hikalkan]

@ElderJames you can create a startup template with Blazor. That's not hard and it is appreciated if you can do it.
However, the planned work (for this issue) is much more. We will create a modular system, menu, toolbar, layout, theme... systems these are currently available for angular & mvc.

@tvddev to be honest, we haven't started this yet since we are busy on more essential and fundamental works for the framework and current modules and ui options. In addition, .NET 5 is coming and we also will prepare for it. So, we can't promise a time, unfortunately. However, Blazor UI is the highhest prioritiezed major feature for us.

[tvddev]

Thats disappointing. Maybe someone else will build one on top of abp.io

[kbowma]

Agree, this is very disappointing! Seems we are being strung along with promises to deliver. I have been waiting, and renewed my subscription, based on the statements that this would be a supported template, and would be started in July (after a long wait). If you are not going to work on this until .Net 5 is released, it would be nice to know that now.

[hikalkan]

If you are not going to work on this until .Net 5 is released, it would be nice to know that now.

I didn't say that. We will start before it. But don't know when it finishes. We will see the progress. (I suppose this is very nature for a software project, especially for an open source one).

[tvddev]

@hikalkan Well if at least you start there are lots here that will contribute, but you need to at least start. If not I guess someone else will and then there is more work to merge or it takes off in its own direction and you have to play catchup. I know some others like @elderjames and @mgochmuradov have started building framework onto of abp.io why not fork theirs and get a head start? It has been promised for a long time now!

[274188A]

expectations could have been better managed as shown by the growing frustration of some. however, we need to keep in mind that this is an open source project.

i would recommend making a small start and letting others helps out. this would of course require a certain amount of control to be relinquished...

[tvddev]

There are so many of the component parts already available it probably just needs "someone" to stitch them together for a template over the top of ABP.IO:
https://github.com/AdrienTorris/awesome-blazor
gRPC, authentication, PWA example, etc etc.

For commercial and even open source users just one theem which users can then modify as they see fit, and there are lots of existing UI tools eg Telerik, etc, so really just need to focus on core architecture covering admin, multi-tenancy, roles/permissions, how to incorporate other components easily, and manage upgrades.

[hikalkan]

We were planning to begin the Blazor UI with the 3.1 (this) milestone. However, we could not make it possible because of several reasons (we extended 4-weeks milestone to 6-weeks because of these reasons), but it is not important to discuss it now.
3.1 will be available in a short time (hopefully in this week) and we will begin to Blazor UI in the next (3.2) milestone. We will see the progress. I hope it goes fast & well. I am excited as much as you to have an official, fully functional, well tested and documented Blazor UI option.

[tvddev]

@hikalkan thankyou for the commitment to the community that support you. I look forward to seeing the first parts of blazor in v3.2.

[volethanh]

Hi @hikalkan, I:m also excited to the Blazor UI and also want to change current angular frontend to Blazor if it goes fast and well. Should we have a document that we can migrate from angular yo blazor UI ?

[hikalkan]

Should we have a document that we can migrate from angular to blazor UI ?

No, we don't plan such a guide. Angular and Blazor are independent and well documented frameworks. We will document what we added on top of these frameworks, but not more.

[hrx521]

People have been waiting for a long time, and the big guys are finally going to start building the Blazer UI. I hope I can make some contribution. I believe that there will be many and enthusiastic contributors

[tvddev]

I see there are now actual tickets for v3.2. Good news!

5009

[hikalkan]

Created a branch: https://github.com/abpframework/abp/tree/blazor-ui 😃
We'll make blazor-related stuff in this branch until the first usable version.
I will write under this issue if we need to inform the community about the progress.

[jhulbertpmn]

Created a branch: https://github.com/abpframework/abp/tree/blazor-ui 😃
We'll make blazor-related stuff in this branch until the first usable version.
I will write under this issue if we need to inform the community about the progress.

very exciting!

[hikalkan]

It goes well until now :)

• I could integrate to the ABP Framework core package, which provides modularity and other fundamentals.
• I could integrate with AutoFac.
• I make dynamic c# proxy system working, which is exciting! see https://twitter.com/hibrahimkalkan/status/1297604576309321737
• Could be able to login via current backend using the standard openid connect (authorization code flow).

I began by playing with the risky parts, and all fine for now.

If you want to try,

• Clone https://github.com/abpframework/abp/tree/blazor-ui
• Open in the Visual Studio latest
• Run DbMigrator first to create the database
• Run MyCompanyName.MyProjectName.HttpApi.HostWithIds as the server
• Run MyCompanyName.MyProjectName.Blazor

[Stirda]

I am blown away by https://twitter.com/hibrahimkalkan/status/1297604576309321737 So awesome.

[danielmeza]

@hikalkan So two excellent things has happen, you beat the most critical issues and fall in love with the power of c# in the browser! I hope this not stop and become Blazor in a first class citizen in the framework!

[wakuflair]

So glad that the leader of the ABP team has fun with ABP on Blazor. 😆

[274188A]

anyone got the branch https://github.com/abpframework/abp/tree/blazor-ui working?

[jhulbertpmn]

anyone got the branch https://github.com/abpframework/abp/tree/blazor-ui working?

I started working with it earlier and was running into some strange project dependency issues. I didn't have too much time to spend on it to see if it was an issue with my VM or something else, but I'm not quite up and running yet

[274188A]

i'm assuming we need to run the CLI project from the said branch to gen up a solution - then change the refs over to use the source from the branch? not sure...

[hikalkan]

@274188A,

• Clone the repository and switch to the branch.
• Run the build-all.ps1
• Open the startup template on Visual Studio.
• Once the solution is ready (don't build or run yet), run the dotnet restore on the command line (in the sln folder). - this is to fix the dependency problems.
• Now, you can build and run as I've written before

[274188A]

yeah just tried it - so from the branch specified, built the release using powershell files
run the CLI project with for eample: new Acme.BookStore -u blazor

this will generate the project for you...

[hikalkan]

-u blazor is not implemented yet 😄

[274188A]

oh - i got something - thanks for clearing that up for me!

[hikalkan]

Actually, it generates the Blazor UI, yes, but accidently. Because it doesn't delete the Blazor project from the solution. So, doesn't matter if you specify -u blazor or not :)

[274188A]

i see - appreciate i'm dealing with work-in-progress so all good :-)

[jhulbertpmn]

I started fresh, ran through the steps above and I'm up and running. very cool!
I think what happened earlier is I tried a build/run before I ran the build-all.ps1 script and although I ended up getting a successful build something still wasn't right. Using the steps above in order though it worked just fine.

[hikalkan]

Made authentication & authorization working :)

• All permissions are available as policy, so <AuthorizeView Policy="@IdentityPermissions.Roles.Delete"> works as expected.

````html
@page "/role-management"
@attribute [Authorize]
@using Volo.Abp.Identity
@using Microsoft.AspNetCore.Authorization
@using Volo.Abp.Application.Dtos
@inject IIdentityRoleAppService RoleAppService

Roles

@if (_roles != null)
{

@foreach (var role in _roles.Items)
{

• 
  @role.Id / @role.Name
  
  (Delete)
  
  

}

Total role count: @_roles.TotalCount

}

New Role

Name:

Create!

@code {
private IdentityRoleCreateDto _newRole = new IdentityRoleCreateDto();

PagedResultDto<IdentityRoleDto> _roles;

protected override async Task OnInitializedAsync()
{
    await GetRolesAsync();
}

private async Task GetRolesAsync()
{
    _roles = await RoleAppService.GetListAsync(new PagedAndSortedResultRequestDto());
}

private async Task CreateRoleAsync()
{
    await RoleAppService.CreateAsync(_newRole);
    _newRole = new IdentityRoleCreateDto();
    await GetRolesAsync();
}

private async Task DeleteRoleAsync(Guid id)
{
    await RoleAppService.DeleteAsync(id);
    await GetRolesAsync();
}

}
````

Working on the other fundamental features... ;)

[hikalkan]

Anyone knows a UI kit for Blazor that is based on Bootstrap?

I see that the only one is https://github.com/chanan/BlazorStrap

https://github.com/stsrki/Blazorise also seems promosing. However, I am not sure if they continue to support that much of different libraries and the abstraction may be leaking (didn't investigate in deep).

Another option to directly use Boostrap code, but I don't like to do it if possible. It would be perfect if AspNet Core Tag Helpers were working here :))

[tvddev]

These might help? We use Telerik too, so maybe those guys and othrrs like syncfusion can contribute their free/trial versions and it gives people the option to pick them up?

https://www.matblazor.com/

https://jsakamoto.github.io/awesome-blazor-browser/#libraries---extensions-component-bundles

[jhulbertpmn]

The SyncFusion Blazor components use Bootstrap and they are fantastic. They have their community license and the main commercial license of course - I don't know what the licensing implications would be

[274188A]

+1 https://www.matblazor.com -

i would assume you'd run into trouble if you tried selling the abp.zero library with another company's registered libs

[jhulbertpmn]

For what it’s worth- and I have no affiliation with Syncfusion, I just like the product- th Rey do have a form to request an open source license

https://www.syncfusion.com/products/community-contact-us

[tvddev]

https://github.com/stsrki/Blazorise

Looks to be pretty comprehensive.

[ram16g]

https://github.com/ArgoZhang/BootstrapBlazor is pretty good

[do-it-ger]

Overview UI components: https://github.com/AdrienTorris/awesome-blazor#component-bundles

By github stars:
-> https://github.com/ant-design-blazor/ant-design-blazor
is the activist project

Do you need same help?

[hikalkan]

@do-it-ger I see ant-design-blazor is the most active one. Others have not so active development.
However, I want to use a bootstrap based one. Current UIs (angular & mvc) are using bootstrap and I don't want to include another UI framework that is not BS compatible. Still looking... I am checking blazorstrap and blazorise deeper.

[ElderJames]

@hikalkan Can we contribute an ant-design-blazor template as an option??

[tvddev]

What is the difference between the Pro and Normal versions of Ant Design Blazor? Would we end up having to buy something else and/or merge backend and UI changes from different places?

https://github.com/ant-design-blazor/ant-design-pro-blazor

[ElderJames]

@tvddev Ant Design Blazor Pro is an out-of-box template and it is free.

[hrx521]

What is the difference between the Pro and Normal versions of Ant Design Blazor? Would we end up having to buy something else and/or merge backend and UI changes from different places?

https://github.com/ant-design-blazor/ant-design-pro-blazor

Ant-Design-Blazor is based on Asp.net core and Ant-Design. Then,Ant-Design is a html/CSS library that used MIT License. Both Are fully open source and free.

[danielmeza]

We should use https://github.com/mrpmorris/fluxor :D

[KevinFarrow]

We should use https://github.com/mrpmorris/fluxor :D

"Note: This library has been superseded"

[danielmeza]

I have updated the link to the new implementation https://github.com/mrpmorris/fluxor

[hikalkan]

@hikalkan Can we contribute an ant-design-blazor template as an option??

Sure, you can. However, the problem is not creating a template. The actual problem is the modules. When I develop the UI of a reusable module, I should make an assumption about the HTML/CSS library used in the applications using this module. Bootstrap is our common assumption. If we create different templates with different HTML/CSS frameworks, then it will be hard to support multiple UI frameworks for each module. In the long term, some modules will not support some UI types and there will be some fragmantation. So, to be able to create a consistent module ecosystem, we should decide to select a HTML/CSS framework and this decision was Bootstrap.

[274188A]

Css isolation is coming which might help

[tvddev]

Isn't blazor a good opportunity to move beyond bootstrap? Most commercial users will likely buy Telerik or Synchfusion (or other) so being able to easily switch to those without legacy BS is attractive.

Fluxor looks pretty interesting for basic controls, I hadn't seen that before.

Apart from Blazor based implementation, by far the more attractive feature is how easy it will be to upgrade to new versions each month as new release come out. In even a 6 month development abp.io could be updated 4-5 times. Being a young product the changes might be considerable.

Really looking forward to seeing this working out.

[leonkosak]

Isn't blazor a good opportunity to move beyond bootstrap? Most commercial users will likely buy Telerik or Synchfusion (or other) so being able to easily switch to those without legacy BS is attractive.

This is true in our case (DevExpress), but as I can see that not everyone (every company) want to add additional paid components to abp (or abp Commercial).

[tvddev]

@leonkosak I agree, but that probably provides more support for a flexible architecture where it is easy for someone to plugin Devexpress or Telerik or MatBlazor etc. Then the AntBlazor team (or Synchfusion etc) can easily create cool demos of how to plugin their UI framework and abp can focus on having a really robust template/functional multi-tenant framework?

[jhulbertpmn]

@leonkosak I agree, but that probably provides more support for a flexible architecture where it is easy for someone to plugin Devexpress or Telerik or MatBlazor etc. Then the AntBlazor team (or Synchfusion etc) can easily create cool demos of how to plugin their UI framework and abp can focus on having a really robust template/functional multi-tenant framework?

Well said! It certainly makes sense that there needs to be some kind of standard baseline. Being able to plugin a particular package of ui controls on top of that is ideal

[274188A]

I would recommend separating the *.razor and the *.razor.cs files (so they are nested)

It might be best to ue Boot Strap rather than trying to accommodate to so many different libraries...moving target

For those using external libraries - it's easy enough to change/adapt the .razor definition and hopefully reuse some or all of the code-behind (.cs)

[danielmeza]

@leonkosak I agree, but that probably provides more support for a flexible architecture where it is easy for someone to plugin Devexpress or Telerik or MatBlazor etc. Then the AntBlazor team (or Synchfusion etc) can easily create cool demos of how to plugin their UI framework and abp can focus on having a really robust template/functional multi-tenant framework?

Well said! It certainly makes sense that there needs to be some kind of standard baseline. Being able to plugin a particular package of ui controls on top of that is ideal

Fast is can be a good option for it, it respect all web standard and does not dependen on the framework.

[hikalkan]

Creating HTML/CSS independent UI for the modules is not an easy thing. As I see, Blazorise doing something close to that. So, I am investigating it.

Fast is can be a good option for it, it respect all web standard and does not dependen on the framework.

I think Fast is so new, so it is not an option currently.

[Xeevis]

I've ditched bulky UI kits like Bootstrap for the TailwindCSS so I would like to see some kind of abstraction in modules. TailwindCSS is low-level, unopinionated & modular PostCSS framework that works great deal in giving complete freedom for design, customization, abstraction, extensibility and optimalization (upon publish scans html/razor source files and tree-shakes unused CSS classes to bare minimum of couple KBs). It's also free of javascript making it ideal for Blazor ....

If modules were to use abstracted common components using Blazorise, it would in theory be fairly easy to create new custom providers that would work with TailwindCSS or any other CSS framework for that matter. I however do expect it will be fairly constraining in its abstracted toolset, Blazorise surely won't stray far from lowest common denominator of several existing providers (meaning it won't be abstracting exotic CSS components and utilities found only in one or two CSS frameworks).

[hikalkan]

I started to use Blazorise and I am in contact with the creator of the Blazorise for cooperation possibilities.

[ElderJames]

😭😭😭

[wocar]

Blazor totally improves our development speed. This is great news, thanks for the effort, also integrating blazorise would be great (Y)

[hikalkan]

If we don't have a technical problem, we will complete a preview/experimental version of the Blazor UI in the current milestone (3.2) and publish with the ABP Framework 3.2.0-rc.1 in the next week.

I am very excited about this release 😃

[tvddev]

Thats awesome!! :) I know its early but if we start using the blazor versionq can you say what the blazor roadmap will be and how we will be able to upgrade as we develop product alongside the framework being developed?

[274188A]

_Security question_ - will external providers like Azure Active Directory B2C be an option in the future?

[hikalkan]

Initial Blazor UI has been merged: https://github.com/abpframework/abp/pull/5399

You can consider this as experimental. However, if you build some real components/pages, I don't think that you will need to make a lot of changes in your own application code later. We will make breaking changes in the next two versions (3.3 & 4.0), but they will be mostly related to some configuration and internal framework changes.

The road map for the Blazor UI:

• We will release the current work with version 3.2 (it is planned to be released in this week as Release Candiate 1). After release, we will create a simple tutorial to make you start using it.
• We will release a more stable and future complete with 3.3 (planned RC date is October 15)
• We planned to release a production ready version, with all fundamental modules completed (and based on .NET 5 final) with v4.0 (planned RC date is November 11)

So, we have a tight schedule and we will do our best to catch it.

After 4.0, we will continue to add features, make improvements and prepare tutorials and documentation.

[Xeevis]

Like it so far! I'm wondering how much effort would it take to get at least Wasm client to work with recently shipped .NET 5 RC1. Tons of improvements for Blazor across the board and I'd like to start ~playing~ developing with it asap considering it's already feature complete and a "go-live" supported for production build.

While it's supposed to be fully backwards compatible with .NET Standard, upgrade yields some errors. Any insight on how to get through would be appreciated.

Changing the MyCompanyName.MyProjectName.Blazor.csproj to

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

  <PropertyGroup>
    <TargetFramework>net5.0</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Blazorise.Bootstrap" Version="0.9.1.2" />
    <PackageReference Include="Blazorise.Icons.FontAwesome" Version="0.9.1.2" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.0-rc.1.20451.17" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.0-rc.1.20451.17" PrivateAssets="all" />
    <PackageReference Include="System.Net.Http.Json" Version="5.0.0-rc.1.20451.14" />
  </ItemGroup>

  <ItemGroup>
    <ProjectReference Include="E:\GitHub\abp\framework\src\Volo.Abp.Autofac.WebAssembly\Volo.Abp.Autofac.WebAssembly.csproj" />
    <ProjectReference Include="E:\GitHub\abp\framework\src\Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme\Volo.Abp.AspNetCore.Components.WebAssembly.BasicTheme.csproj" />
    <ProjectReference Include="E:\GitHub\abp\modules\identity\src\Volo.Abp.Identity.Blazor\Volo.Abp.Identity.Blazor.csproj" />
    <ProjectReference Include="E:\GitHub\abp\templates\app\aspnet-core\src\MyCompanyName.MyProjectName.HttpApi.Client\MyCompanyName.MyProjectName.HttpApi.Client.csproj" />
  </ItemGroup>

</Project>

will result in

[tvddev]

@hikalkan - Great news that this is almost ready to use, should we create new questions here or in the support forum?

[hikalkan]

Published the ABP Framework & ABP Commercial 3.2.0-rc.1, so you can try the Blazor UI now: https://blog.abp.io/abp/ABP-Framework-ABP-Commercial-3.2-RC-With-The-New-Blazor-UI

Blazor UI with this release is experimental, we are completing the features.

I am currently updating the application development tutorial to support the Blazor UI.

@Xeevis,

I really want to move to .NET 5 and develop the Blazor UI based on it. However, this means a major version change for the ABP Framework and we have already scheduled it (see https://github.com/abpframework/abp/milestones).

Current milestone is 3.3 (in progress, finishes on October 15) and the next milesone is 4.0. We will upgrade to .NET 5 with the 4.0.

So, a little more patient, we are working hard for this :)

@tvddev,

if you are using the ABP Commercial, please ask on the support web site.

Thanks.

[hikalkan]

For anyone didn't heard yet, @stsrki, the creator of the Blazorise, is joining to the core ABP Framework team in the next weeks: https://twitter.com/MladenMacanovic/status/1306878684251422720
I believe that we will do great things for the Blazor UI with the help of him :)

[wocar]

Wow thats great news. I have a question. The default template will target server side blazor or webassembly?
I ask this because as of now, some of my apps are a hybrid between razor pages and blazor server side.

Thanks and great job!

[hikalkan]

@wocar we are more focused on the webassembly at the beginning. So, default template is webassembly.

[xdmushui]

https://github.com/FlorianRappl/microfrontends-with-blazor-demos
https://github.com/FlorianRappl/Piral.Blazor

I like "Microfrontends": https://micro-frontends.org/
It would be exciting if Blazor were microfronted.

[hikalkan]

Getting started & Web Application Development tutorials are updated for the Blazor UI:

• Getting started with Blazor: https://docs.abp.io/en/abp/3.2/Getting-Started?UI=Blazor
• Web application development with Blazor: https://docs.abp.io/en/abp/3.2/Tutorials/Part-1?UI=Blazor

Also, just released the v3.2.0-rc.2.

[274188A]

this comment by Steve Sanderson is worth a read: https://github.com/dotnet/aspnetcore/issues/24599#issuecomment-697588562

[aicreed]

I've just been giving the ABP Book example stuff a go and I'm running into an odd issue when trying to edit a Book.
System.Object -> AbpBlazorTest.Books.CreateUpdateBookDto AutoMapper.AutoMapperMappingException: Missing type map configuration or unsupported mapping.

Adding a mapping configuration for object --> CreateUpdateBookDto works but this can't be correct can it? I suspect there's something else not working here.

Also after adding the mapping I can edit the Book but the data is not automatically populated in the modal.

[aicreed]

The error message I'm getting is before mapping it to an object. Adding a mapping configuration to System.Object resolves the error.
Must be something else wrong here as I don't see why CreateUpdateBookDto needs a map to object in the first place?

[aicreed]

I managed to get the above resolved, as it turns out I also needed to specify the mapping configuration in the Blazor client itself.

I'm now getting a different issue trying to build the client in release mode:

Blazor.MonoRuntime.targets(326, 5): Unhandled exception. Mono.Linker.MarkException: Error processing method: 'System.Void System.Runtime.CompilerServices.SuppressIldasmAttribute::.ctor()' in assembly: 'Volo.Saas.Host.HttpApi.Client.dll'

I only get this when compiling in Release mode, has anyone else tried this and know if it works? Thanks.

[hikalkan]

@aicreed this is the AutoMapper configuration you need to do: https://docs.abp.io/en/abp/3.2/Tutorials/Part-3?UI=Blazor&DB=EF#automapper-configuration

````csharp
using Acme.BookStore.Books;
using AutoMapper;

namespace Acme.BookStore.Blazor
{
public class BookStoreBlazorAutoMapperProfile : Profile
{
public BookStoreBlazorAutoMapperProfile()
{
CreateMap();
}
}
}
````

The "release mode" error can be related to tree shaking:

The .NET IL linker (originally based on the Mono linker) does static analysis to figure out which parts of .NET assemblies can ever get called by your app, then it strips out everything else.
This is equivalent to tree shaking in JavaScript, except the IL linker is much more fine-grained, operating at the level of individual methods. This removes all the system library code you’re not using and makes a huge difference in typical cases, often cutting out another 70+% of the remaining app size.

https://blog.stevensanderson.com/2018/02/06/blazor-intro/

ABP uses dynamic proxying and some reflection. This can be the problem. I created an issue to work in the next milestone: https://github.com/abpframework/abp/issues/5646

Current Blazor UI is experimental, so not tested on release mode yet.

[danielmeza]

@hikalkan may be the solution should be to use Source Generators to create dynamic proxies. More info here and here.

Source generators not only can solve the problem but also will made much faster the execution and the proxy can be used in any c# cliente, like a xamarin, windows or linux application.

[hikalkan]

We are following the source generators. However, it is early to decide.

[danielmeza]

We are following the source generators. However, it is early to decide.

Grate!
Are we waiting to that feature to stay? Or checking if all expected features can't be archive at compile time?

[SuriyaArul]

Hi @hitaspdotnet , I have downloaded ABP.IO project with Angular UI and i wrote some api's also. So, now I want to use Blazor UI in abp.io way. I have checked documentation in abp.io site, but I unable to find the solution, so plz help me out this issue. How to convert Angular UI to Blazor client without changing existing abp.io api's?

[Stirda]

@SuriyaArul ABP application services can automagically be injected in Blazor. No additional coding required in your API.

From official tutorial:

Injects the IAuthorAppService to consume the server side HTTP APIs from the UI. We can directly inject application service interfaces and use just like regular method calls by the help of Dynamic C# HTTP API Client Proxy System, which performs REST API calls for us.

[SuriyaArul]

Hi @Stirda Thanks for you message, I completely agree with your reply, But I am having ABP application with Angular UI, So I need to convert Blazor UI instead of Angular without changing Server side, Becoz I wrote around 30 api in my ABP application.

[wocar]

It is no easy task. You should do a migration plan and do it by parts. It is basically rewriting the front end

[SuriyaArul]

@wocar Thank you

[hikalkan]

Thank you all to join into this discussion. This was the most commented issue in the ABP Framework history :)

With the release of ABP 4.0 RC.1 in the next week (probably at Nov 11), we will have a production ready Blazor UI (based on the stable .NET 5.0).

So, closing this issue here. Please open new issues if you have problems or suggestions related to the Blazor UI.

Thanks again for your great attention.