Sitefinity DX + Angular: Out-of-the-box Headless CMS Experience

A headless CMS, as opposed to a traditional CMS, omits the frontend and is not bound by a specific delivery channel, such as a website. There is no presentation, no frontend development toolset out-of-the-box. In other words, there is no head – hence the name. In a headless platform, the content is made available via APIs and you can have anything on the receiving end: websites, mobile apps, AR and IoT devices and various integrations with third-party systems.

Unlike Headless, a Decoupled CMS has kept the publishing tools of traditional content management, meaning it has an inherent presentation layer and frontend components are available right out of the box. A decoupled CMS has an architecture that clearly separates the management and storage of content from the pages and templates that display it. That is to say, the frontend is decoupled from the backend. The two layers communicate via APIs, which expose the content to one or many consumers, from websites that can be developed with the built-in toolset (pages, widgets, templates) to various platforms and frontend frameworks that can consume the data in the API responses.

Stand-alone renderer apps allow extra flexibility developing for various projects and purposes and enable adopters to make the most of their tech stack and available dev talent. An API-first platform like Sitefinity DX can be deployed in classic web content management implementation and deliver experiences through the built-in web channel, complete with user-friendly drag-and-drop page building and WYSIWYG content editing. At the same time, the content and layout APIs can deliver content to multiple frontends in headless scenarios, with all the built-in publishing capabilities available to content creators, including templating and personalization.

A decoupled renderer application built on .NET is available out of the box. Leveraging the content APIs that connect the .NET frontend application with the Sitefinity backend, other renderers can consume Sitefinity content just as easily. These stand-alone renderer applications can be built on JS (Angular, React, Gatsby, Vue) or .NET frameworks (Blazor). Sitefinity DX comes with pre-packaged samples to kickstart your frontend development for Angular, React and Blazor.

Being able to build the frontend of your website on any technology, besides the native presentation layer, can in many cases ease the learning curve, shorten time to value and save resources.

Sitefinity offers a great number of widgets out-of-the-box, but further extending and customizing it requires knowledge of .NET. If you’re not familiar with C# or .NET (which most frontend developers aren’t), client-side development in a headless context will let you use a familiar frontend framework.

Besides, the customer journey involves multiple channels of communication, beyond a website. Developing against a headless CMS, you can build anything that complements your website: a custom landing page, a PWA, a mobile app, or a single page application (SPA).

You might already have an app that consumes data from another provider, so you can quickly repurpose it to work with Sitefinity. Instead of rewriting it on .NET and integrating it with your Sitefinity instance, it would be easier to simply point it to the Sitefinity OData or GraphQL endpoints.

Sitefinity DX has all the essential publishing tools of a traditional CMS with the added benefit of API-first approach to content delivery. Sitefinity DX comes with powerful, well-documented and standard-compliant REST APIs for content, layout, and personalization. The GraphQL protocol is also supported, fully integrated with the existing user interface for managing REST. A starter kit of Angular components is available, seamlessly integrated with the popular Kendo UI library for Angular.

The Sitefinity page editor works with reusable components called widgets. The entire framework for the Angular renderer is fully set up, including integration with the WYSIWYG editor. All you need to do is build widgets. Widget development for the Angular Renderer is just like developing standard Angular components.

Stand-alone renderers built on different technologies, including Angular, are tightly integrated with the platform, so drag and drop page building, widget configuration, WYSIWYG content editing and personalization options are available right out of the box.