Getting started with Sitecore Headless Development on Sitecore 10

Getting started with Sitecore Headless Development on Sitecore 10 with ASP.NET Core and Docker

Overview

Sitecore 10 takes advantage of a number of new helpful features to make development easier and the website more performant.

• Docker containers

• Built-in content serialization

• Headless rendering with ASP.NET Core

The culmination of these and one of the most exciting new features of Sitecore 10 is the introduction of headless development using the ASP.NET Core rendering SDK. This allows us to abstract the rendering logic to a light-weight ASP.NET Core rendering host allowing the Content Delivery role to deal primarily with tracking and the layout-service while the Content Management role is responsible for maintaining and updating the content.

This flow allows a lot of the development to focus on the rendering host application and not the backend of Sitecore, where the rendering host is our front end and all of Sitecore is our backend.

The benefits here are two-fold, the rendering host becomes much easier to scale allowing for better performance, and it becomes much easier to develop against as we don’t need to completely restart Sitecore for every deployment.

Headless Sitecore In Action

At a high level, it is clear this is a huge step forward, but I think the best way to appreciate these changes is to see it all in action. Sitecore provides a quick-start solution that can be used to test the new functionality or quickly start new projects on their official documentation website. This is where the benefits of docker can be realized. In order to get up and running on Sitecore 10 Headless we simply need to:

• Install prerequisites

• Download the quick start template

• Init (PowerShell script)

• Deploy (PowerShell script)

After completing these four steps, we will have a fully functional containerized Sitecore environment using the ASP.NET Rendering SDK. No more installing SOLR or SQL.

Once the containers are running, we can open the solution and start developing. Because we are now utilizing the rendering host, development is also much faster. The quick start template comes with a task that watches the solution and automatically deploys any changes in seconds.

For anyone familiar with Sitecore development, the flow is largely the same but is helped by one of the other new features, built-in content serialization and mapping. If you are familiar with Unicorn, the concept is not much different, but with the added benefit of being included out of the box.

Consider the following scenario of creating a new component. We will need a data source, model, and view. In Sitecore 10 headless, we can create the template on CM, save it, and it will be automatically serialized and mapped to ASP.NET Core rendering SDK fields.

Then we can create a simple model in our solution.

As well as the view, using ASP.NET Core helpers.

Finally, we register the component in our start-up class.

Save all files in the solution and add it to the page, and we can see our new content without having to restart Sitecore.

Why is headless better?

As you can see, the flow is mostly the same. Creating data sources and mapping them to models and views, but in our Sitecore 10 headless implementation, we skipped several time-consuming steps that we would have previously had to do.

• We didn’t have to set up serialization or install third-party serialization tools.

• We didn’t have to create a controller.

• We didn’t have to map our Sitecore item to our model.

• We never restarted Sitecore.

Skipping these steps allowed for a much faster turn around of seeing our new component on the page. The time saved here is significant.

It should be noted, however, that if we want to implement some advanced logic on a new component, the flow has changed a bit. Since we are no longer dealing with controllers, our custom login must be written in a Contents Resolver or a custom View Component, which has a little bit of a learning curve. 

It should also be noted that there still are a few features that are not supported when using a rendering host.

• Horizon

• Edit frames

• Sitecore Forms

• Invocation of xConnect events, goals, and outcomes from C#

I think the improvements included in Sitecore 10 Headless are a massive step in the right direction. Consider all the time saved by the following.

• Solution set up and maintenance is made easier and faster by Docker containers and out of the box serialization.

• Performance and scalability are increased by abstracting the backend (Sitecore) and the front end rendering host.

• Development speed is greatly increased by the previously mentioned improvements and the out of the box model mapping and continuous deployments preventing us from having to restart Sitecore.

If you are considering a new Project on Sitecore and don’t need any of the unsupported features, I think it is a no-brainer to start with the Sitecore 10 with ASP.NET Core Headless Development quick-start template. In my opinion, these improvements are too good to pass up.