DEV Community

Nikolaj Brask-Nielsen
Nikolaj Brask-Nielsen

Posted on

Why making Umbraco headless makes sense

When choosing a CMS system, it's common to look at the features a given system provides. You might consider the editor experience or how you could integrate clients' existing content providers, for example, video platforms, user databases, or CRM systems.

But most importantly, you consider what the development process would look like for you as a developer. Are you using the technologies you want to use, and does it give you the extensibility you need?

When looking at the Umbraco CMS (v9+) you find many ways to integrate and utilize existing systems in the CMS journey and an overall smooth editor experience. You get access to newer technologies like .Net 5+ and, thereby, everything that comes with the evolving .Net 5+ framework.

But one element that might discourage many developers from choosing this CMS is the absence of headless integration. Because although you get many features and a great editor experience, the frontend limitations can be challenging for non-Dotnet frontend teams. It also excludes a whole swath of modern frontend frameworks from being used without developing a custom headless integration or working within the Razor templating language.

Because of this, the Umbraco HQ created the Umbraco Heartcore project that builds upon the existing Umbraco CMS by adding a headless integration in GraphQL. The only problem with this solution is the pricing. Because Umbraco CMS is open-source and free to use, you might see this product solution as a barrier to entry. It also makes it impossible to use your infrastructure to manage your CMS as they require the usage of Umbraco Cloud.

So although the CMS has a headless version, this doesn't give the same flexibility that you can get from the open-source project. Therefore, multiple projects have been started by the Umbraco community to make the CMS headless with either a simple endpoint to get content data or a more complex GraphQL integration for a more custom output. Unfortunately, many of these projects lack production viability and or documentation, making them inaccessible to the greater Umbraco community.

I've therefore taken the assignment upon myself to create a GraphQL integration to open the headless CMS possibilities for Umbraco. The project is still in the early stages but already offers queries for content and their properties, and it's built on the Hot Chocolate framework making it easy to extend and secure.

GitHub logo nikcio / Nikcio.UHeadless

The easiest way to go headless in Umbraco using GraphQL

Nikcio.UHeadless

Quality Gate Status Build UHeadless Nuget Downloads Nuget Version Nuget (with prereleases)

Welcome to Nikcio.UHeadless, a powerful package that enables you to create a headless GraphQL interface for your Umbraco CMS. This package provides an easy to setup solution for exposing your data and offers a wide range of extensibility options to tailor the headless functionality to your specific needs.

Compatibility

The Nikcio.UHeadless package is compatible with the following Umbraco versions:

Umbraco version Supported Versions
Umbraco 9 v1.x.x & v2.x.x
Umbraco 10 v2.x.x & v3.x.x
Umbraco 11 v3.x.x & v4.x.x & v5.x.x
Umbraco 12 v4.x.x & v5.x.x

For more information, please refer to the Versioning section.

Setup

Installation

To install the Nikcio.UHeadless package, run the following command:

dotnet add Nikcio.UHeadless
Enter fullscreen mode Exit fullscreen mode

You can also find the package on NuGet.

Integration

To integrate the package into your project, follow these steps:

  1. Open your Startup.cs file.

  2. Add the following using statement:

    using Nikcio.UHeadless.Extensions;
    Enter fullscreen mode Exit fullscreen mode
  3. In the ConfigureServices method, add…

Top comments (0)