DEV Community: Nikolaj Brask-Nielsen

3 Ways to go headless with Umbraco

Nikolaj Brask-Nielsen — Sun, 15 May 2022 12:05:30 +0000

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:

Open your Program.cs file.

Add the following using statements:

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

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

Make your GitHub profile standout

Nikolaj Brask-Nielsen — Sun, 20 Feb 2022 14:09:57 +0000

Making your GitHub profile stand out can be difficult if you're not the creator of something popular, but this doesn't mean you can't have an attractive profile anyways.

Using the profile README to create an attractive profile
On Github, you have the possibility of creating a profile README that will show up on your profile's front page. This is an awesome way to highlight your strengths and what technologies you're working with, but finding things to show is just one step of the process. We also have to think about how we're going to present it and make it eye-catching for the viewer.

More info

Step 1

Gathering your profiles information
When gathering the information you'd like to show, it's important to categorize and prioritize what's most important. Categorization can help the reader find what they are looking for and make your profile more user-friendly. One way to categorize could be by what area a skill set is a part of, for example, you could have a frontend, backend, and a DevOps category. Prioritization can help you decide in what order your information should be laid out.

Want to include stats or Repositories?
If you're looking to include stats like commits and stars, you can check out the github-readme-stats repository by anuraghazra. This lets you create cards for showing your stats and repositories.

anuraghazra / github-readme-stats

⚡ Dynamically generated stats for your github readmes

GitHub Readme Stats

Get dynamically generated GitHub stats on your READMEs!

View Demo · Report Bug · Request Feature · FAQ · Ask Question

Français · 简体中文 · Español · Deutsch · 日本語 · Português Brasileiro · Italiano · 한국어 · Nederlands · नेपाली · Türkçe

Please note that documentation translations may be outdated; try to use English documentation if possible.

Love the project? Please consider donating to help it improve!

Are you considering supporting the project by donating to me? Please DO NOT!!!

India has recently suffered one of the most devastating train accidents, and your help will be immensely valuable for the people who were affected by this tragedy.

Please visit this link and make a small donation to help the people in need. A small donation goes a long way. ❤️

Features

View on GitHub

Step 2

Layout your profile information
To make an eye-catching profile, you want to layout your information in an easy-to-read yet interesting manner. One way of doing this is to create an image with your information. For this, a tool like Figma allows you to easily create a simple design and export it to an SVG.

One way of laying out your information is with the help of shapes of different colors.

To do this, I've used a Figma plugin called Blobs which lets you create random blobs with ease. For the icons, I've mainly used Iconify which lets you insert a variety of different icons.

Step 3

Creating your README
When you have created a visual representation of the information, you'd like to show the time has come to create the README file. This is done by creating a repository with the same name as your user name. For example, my username is nikcio, so I created a repository named nikcio. Here we create a file named README.md.

We can now either use classic markdown or some basic HTML to place the image and other links on our GitHub profile.

<div align="center">
  <img src="./Github-body-content.svg" alt="Content">
</div>

<br />

<div align="center">
  <img src="https://github-readme-stats.vercel.app/api?username=nikcio&count_private=true&show_icons=true&hide=prs,stars&custom_title=Stats:&disable_animations=true&hide_border=true" alt="stats" />
</div>

<br />

<div align="center">
  <a href="https://nikcio.com/" target="_blank">
    <img src="./website-link.svg" alt="Website" height="32" width="114"/>
  </a>
  <a href="https://www.linkedin.com/in/nikcio/" target="_blank">
    <img src="https://static-exp1.licdn.com/sc/h/al2o9zrvru7aqj8e1x2rzsrca" alt="LinkedIn" height="32" width="32"/>
  </a>
  <a href="https://dev.to/nikcio/" target="_blank">
    <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png" alt="dev.to" height="32" />
  </a>
</div>

Then commit the file/files and see your GitHub profile shine with your new README.

View on GitHub

How to use Asp Net Core DI & Reflection

Nikolaj Brask-Nielsen — Sat, 12 Feb 2022 16:08:46 +0000

