Using Umbraco 13 as a headless CMS for a Blazor Website
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