What are /r/Blazor's favorite Products & Services?

From 3.5 billion Reddit comments

Although Blazor has a component style, and many vendors provide out of the box components, you still need to understand how web layouts work with html. One example that's a very common framework for layouts is Bootstrap. https://getbootstrap.com/docs/5.1/examples/

​

At our company we use Blazor Server with Telerik controls, which in turn use Bootstrap underneath.

Apps with poor performance will never make it to top google search for competitive keywords. This tool from Google is a benchmark for performance:

https://developers.google.com/speed/pagespeed/insights/

Awesome! That seems very useful for kind of developers like me!
By the way, do you have any plans to make it to the NuGet package like below?
- https://www.nuget.org/packages/Toolbelt.AspNetCore.Blazor.Minimum.Templates/

PWA notifications work with blazor server too. It's basic web technology.

You can create a new blazor wasm pwa project from the template to copy the setup. You'll need a manifest and register your worker.

I'm have them working in my server app, using webpush (docs)

Since you already referenced the Uno platform, then this post might be an interesting read: https://platform.uno/blog/profile-guided-aot-in-uno-platform-reduces-package-size-by-50/

The content in short:

Profile Guided AOT (utilizes mixed AOT/interpreter mode) for Uno Playground has a startup time of 1.19 seconds. The interpreter only version has a startup time of 2.1 seconds. Not sure how that is measured, but still an almost 2x improvement.

Yes, Uno Playground is not Blazor, but the potential increase in startup performance still exists.

Fullstack right now but open to options.

https://www.notion.so/2x-Mid-Weight-Back-End-Developers-7d02e6e4b1b543bca89d774db9d45b21

but open to other suggestions also...

I want to introduce the "PublishSPAforGitHubPages.Build" NuGet package to do not waste someone's time.

https://www.nuget.org/packages/PublishSPAforGitHubPages.Build/

But of course, this article is very helpful and important to understand what does those packages behind the scene.

And this article also will be useful for someone who doesn't want to use those 3rd party packages.

Thanks!

'Also Blazor server is not front-end (unless it is??)' HAHAHA point proven you lack alot of knowledge... Blazor server is front end, it is like angular with universal https://angular.io/guide/universal, it renders the frontend on the server. :D Front end means, it is something the users see s and can interact with. (Like Angular and Blazor, even tho they both have an option to render serverside)

Why doesn't stackoverflow not work for blazor, link the question, we ll help. But yeah if you do random question like 'I need help I got a random error when doing random stuff which I don t know about...' and post it on github or stackerflow it there won t be many help for you.
PS can t be bother to spelling check, like you can t be bother to check your facts.

I've just been starting out with Blazor as well. One thing that has helped me is to look at the Bootstrap documentation for things, because it seems like Blazor and MudBlazor (which I am also using) heavily rely on Bootstrap for layout and look and feel. Some of the docs on the Bootstrap layout for grids has been helpful to me to try and figure out how things are working. I am far from being an expert, but maybe those pages would help you too. https://getbootstrap.com/docs/4.0/layout/grid/

That's an interesting one. I wonder if there's a way to avoid JS for this...

I haven't tried it myself but it is possible to reference the tailwind stylesheet via CDN.

However, as the official docs explain, you do lose some of the benefits...

https://tailwindcss.com/docs/installation#using-tailwind-via-cdn

Shameless plug :) My book is coming out in a few weeks

https://www.amazon.com/Web-Development-Blazor-NET-hands/dp/1800208723/ref=mp_s_a_1_5?dchild=1&keywords=blazor+.net+5&qid=1622488939&sprefix=blazor&sr=8-5

I'd recommend Pro ASP.Net Core 6. It's a little expensive and most of the book focuses on MVC and Razor Pages, but the section on Blazor was extremely helpful. I've been developing Razor projects for years, but Blazor was really intimidating because of how complex the template projects were. The book walks you through some very simple examples and shows how simple Blazor can be.

There are a few new things to learn, but fundamentally, Blazor is really similar to Razor pages. You have your HTML, your Razor markup, and your new code element in Razor components, but that's about it.

Do you want to change the page title and meta elements dynamically, such as adding an OGP image?
Yes, you can.
Since .NET6, Blazor has been the ability to control head elements dynamically.
https://docs.microsoft.com/en-us/aspnet/core/blazor/components/control-head-content?view=aspnetcore-6.0
And even if you use .NET5 or earlier, the "Toolbelt.Blazor.HeadElement" NuGet package allows us to do that task.
https://www.nuget.org/packages/Toolbelt.Blazor.HeadElement/
Of course, pre-rendering static HTML files at publishing time by the "PublishSPAforGitHubPages.Build" reflects those dynamically changing head elements into static files expectedly.

Yep, looks like a Bootstrap class, so should be in the bootstrap css file in the wwwroot/css folder.

