In this tutorial, you will learn about how to use Episerver CMS as a headless CMS. Traditionally when working with Episerver, to render pages or blocks on a website you would C# to write HTML within a view using server-side architectures. To run Episerver as headless CMS all the content needs to be accessible via an API. There is no built-in front-end or presentation layer. In Episerver lingo this means that all pages and block data are accessed by reading data returned from the content delivery API. By only calling data through the content repository API means the CMS more decoupled from your architecture.
When using a headless CMS, the web head is written as a completely standalone application. The calling app can be built using any language you want, however, let us be honest, that app will likely be a Javascript-based website written using ReactJS or VueJS. This new architecture opens up a whole new world of possibilities, exciting times right? To enable the content delivery API, install the Nuget package Episerver.ContentDeliveryApi:
After installing the plug-in, you will need to give the ContentApiRead role read-access to the homepage and all of its children (assuming the whole site is available to the API). Within the Episerver admin area, under 'Set Access Rights', ensure the ContentApiRead role has 'read' and 'Apply settings for all subitems' are both enabled.
Next, you will either need to create or modify the WebAPi config, like so:
Which will need to be registered within global.ascx:
Next, you will need to configure the API. This can be done within a C# initlisatoin module, like so:
The code above makes the API public so anyone can query it. It also enables a special site definition API. This is useful for debugging at the start. Enabling it will allow you to test that the content API is working. To check the site definition API you can access it like this:
This will return a bunch of data, including siteSettings, language selectors, currencies etc.. If you want to query the API for a specific page or block, you can query it using the content API:
If the content exists, the API will return some corresponding JSON, like so:
