Blazor WebAssembly static SPA + Squidex?

Support
1

Hi I’m new to Squidex (and web development), and I’m interested in developing a blog with client-side Blazor, which is a SPA framework that uses C# and compiles to WebAssembly.

I was wondering about the possibility of creating a statically-hosted blog front-end with Blazor, and using Squidex as the data service layer, no dynamic hosting (no Asp.Net or otherwise). Does this seem like a reasonable use of the Squidex platform? If so, can anyone possibly point me to any samples that would show how this can work? (If not Blazor, perhaps with Angular or React?).

I have reviewed this thread, and not sure if it’s relevant:

Thanks in advance!
David

2

It is a perfect case for a SPA. You can host the static assets like scripts as a github page then.

You can have a look to these samples: https://github.com/Squidex/squidex-samples/tree/master/csharp

But there is a difference to a static site generator. A static site generator means to generate all the pages based on dynamic content (content + layout) => html

3

Thanks @Sebastian! Thanks for teaching me about static sites!

So, I started down this path, but ran into what appears to be a CORS issue. I’ve pushed my WIP to a fork of your samples branch:

My goal was to use the vanilla Blazor template and share the same DTOs. But the same call to retrieve posts which succeeds on the Asp.Net project seems to fail when called from a Blazor component, even when it’s all server-side code:

var posts = await postsClient.GetAsync(query);

Would you have time to take a look at the Sample.Blog.BlazorServer project and let me know if you have any ideas? I can post to the Blazor group as well, but I’m not sure what I might need to know about the Squidex client library.

Thanks in advance!
David

4

I’ve updated to the latest Client Library, but no luck. @Sebastian let me know if this is something you can help with/try to repro, or if I should bring it up with the Blazor team.

5

The problem is that you misunderstand the async behavior in web assembly.or the browser.

When you have code like this:

protected override async Task OnInitializedAsync()
{
    (Total, BlogPosts) = await ApiClient.GetBlogPostsAsync();
}

The method does not wait for completion for the first rendering. Instead it just renders the first time where BlogPosts is not loaded yet (so it is null) and then a second time when the blog posts are available. Therefore you get a NullReferenceException

So in your template you should do something like

@if (BlogPosts == null)
{
    <div>Loading...</div>
}
else
{
   foreach (var post in BlogPosts) { ... }
}
1 Like
6

@Sebastian aha, thank you! Sorry to bug you with such a novice question!

7

Hi, I have the same requirement which is using Blazor Web Assembly + Squidex but not as a static website. I have to develop a full blown application with authentication and authorization. Is it secure enough to store Squidex Client Credential in the Blazor Web Assembly?

8

Yes and no. If you create a client that has only the absolute minimum of permissions it is fine. But for anything else Blazor is not safe.