https://getbootstrap.com/docs/4.0/utilities/display/

So if step is not 1 it hides the div using the "d-none" which I'm guessing is display:none in pure css, so only step 1 is visible.

Finally got it to work, after a lot of frustration. IHttpClientFactory is not as useful as I had thought. Need to new up an HttpClient, and reset the baseUri, then it will work, in that instance.

protected override async Task OnInitializedAsync() { try { HttpClient http = new HttpClient(); http.BaseAddress = new Uri("https://ipinfo.io/"); var response = await http.GetFromJsonAsync<MemberIPAddress>("json?token=[Key]");

forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("WeatherForecast"); } catch (AccessTokenNotAvailableException exception) { exception.Redirect(); } }

Check out our library Elemental, it is not meant to compete with some of the commercial libraries but we have in-depth style customization, forms, a powerful table, typography, and many basic controls. It is open source (Apache). We developed it to share components that we need across multiple projects.

I found a great solution to the Blazor Server Side Cookie issue using local storage.

Firstly, grab the NuGet Blazored LocalStorage using the following command: Install-Package Blazored.LocalStorage. I had to update my System.Text.Json, do this from https://www.nuget.org/packages/System.Text.Json/

Add the following to Startup.cs in:

public void ConfigureServices(IServiceCollection services) { services.AddBlazoredLocalStorage(); // local storage services.AddBlazoredLocalStorage(config => config.JsonSerializerOptions.WriteIndented = true); // local storage }

On your Razor page (I used Index.razor to test):

@page "/" @inject Blazored.LocalStorage.ILocalStorageService localStorage

<button @onclick="HandleSubmit">Create Cookie</button> @* Create cookie *@

@code{ public async Task HandleSubmit() { await localStorage.SetItemAsync("cookieName", "Jason Bourne"); }

protected override async Task OnAfterRenderAsync(bool firstRender) { var cookieContent = await localStorage.GetItemAsync<string>("cookieName");

if (cookieContent == null) { Console.WriteLine("Cookie is blank"); } else { Console.WriteLine("We have a cookie with contents: " + cookieContent); } } }

Did you figure it out? I started renovating my condo had to unplug my computer and router so I couldn't do much.

Did you check out blazor input file? Can read about it here: https://www.nuget.org/packages/BlazorInputFile

your blazor wasm is just like any other static file, subject to all the standard concerns and mechanisms for invalidating the cache with things like ' Cache-Control' headers or etags etc. there is a good guide here - https://imagekit.io/blog/ultimate-guide-to-http-caching-for-static-assets/

Apparently, it is already possible as an experimental feature according to the good people at Uno. That said, there is no official support of multi-thread in WASM yet, it is still a proposal that could be dropped later on.

https://platform.uno/blog/webassembly-threading-in-net/ https://github.com/unoplatform/Uno.Wasm.Bootstrap#threads-support

Not sure if that could work for Blazor.

Well for simple spinners etc. you can do it with css, or more easily with Tailwind classes https://tailwindcss.com/docs/animation#app. In a similar was you could define keyframe animations behind own classes and toggle those in your markup.

I think its ignorance that client-side frameworks are the only solution, even the in javascript world solutions like NextJS https://nextjs.org/ are very popular which is very similar to blazor server side that provides pre-rendering for the ui and logic using reactjs, one of the reasons of this is performance. In general devs just needs to be more open-minded and not get trapped in this black-box to Client SPA everything :). Everything has a purpose, each tool has its own strengths. So I give props to microsoft for focusing on the more practical stuff.

I urge people to open your mind explore technologies and understand them. server-side rendering, serverless and alot of other good upcoming / even already being used technologies right now.

For my app I'#ve been using auth0 and so far its been working great (and its free to start )

Auth0 also have some pretty good documentation on getting started with blazor WASM and also some gotchas too

https://auth0.com/blog/securing-blazor-webassembly-apps/

&#x200B;

&#x200B;

Note: although i use auth0 i make sure to use a app based auth key per user that way if i decide to change to a different Identity provider in the future i can do so without any issue.

Currently working with Auth0 and Blazor and so far no issues at all - working great !

&#x200B;

Auth0 is free up to a certain number of users so worth a go if you dont want to manage the ID server yourself

&#x200B;

I personally followed Auth0s guide for blazor

https://auth0.com/blog/securing-blazor-webassembly-apps/

with minimal changes

(calls to their id endpoint can be a little slow but other than that it's fine)

It's fine to use MudBlazor components only until you can't. You can always mix MudBlazor with other html/css/javascript libraries. As an example, if the chart control that MudBlazor provides do not fit your need, you can always utilize chart.js and use standard html/css/javascript.

What you want to avoid is limiting yourself to one. There are just too many good open-source libraries out there you can use. Example: https://fullcalendar.io/demos