Using Umbraco 13 as a headless CMS for a Blazor Website

Umbraco, Headless
26/05/2024

Umbraco is the coolest CMS since.. Err... I don't really know, I've been using it since version 4 and it might have been cool then, it wasn't as cool in the later years, because it wasn't that useful when you wanted to go headless when headless and JamStack became cool.

But... Since Umbraco released the Umbraco Content API, it's cooler than ever. As long as you know how to use it.
With previous releases, I've been using Vue and Svelte with the Umbraco MVC-solution to create awesome websites for customers. Now we can use the Content API to create a headless application, even with Blazor.

Download the source code here.

The main things I've done in my backoffice-project: 

  • I've changed the default route for all pages to my localhost frontend (see the CustomRouteController.cs and the program.cs to reference that file)
  • I have changed the program.cs to use the better SwaggerGenOptions and the CustomDeliveryApiJsonTypeResolver
  • I added CORS

Then in the frontend, I've added a Service Reference to the Swagger Client (installed NSWAG):

Namespace: UmbracoBlazorHeadless.Frontend

Url: the local swagger url

Class for the generated code: UmbracoApi

Code generation language: C#

Additional code generation options: /GenerateClientInterfaces:true /GenerateNullableReferenceTypes:true /GenerateOptionalParameters:true /JsonLibrary:SystemTextJson

 

 

Then I added UmbracoClient.cs:

My advice: clone my repo and start testing it.

I'm also working on a Umbraco 14 version, this will come out later. Check my website regularly for updates or follow me on LinkedIn