3 Ways to go headless with Umbraco

What is Umbraco?

Umbraco is a CMS framework for building great editor experiences. It comes with a fully fleshed backend for easy content management and provides a rich and flexible experience for developers.

Umbraco is built on the Asp Net platform, making it easy to use Razor to build your frontend. But this also locks you to using Asp Net as your frontend. Which is where making Umbraco headless comes into the picture. By making Umbraco headless, you allow your team to create a decopled frontend in any technogly.

So how do I go headless with umbraco?

There's a varity of ways to make Umbraco headless, which comes with different pros and cons. I've collected 3 examples here of ways that you could go about turing Umbraco headless.

Vertica.Umbraco.Headless

This is a highly flexible solution created by Vertica A/S based on hooking into the Umbraco render pipeline and outputting JSON data instead of html by doing this you can query data based on the route requested in a frontend and use the JSON response to render your frontend.

Pros

• Friendly - plug & play headless CMS capability for Umbraco
• Flexible - 100% extensible and customizable
• Open - integrates seamlessly with the Umbraco ecosystem, thus imposing no limitations towards other Umbraco packages and add-ons

Cons

• Limiting quering - It's not possible to select only the data you need, like in GraphQL

vertica-as / Vertica.Umbraco.Headless

Vertica Umbraco Headless Framework

This is an extension for Umbraco (version 9+) that lets you use your Umbraco content in a headless fashion. It is highly customizable, and you can tweak or replace every aspect of the generated output.

Vertica Umbraco Headless Framework (VUHF) is not to be confused with the Umbraco Heartcore, commercial headless SaaS offering from Umbraco. This is purely a rendering framework, designed to replace (or complement) the rendering mechanism within Umbraco.

The framework is build to be:

• Friendly - plug & play headless CMS capability for Umbraco
• Flexible - 100% extensible and customizable
• Open - integrates seamlessly with the Umbraco ecosystem, thus imposing no limitations towards other Umbraco packages and add-ons

Installation

First install the VUHF NuGet package in your Umbraco project:

dotnet add MyProject package Vertica.Umbraco.Headless.Core

Now open the Startup class of your Umbraco project and include the VUHF core extensions by adding:

using

…

View on GitHub

Nikcio.UHeadless

UHeadless is a GraphQL based package that allows you to query your data via. a GraphQL endpoint. UHeadless supports various ways of quering your data and is fully extendable to fit your needs.

Pros

• Easy to setup
• Fully extendable - can be customized to fit your needs
• GraphQL - query only the data you need

nikcio / Nikcio.UHeadless

The easiest way to go headless in Umbraco using GraphQL

Nikcio.UHeadless

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 Version
Umbraco 10	v3.x.x
Umbraco 12	v4.x.x
Umbraco 13	v4.2.x+ & v5.x.x
Umbraco 14	v6.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

You can also find the package on NuGet.

Integration

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

1. Open your Program.cs file.

2. Add the following using statements:

   using Nikcio.UHeadless;
   using Nikcio.UHeadless.Defaults.ContentItems;

3. On the UmbracoBuilder, add the…

View on GitHub

Build your own

If you're not feeling satified with any of the other options there's always the possibillity of building your own. This gives you the abillity to totally customize the setup of developer experice of the integrations. But you also need to maintain the package yourself. For example at Limbo (formerly skybrud) they're building their own headless package for internal use.

Pros

• Get to build it - you decide what goes in

Cons

• Maintenance - you have to maintain the package

skybrud / Skybrud.Umbraco.Spa

Work in progress...

Skybrud SPA

Skybrud.Umbraco.Spa is a package we use internally at @Limbo for making large single page applications (SPA) using Umbraco as a headless CMS.

Installation

For Umbraco 8, the package is only available via NuGet. Either via the .NET CLI:

dotnet add package Skybrud.Umbraco.Spa --version 3.0.0

or the NuGet Package Manager:

Install-Package Skybrud.Umbraco.Spa -Version 3.0.0

Other versions of Umbraco

• Umbraco 10+: See our newer Limbo.Umbraco.Spa package.
• Umbraco 7: See the v2/main branch.

View on GitHub

Extra: Umbraco Heartcore

Umbraco has it's own headless solution that you can buy into called Umbrao Heartcore. This gives you a managed REST API and GraphQL endpoint. But the catch is that many of the packages from the Umbraco commuity can't be used.

Pros

• Managed - ships with managed REST API, GraphQL, CDN, and more
• Automatic upgrades
• Hosting - Umbraco will host the solution for you

Cons

• Payed
• Package compatibillity - Not all Umbraco packages can work with Heartcore

Comments

[David Peck]

Useful. I'd not heard of these two packages. Another option is pushing Umbraco data (on publish/save) to MondoDB Atlas. You can then use MongoDB App Services to access the data via GraphQL (or you can write your own API controllers if you prefer).