[REQUEST] Blazor WASM Strapi Tutorial

[JamesIde]

My Request

Community vote 👍 Upvote if you like this topic 🚀 If you can make the article/video!

Thank you.

[JamesIde]

Seems the content of my request isnt showing, so heres what I originally wrote:

Would it be possible to have a tutorial created on how to use Strapi and integrate it with a Blazor WASM (.net 6) application? It is an ideal CMS for Blazor development and tutorials in this area would be extremely beneficial.

James

[malgamves]

Hey @JamesIde that seems pretty interesting.

Could you share more details about the article outline and what you will cover?

[JamesIde]

Hello @malgamves. What I mean was, I was hoping someone could create a tutorial on how to use Strapi with Blazor projects. Someone already created a tutorial, but the code is not updated to .net 6 and does not work even with .net 5. https://strapi.io/blog/how-to-build-a-blog-using-blazor-wasm-and-strapi

I tried to get it linked up, but eventually moved to Contentful due to there being ample documentation with the .net sdk. I'll be investigating using strapi with blazor wasm applications, so I'll get back to you about the possibility of creating a tutorial myself... But if someone were to create a tutorial, it would probably go something like this:

1 - Setting up the strapi content models 2 - Writing a client side service to query the Strapi api (or having a web api to query Strapi, then the client-side service would consume the web api) 3 - Displaying that information in razor components 4 - Possible deployment to heroku and demonstration of deploying blazor wasm application through github workflows onto Netlify.

James

[malgamves]

Thanks for the outline and context. I changed the labels for visibility.

[nextrapi]

Hello! I am willing to take on this article. I just spend a bit of time of Blazor (Thank you for introducing it to me) and I am confident to write a small article on how create a web application with strapi as a content management system + Blazor for frontend SPA. I propose the following article and structure:

How to Build a To-Do List with ASP.NET Blazor, TailwindCSS JIT and Strapi CMS

• Setup Blazor, Strapi and Tailwind
• Create Strapi Content Types (Task)
  • Set Roles & Permissions
• Create a Blazor Application with 3 pages
  • Display All Tasks (To do list)
  • Display an Individual Task (with the option to update/delete)
  • Add new Task
• Deploy Strapi to Heroku & Blazor to Netlify

Another useful addition could be to attach tasks to users and require authentication to add/delete/update tasks to cover login/signup/signout as well so it's a comprehensive demo.

Please let me know what you think!

[JamesIde]

Sounds awesome. Looking forward to reading it!

[malgamves]

Hey @nextrapi looks good to me! When do you think you'll have a draft out?

[nextrapi]

Hey @nextrapi looks good to me! When do you think you'll have a draft out?

Hi, draft will be ready by March 10th!

[JamesIde]

How is the draft coming along?

[nextrapi]

Hey, I need a bit more time to finish the writing but I should be able to upload the code by tonight. Here is a short list and GIF of what I covered:

• JWT Authentication with Strapi (Login,Register)
• Blazor Forms and Validation
• Global Error/Notification Management with Toasts
• Restricted Views
• Different ways of State Management across components
• Update/Delete/Create Strapi Data
• Dynamic Routes

• Timer/Countdowns/Loading Screens

  Let me know what you think! or if I should cover anything specific.

[malgamves]

No worries, looks super cool and concise so far. Ping here when done @nextrapi

[nextrapi]

No worries, looks super cool and concise so far. Ping here when done @nextrapi

Thank you @malgamves, I am working on a few at the same time and I should have them all done soon.

I had a question, I have been reading through the strapi handbook, and I was wondering if I can use the markdown components used in the documentation in blog posts or if I should keep it to just basic markdown components.

[malgamves]

any specific markdown components you wanted to use? basic should be fine but others could be fine too @nextrapi

[PaulBratslavsky]

To ensure that we can review and publish articles promptly, we will start closing inactive issues after two weeks of inactivity.

I know it has been a while @nextrapi , but I just wanted to follow up and see you are still interested in writing this article since you made so much progress already. If not, we will be closing this issue due to inactivity.

[JamesIde]

Damn. Looked promising from what he was showing earlier - oh well!

[malgamves]

we can always come back to it when the author has time to finish it btw :)) we understand how busy life can get

[BrianJesusFreakGreen]

@JamesIde If you follow that tutorial you can get it to work with some minor changes. I'm guessing since that tutorial something in Strapi changed in their Json Schema. One issue is that if you create a post type and a post it's not found at {url}/post it's found at {url}/api/post. If you navigate there in your Strapi App you should see the Json and it has a "data" wrapper around everything and isn't the schema that the tutorial alludes to. So one of the first changes is

var url = "{STRAPI_API_URL}/posts"; needs to become var url = "{STRAPI_API_URL}api/posts";. Without a / 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 basically if you make your Post.cs file look like

      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; }
              }
          }    
      }

Then things should start to work. However on your index.razor file your Post object is no longer an array. So when you check allPosts.Length >0 you will want to check allPosts.data.Length now and on your foreach at the bottom it needs to be something like foreach (var post in allPosts.data) and from there you can access say your Title via @post.attributes.Title

Sorry if this is hard to follow, I was stuck on this all day and saw others struggling and wanted to help. Am 100% fresh to GitHub, sorry if this isn't the way to do it. Not sure what happened to the proposed Tutorial but let me know if that's something that might be useful and I'll at least try to revise the Tutorial on Strapi and post it somewhere or if a dev vlog with (my learning) Blazor/Strapi might be useful to anyone.

**Also just realized I removed the Image, so you'd need to put that back into your Post.cs file I think under Attributes class.

[JamesIde]

@BrianJesusFreakGreen Thanks for taking the time to respond on here, especially with working code too. At the time I was heavily focused on developing Blazor applications with Strapi but we (work) eventually migrated to Contentful for reasons mentioned above and dumped Blazor (lol) for React. I'd say if you've got a working version similar to the tutorial I'm pretty sure there are outlets available on the Strapi forums to get the tutorial updated, but I think the creating it on medium or dev.to might be a good bet.

Also on a sidenote, its super useful having these issues opened still for others to chime in (like @ Brian), so we can solve these problems together.

All the best