How to Use Orchard as Headless CMS

Orchard as a Conventional CMS

Orchard as headless CMS is a multi-tenant, modular, and open-source Microsoft-based application framework and CMS for ASP.NET Core. It was initially developed by a team working on Microsoft SharePoint, keeping the latter as its inspiration.  

Orchard’s predecessor was Microsoft Oxite; however, it is no longer an official Microsoft product. Instead, it falls under the .NET Foundation and is currently an active community-driven platform.  

You can easily find developers for Orchard since it is based on the modern tech stack. It is an excellent application framework for SMEs looking for an open-source tech platform backed by a reliable company. Moreover, it offers easy and cost-effective deployment to Azure Cloud and AWS.   

You can use Orchard as a conventional CMS with great features like audit trails, themes, etc., and as a headless CMS. This article is a guide to using Orchard as a headless CMS.  

Use Cases for a headless CMS

A headless content management system or headless CMS is a back-end-only content management system. The term “headless” refers to the idea of removing the front-end (head) from the back-end (body). It functions as a content repository that enables access to content through a RESTful API for display on any device.  

Thus, a headless CMS applies the RESTful API (JSON, XML) to deliver content wherever required. It, therefore, does not give importance to where and how the content is displayed. Instead, its focus is on storing and delivering structured content only.   

Here are some common use cases for employing a headless CMS:  

• Create a website using technology you are already familiar with. 
• Websites and web apps that use JavaScript frameworks (VueJs, React, Angular, etc.)  
• Websites built using static site generators (Jekyll, Middleman, etc.)  
• Server content for web and native mobile apps (iOS, Android, Windows Phone) using the same platform.  
• +Enrich product information on eCommerce sites.  

Orchard as a headless CMS   

Orchard as a headless CMS was first introduced in Orchard Core. First, let’s see the different CMS forms available in Orchard Core and their purposes.  

1. Full CMS

In the Full CMS mode, the front-end and back-end of an application are tightly coupled. The same application is used to host the back-end and front-end of the applications. Therefore, the application front-end uses features already provided by the CMS to display the content using native theme modules.  

2. Headless CMS

A headless CMS is front-end agnostic, meaning it has no default front-end system that can determine how content is presented. Therefore, you can publish your raw content anywhere using whichever framework you want. Front-end and back-end applications are not coupled; a CMS only allows you to edit content and access data using the REST APIs.   

3. Decoupled CMS

A decoupled CMS only manages the content and data and is not responsible for rendering the pages. It manages your content separately and is front-end agnostic, just like a headless CMS. However, it offers front-end content delivery tools like templates. Think of a decoupled content management system as a hybrid of standard and headless CMS; it has a head (front-end) that is not attached to the body (back-end) the way it is in a traditional CMS.   

How Does Orchard CMS Work

Orchard Core provides a Blank Site Recipe that does not set up Content, Themes, or Views. Instead, it provides content management functionality for setting up Orchard decoupled and a headless CMS.   

Here’s a step-by-step guide to setting up Orchard as a headless CMS.  

Step 1: Set up the project   

Create a new .NET core web app project using Visual Studio. There is no need to select the template; we can choose an empty template by default. Once the project has been created, add the Orchard Core CMS package to the project.  

You can add it by adding the “OrchardCore.Application.Cms.Targets” package reference item in the project file.   

Step 2: Update startup.cs file to configure the application to use Orchard CMS  

1. Edit the “ConifgureServices” method like this:   

2. Edit the “Configure” method like this   

Step 3: Start the application and set up the new site   

Run the application and set up your new site by entering the site name, admin credentials, time zone, etc. Make sure you choose Blank Site Recipe in the Recipe Dropdown to create a headless CMS site.   

Step 4: Create Content Types and Content Items    

We need to create content types and fields within those content types. A system can contain multiple content types, e.g., a site can contain a homepage, blog item, product page content types, etc. Once the content types have been created, we can add site data. Each content item is a document based on the content type, which defines fields and data that are added in those fields.   

Step 5: Enable APIs for front-end application  

• Enable GraphQL Module – By enabling the GraphQL module, you can see the GraphQL menu items. GraphQL is a generic explorer for GraphQL endpoints. This tool tests your GraphQL queries, which are, in turn, used to retrieve data from the CMS system.   

• Use GraphQL API – Use the GraphQL API endpoint in your application with GraphQL queries to retrieve data from the CMS. By using GraphQL queries, you only get what you want. You can define which content items and fields you require to render in your application, and it will only return those fields, which makes it very light and fast.   

Once this is done, your headless CMS will be integrated with a front-end application of your choice through GraphQL APIs.  

Headless Architecture    

Here’s a graphical representation of how a headless CMS operates.  

Reasons to Migrate to Headless Orchard CMS

Here are some reasons why you should migrate to a headless Orchard CMS:  

1. Flexibility   

Using Orchard as a headless CMS allows you to design and decide on an application front-end based on the technical expertise available in your organization. Moreover, you can use the same content repositories to display content using different tech stacks for different devices.   

2. Control  

You have complete control over the content repository and how data is sent to different systems using APIs.   

3. Easy to Use  

You can change your application branding without worrying about its impact on the application content.  

4. Adaptability   

With the digital revolution in full swing, new marketing and communication platforms are emerging. Using one platform, you can easily update and add as many marketing channels as you want while managing the content for all these gadgets.   

5. Save Time and Resources   

Orchard comes with a wide range of features to manage content, user roles, and many other features that can save you money and resources.    

Conclusion

In the end, shifting towards a headless CMS is necessary for every organization. Sooner or later, all companies will have to switch to enterprise services and solutions. Therefore, it makes more sense to take this decision now to fully leverage the power of omnichannel marketing to grow your business.  

If you need help transforming your conventional CMS framework into a headless CMS, feel free to contact us at [email protected].