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.

nikcio / Nikcio.UHeadless

Make Umbraco headless using GraphQL

Nikcio.UHeadless

This repository creates an easy setup solution for making Umbraco headless. It comes with a wide range of extensibility options that can be tailored to your needs.

Works on

• Umbraco 9
• Umbraco 10

To get started, add the following to your Startup.cs.

Setup

using Nikcio.UHeadless.Extensions;

public void ConfigureServices(IServiceCollection services)
        {
            services.AddUmbraco(_env, _config)
                /* Code obmitted for clarity */
                .AddUHeadless()
                /* Code obmitted for clarity */
        }

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    /* Code obmitted for clarity */

    app.UseUHeadlessGraphQLEndpoint();

    app.UseUmbraco()
    /* etc... */
}

Now your content will be avalible at /graphql

To get started try adding some content to the root and run the following query:

{
  contentAtRoot {
    nodes {
      id,
      name
    }
  }
}

Documentation

Find the

…

View on GitHub