Blazor+UmbarcoCMS
# help-with-other
m
Using this to discuss Content Delivery API and Blazor.
like this
Putting the most relevant here
Maybe this could be made into an umbraco site generator too?

https://www.youtube.com/watch?v=tSUwr-R1JPQ

@jacksorjacksor (Richard Jackson) What I was about to ask was if you can still do a razor page as a backoffice section? I mean if you say want to create a blazor hosted app within the backoffice.
Might be better than the other option of using component within html
@Laura Neto I created this sub section in case there are more discussions about this. My question is whether you investigated using Blazor within the regular site?
Copy code
{
  "dashboards": [
    {
      "alias": "myCustomDashboard",
      "view": "/App_Plugins/MyCustomDashboard/dashboard.html",
      "sections": [
        "content",
        "member",
        "settings"
      ],
      "weight": -10,
      "access": [
        {
          "deny": "translator"
        },
        {
          "grant": "admin"
        }
      ]
    }
  ]
}
Is there no way the "view" could be a razor component? @jacksorjacksor (Richard Jackson) ?
l
For a project I did build a custom section using Blazor. I used Blazor server, but as the view needed to be an html file, I had to display it as an iframe.
I don't remember exactly why that ended up being needed but it was something to do with some Umbraco behavior.
m
Yes that seems to be the variant most use. Alternative two would be using the method Yodas used.
m
I was able to run Blazor in the backoffice for U14, needed to do some "hacking" but it was working just fine. It was almost half a year ago so I am not sure if this way still works ^^ https://gist.github.com/CyberReiter/da195f97b4daaa809dbe16fd95eba546
m
Woaah. Fantastic
this came from the heavens today @michaelreiter_
I have been banging my head to the table trying to get this to work. I have tried every single rendermode but all blank
and not a single error anywhere 😦
@michaelreiter_ A tad fast today but does this work on 13 as well? I didnt see 14 😄
Copy code
public static class UmbracoBuilderServiceExtensions
{
    public static IUmbracoBuilder AddCustomServices(this IUmbracoBuilder builder)
    {


        builder.Services.AddRazorComponents()
            .AddInteractiveServerComponents(
                options =>
                {
                    options.RootComponents.RegisterCustomElement<shop>("sshop");
                }
            ).AddInteractiveWebAssemblyComponents();
        builder.Services.AddMudServices();

        //builder.Services.AddSingleton<IStartupFilter, StartupFilter>();

        return builder;
    }
this is what my builder looks like
but it is blank
My program
Copy code
app.UseUmbraco()
    .WithMiddleware(u =>
    {
        u.UseBackOffice();
        u.UseWebsite();
    })
    .WithEndpoints(u =>
    {
        u.UseInstallerEndpoints();
        u.UseBackOfficeEndpoints();
        u.UseWebsiteEndpoints();
    });

app.MapRazorComponents<WebApplication>()
 .AddInteractiveServerRenderMode().AddInteractiveWebAssemblyRenderMode();

app.MapBlazorHub();
app.UseBlazorFrameworkFiles();
very simple yes but I just want to have something show up 😄
on the client side no problems I can use all types like using components within razor views etc
@michaelreiter_ How does it work with the new "web app" mode? I was wondering if that would suit hte back office better
This is really tricky. If anyone managed to get a Blazor WebApp/Server to load up as web-component I would be interested 🙂
@YodasMyDad Just wondering. Is there no way at all to use blazor-server apps in the backoffice?
Finally got it to work after many attempts.
m
My trick will probably not work in U13 as changing the base href would most likely destroy some parts of the Backoffice
m
Looks like webcomponents have more options in general. I have a different problem in that the css affects the rest of the backoffice
@michaelreiter_ One thing I am investigating is making the entire thing a webapp and do all admin via headless. Maybe at one point we will get a OS project like that for Umbraco? That would be awesome
If I ever get to code cabin I would like to explore that .D
the benefit for one man shops to use blazor are immense
@Laura Neto Thanx for making that sample. It has been of great help. Would be cool to try out a MAUI sample as well. Hopefully there is more about this on codegarden.
s
Looks like no Blazor or MAUI talks at Codegarden this year (program here: https://codegarden.umbraco.com/codegarden-program/)
m
Might be more useful to do something more dedicated instead.
@Laura Neto Was it you who made those Swagger extensions for Umbraco? They really changed everything for me. I spent way too much time trying to figure out those Properties.
in that case huge thanx
I realised it was @Vitor Rodrigues who I should thank. They made a huge difference in my MAUI example
@CarlCod_es I saw your comments on Fritz session. Just want to let you know we have this area for Blazor and Umbraco talk. Even if CG doesnt have any sessions I hope we will get some in the future.
c
Ah nice - thanks @marcusjmsweden
m
We may not be many but we are dedicated 😄
Currently experimenting with Maui with Lauras excellent example
c
Excellent - I look forward to seeing these. I'm hoping to do some more experimenting myself - I've build a basic demo but I want to build more into it 🙂
m
Check out @Laura Neto excellent starting project. It really helped get going with the typed models
I know it was her friend who wrote those but he is really good at what he is doing clearly 🙂
v
We actually released them as a package, so they are easier to use: https://www.nuget.org/packages/Umbraco.Community.DeliveryApiExtensions
m
Fantastic
I even wonder if these shouldn't be part of the Core
i mean I see them as more or less necessary to make any client
@CarlCod_es Have you checked the 14 backoffice anything and what that could mean for Blazor?
good or bad 😄
Just wondering if anyone has tried to make a mixed mode web as an headless client? Similar to the webshop example MS made for dotnetconf? @Corné Hoskam perhaps?
I guess one benefit of going all in on headless is that you dont have to work with larger payloads into the component
c
@marcusjmsweden Unfortunately not, I haven't messed with Blazor since the introduction of the mixed modes 🫣
m
I plan to try it with a smaller ecommerce application in a few weeks. I debated whether to use the component approach but I realised it could be a problem if you have larger sets of data due to the signalr timing issue.
@Corné Hoskam @CarlCod_es What do you think of this example? Is this a way forward with U14? https://github.com/mvromer/blazing-lit-mfe-demo
c
I'll take a look. I also heard of a new backoffice written entirely in blazor from @YodasMyDad , still experimental, but look forward to hearing more about it
m
wow awesome
maybe you guys can setup some meetup online to look at this?
p
@User May I suggest “Umbracians” instead of "guys"? We use gender inclusive language in this Discord. 😀
m
umbracoffee
yess sorry, you folks
but this is somethig to investigate futher anyhow. Thanx for the reminder Carl.
@YodasMyDad I hope you feature this in some livestream or similar. This is great stuff.
@Markus Johansson is looking for speakers for the Swedish Umbraco Event. Maybe @YodasMyDad or @Corné Hoskam could be interested to show off some U14/Blazor stuff?
several months left so there is time to prepare 🙂
c
Unfortunately I've been out of the Blazor scene for well over a year now, so unfortunately I think @YodasMyDad might be the better suited candidate to ask for such a thing 🙂
m
Yes that new backoffice project looks promising. Now that MS is gearing up even more with Blazor it could be worth it.
@CarlCod_es If any of you see Yodas on CG maybe you can point to this thread. @Markus Johansson might want to have a chat too
@Corné Hoskam Do you know if Yodas will be on CG?
c
Not sure to be honest! I think he still mostly hangs out on X, while I've pretty much moved over to Mastodon entirely, so I might have missed if he will be going or not
m
@Corné Hoskam Thank you very much for replying. Anyhow, if you bump into eachother you can throw a hint. I exited most of social media save for Linkedin 😉
@Corné Hoskam Reason is that we are discussing an upcoming Swedish festival and this would be a great topic.
c
Sure thing, I will definitely keep my eyes out! Otherwise you might be able to reach out to him via X yourself to discuss it 🙂
m
@Corné Hoskam I put Markus on it 😄
d
Hey @marcusjmsweden the best place to follow Lee Mesenger and his progress with Blazor is on X. His handle is @YodasMyDad same as here. He has been posting some great examples of back office components and how easy they are to create using Blazor: https://x.com/YodasMyDad/status/1795061270523064753
m
Great. I asked @Markus Johansson to send a request on X (since I don't use it anymore). There is a big event coming up and this would (imho) be a great topic
Markus is the organiser anyway 🙂
d
Are you referring to https://www.umbracokalaset.se/ ? What @YodasMyDad is creating is not in Umbraco though. It's more a POC how easy it is to use Blazor for CMS dashboards and inspired by Umbraco.
m
Pity they can't be uploaded to YT as well, i would love to see those videos
Yes and that is fine with me. We need to start somewhere.
MS has said that this is a key part of their strategy moving forward and it would be nice to be on that train 🙂
Personally I am ok with digital events too. Maybe within umbracoffee?
m
The call for speakers is open, anyone they might want to speak is welcome to submit a proposal 🙂 As this is a Umbraco event we are mainly looking for talks related to Umbraco. https://www.umbracokalaset.se/call-for-speakers
y
I have started uploading progress videos to YouTube today as well

https://www.youtube.com/watch?v=SoG5ONp-jG0

m
Fantastic
Awesome. I didn't realise you were in USA so my hopes for talk at Swedenfest went out of the window but maybe you can do an online thing some day?
y
I'm in the UK, but have a lot on most of the time so would not be able to go to Sweden at the moment. Definitely do an online event once I have the proof of concept finished
m
That would be awesome 🙂
The problem in this business, always a deadline. That is why I always miss CG 😄
@YodasMyDad Btw, check out those libraries that @Vitor Rodrigues made in their example. I think they make for a great base going forward
Btw, those U14 example are also somehwere?
@Dean Leigh Would this be a good approach in the new backoffice you think? https://github.com/mvromer/blazing-lit-mfe-demo/tree/main
d
Very interesting - this is similar to what I was trying to do at CodeGarden Hackathon. There is no reason why we can't have Blazor WASM Web components as any other web component in the back office. We came close but just couldn't get it working although some people have. There are questions about the benefits but if you have a complex integration that takes advantage of some of the benefits of Blazor then I personaly think this hybrid approach may be useful in the future.
m
Cool. I didn't realise it was that easy. Much more smooth than the angularjs approach
For me the benefits would mostly be to be able to do a contained "mini app" within the backoffice to not have end users have to login to several places
eg an order processor like in that example
or something that isnt typical cms behavior
@Dean Leigh But mostly something more complicated that is easier to do for us C# folks 😄
@Dean Leigh Btw did you publish any of that hackathon code?
hopefully we will se more of this as 14 gains users
blazor is getting some amazing improvements in 9 so we have a nice pairing here
d
I have some local stuff - I'll try and find some links
m
Nice, thanx
d
m
Great thanx will check
Have a nice Saturday and Weekend Dean.
d
You too
m
@Dean Leigh Question. I found this excellent addon called "Simple Dashboards". I had no idea you could use Views this way. I know some have experimented with them before but they were very slow. Now it seems to be quite fast. Would there be a case for using this approach to build backoffice extensions with Blazor you think?
I noticed that is somewhat slower in 15 though. Not sure why.
y
Where is this addon? On GitHub?
m
Yes, I actually found it on the packages section.
I wonder if there is anything one can do to speed up the init in 15 though
199 Views