When using Asp Net Core, you have access to dependency injection in many cases, but how do you go about creating objects in your code using the same dependency injection?

What is reflection?

To start, we have to know what reflection is and how to use it. Reflection is used to create objects dynamically and can be used to create objects in a generic use case.

You can, for example, create an object from the assembly qualified name, which can be found on any type like this.

objectType.GetType().AssemblyQualifiedName;

When doing reflection you will be using the Activator object. To create an object from the assembly qualified name you found above, you would use code like this.

public object GetReflectedObject(object objectType)
{
    var assemblyQualifiedName = objectType.GetType().AssemblyQualifiedName;
    return Activator.CreateInstance(Type.GetType(assemblyQualifiedName));
}

I take out the assembly qualified name because I want to show how to decouple the creation logic from any type of object. This could make it possible to store the assembly qualified names and first later create the objects.

Adding DI to reflection

To add dependency injection you will need to use the IServiceProvider, which is used to get dependencies from the Asp Net Core IOC container. This can be done with a simple constructor injection like this.

public class Factory
{
    private readonly IServiceProvider serviceProvider;

    public Factory(IServiceProvider serviceProvider)
    {
        this.serviceProvider = serviceProvider;
    }
}

Then to add dependency injection we first have to locate a constructor before we can create the object instance with Activator.CreateInstance.

To find the constructor in this example, we require a specific object type to be the first in the constructor. Then we choose the first that matches that description. This can be done like so.

public void GetConstructor(object objectType)
{
    var type = objectType.GetType();
    var constructors = type.GetConstructors();
    var constructor = constructors.FirstOrDefault(
            constructor => GetFirstParameter(constructor) == typeof(Factory));
}

private static Type GetFirstParameter(ConstructorInfo constructor)
{
    return constructor.GetParameters().FirstOrDefault().ParameterType;
}

We can then check for any other parameters and get them with the service provider and then we have created Asp Net Core DI & Reflection.

public object GetReflectedObject(object objectType)
{
    var requiredFactoryObject = new Factory(serviceProvider);

    var assemblyQualifiedName = objectType.GetType().AssemblyQualifiedName;

    var parameters = GetConstructorParameters(objectType);

    var injectedParamerters = (new object[] { requiredFactoryObject })
        .Concat(GetDIParamters(parameters)).ToArray();

    return Activator.CreateInstance(Type.GetType(assemblyQualifiedName), injectedParamerters);
}

private IEnumerable<object> GetDIParamters(ParameterInfo[] parameters)
{
    return parameters.Skip(1)
        .Select(parameter => serviceProvider.GetService(parameter.ParameterType));
}

public ParameterInfo[] GetConstructorParameters(object objectType)
{
    var type = objectType.GetType();
    var constructors = type.GetConstructors();
    return constructors.FirstOrDefault(
            constructor => GetFirstParameter(constructor) == typeof(Factory))
        .GetParameters();
}

private static Type GetFirstParameter(ConstructorInfo constructor)
{
    return constructor.GetParameters().FirstOrDefault().ParameterType;
}

And with some extra refactoring, you can get this generic factory that can then create an object with a required constructor parameter.

/// <summary>
/// A factory that can create objects with DI
/// </summary>
public class DependencyReflectorFactory
{
    private readonly IServiceProvider serviceProvider;
    private readonly ILogger<DependencyReflectorFactory> logger;

    public DependencyReflectorFactory(IServiceProvider serviceProvider, ILogger<DependencyReflectorFactory> logger)
    {
        this.serviceProvider = serviceProvider;
        this.logger = logger;
    }

