How to Build a Blog using Blazor WASM & Strapi

1

Using Blazor, you can build an interactive web application using C#. In this article, I will show you how to create a simple but blazing fast blog using Blazor WebAssembly, Tailwind CSS, and Strapi. We will be using Strapi, the leading open-source headless CMS, to store our posts and Blazor for the frontend.

This is a companion discussion topic for the original entry at https://strapi.io/blog/how-to-build-a-blog-using-blazor-wasm-and-strapi
2

Hi Yves.

Please amend this article for .Net 6 and the latest version of Blazor WASM. As of 2022, the code presented in this article no longer works and as the only coherent resource available for Strapi and WASM, please fix it. You will run into object reference null exceptions following the instructions in that blog from this point onwards. (

4

Hi @JIde thanks for the heads-up!
We’re reaching out to the author to update this tutorial, stay tuned!

1 Like
6

@commentsBot The tutorial has yet to be updated. It is a deadend non-working tutorial as it stands. The core problem is the path to the api is wrong and the json response from the API request is not formatted as the tutorial anticipates, can only assume from a version change in Strapi. I have a fix, which may or may not be most ideal, but it I am very happy to say it does gets Blazor working with Strapi! I responded to JIde’s GitHub request about this tutorial with some corrections that will get this tutorial back in action to help prospective Blazor devs use Strapi. I will post part of that here as well because I came across this when I was stuck and googling, so hopefully if someone stumbles here like me, they will be able to get things working until the article itself is updated. Let me know if I can be of assistance with that.

One of the first changes is that in the bottom @code section of Index.razor (which is missed spelled Inde.razor in the tutorial) the url variable is wrong. var url = "{STRAPI_API_URL}/posts"; needs to become var url = "{STRAPI_API_URL}api/posts"; *note No ‘/’ before ‘api’. If you followed the tutorial you will already have a trailing slash in your AppSettings file that STRAPI_API_URL pulls from.

Then your Post.cs file needs to properly handle the schema of the JSON response.

  namespace StrapiBlazorBlog.Models
  {
      public class Posts
      {
          public Data[] data { get; set; }
  
          public class Data
          {
              public int id { get; set; }
              public Attributes attributes { get; set; }
          }
          public class Attributes
          {
              public string? Title { get; set; }
              public string? Content { get; set; }
              public string? Author { get; set; }
          }
      }    
  }

This should handle the JSON properly and not cause an error during GetFromJsonAsync(). However when you check allPosts.Length > 0 it will still cause object reference null exception. This is because now the array is allPosts.data.Length. And the foreach that follows now needs to be foreach (var in allPosts.data) and then from there you can access attributes at This text will be hidden@post.attributes.Title (for example).

I would be happy to work with anyone to get this tutorial updated, as JIde said, it is about the only resource for getting WASM working with Strapi.