    /// <summary>
    /// Gets the reflected type with DI
    /// </summary>
    /// <typeparam name="T"></typeparam>
    /// <param name="typeToReflect">The type to create</param>
    /// <param name="constructorRequiredParamerters">The required parameters on the constructor</param>
    /// <returns></returns>
    public T GetReflectedType<T>(Type typeToReflect, object[] constructorRequiredParamerters)
        where T : class
    {
        var propertyTypeAssemblyQualifiedName = typeToReflect.AssemblyQualifiedName;
        var constructors = typeToReflect.GetConstructors();
        if (constructors.Length == 0)
        {
            LogConstructorError(typeToReflect, constructorRequiredParamerters);
            return null;
        }
        var parameters = GetConstructor(constructors, constructorRequiredParamerters)?.GetParameters();
        if (parameters == null)
        {
            LogConstructorError(typeToReflect, constructorRequiredParamerters);
            return null;
        }
        object[] injectedParamerters = null;
        if (constructorRequiredParamerters == null)
        {
            injectedParamerters = parameters.Select(parameter => serviceProvider.GetService(parameter.ParameterType)).ToArray();
        }
        else
        {
            injectedParamerters = constructorRequiredParamerters
            .Concat(parameters.Skip(constructorRequiredParamerters.Length).Select(parameter => serviceProvider.GetService(parameter.ParameterType)))
            .ToArray();
        }
        return (T)Activator.CreateInstance(Type.GetType(propertyTypeAssemblyQualifiedName), injectedParamerters);
    }

    /// <summary>
    /// Logs a constructor error
    /// </summary>
    /// <param name="typeToReflect"></param>
    /// <param name="constructorRequiredParamerters"></param>
    private void LogConstructorError(Type typeToReflect, object[] constructorRequiredParamerters)
    {
        string constructorNames = string.Join(", ", constructorRequiredParamerters?.Select(item => item.GetType().Name));
        string message = $"Unable to create instance of {typeToReflect.Name}. " +
            $"Could not find a constructor with {constructorNames} as first argument(s)";
        logger.LogError(message);
    }

    /// <summary>
    /// Takes the required paramters from a constructor
    /// </summary>
    /// <param name="constructor"></param>
    /// <param name="constructorRequiredParamertersLength"></param>
    /// <returns></returns>
    private ParameterInfo[] TakeConstructorRequiredParamters(ConstructorInfo constructor, int constructorRequiredParamertersLength)
    {
        var parameters = constructor.GetParameters();
        if (parameters.Length < constructorRequiredParamertersLength)
        {
            return parameters;
        }
        return parameters?.Take(constructorRequiredParamertersLength).ToArray();
    }

    /// <summary>
    /// Validates the required parameters from a constructor
    /// </summary>
    /// <param name="constructor"></param>
    /// <param name="constructorRequiredParameters"></param>
    /// <returns></returns>
    private bool ValidateConstructorRequiredParameters(ConstructorInfo constructor, object[] constructorRequiredParameters)
    {
        if (constructorRequiredParameters == null)
        {
            return true;
        }
        var parameters = TakeConstructorRequiredParamters(constructor, constructorRequiredParameters.Length);
        for (int i = 0; i < parameters.Length; i++)
        {
            var requiredParameter = constructorRequiredParameters[i].GetType();
            if (parameters[i].ParameterType != requiredParameter)
            {
                return false;
            }
        }
        return true;
    }

    /// <summary>
    /// Gets a constructor
    /// </summary>
    /// <param name="constructors"></param>
    /// <param name="constructorRequiredParameters"></param>
    /// <returns></returns>
    private ConstructorInfo GetConstructor(ConstructorInfo[] constructors, object[] constructorRequiredParameters)
    {
        return constructors?.FirstOrDefault(constructor =>
            ValidateConstructorRequiredParameters(constructor, constructorRequiredParameters));
    }
}

This code example was originally from Nikcio.UHeadless

Original file can be found here

Why making Umbraco headless makes sense

Nikolaj Brask-Nielsen — Sat, 12 Feb 2022 14:32:22 +0000

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

The easiest way to go headless in Umbraco using GraphQL

Nikcio.UHeadless

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

You can also find the package on NuGet.

Integration

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

Open your Startup.cs file.
Add the following using statement:
```
using Nikcio.UHeadless.Extensions;
```
In the ConfigureServices method, add…

View on GitHub