Headless CMS Use Case: Penn Mutual Builds a React App On Crafter

Many organizations find themselves relying on the same CMS they have been using for the last decade. When they were only concerned with managing a basic website and blog, then everything was perfect. However, the world has gone digital. A website isn’t the only channel that businesses should be concerned with, nor is it the only one where customers expect to find access to products and services from their favorite brands.

There has been a proliferation of content across multiple channels, including mobile apps, an ever-increasing collection of social media platforms, IoT devices, and more.

With legacy infrastructure becoming outdated, more and more companies are turning to headless CMSs to future-proof their businesses. Headless CMS use cases extend beyond just simple websites and blogs; they enable organizations to build content-rich applications using various technologies. This article will explain why organizations are making the shift to headless and provide an example of how Penn Mutual is using Crafter’s headless plus CMS to build a React web app.

The Challenges of Working With a Legacy CMS Platform

For companies to succeed in today’s digital environment, having a legacy CMS can cause more harm than good, yet many businesses might consider whether it’s worth migrating from an old legacy CMS. The reality is that continuing to work with a legacy platform can be problematic in today’s digital world.

Modern developers prefer to have access to the most popular and modern frameworks to create customer experiences, as the likes of React, Vue, and Next.js, among others, can be used to build dynamic content experiences. However, in some cases, legacy CMSs can restrict these developers to using proprietary frameworks and consequently provide limited options for developer tools, severely restricting the channels they can target.

Restrictions also extend to the work that marketers have to do and make it difficult for them to improve the user experience. With new channels continuing to emerge each day, a legacy CMS can mean that marketers are severely hampered and unable to adapt to provide customers with the content they want on the channels that they frequently use.

Aside from the challenges facing marketers and developers, legacy CMS platforms can also be difficult to maintain and be riddled with additional costs. This was the problem that Penn Mutual faced with the legacy CMS for its corporate website and advisor portal.

With an older tech stack that wasn’t appealing to modern developers familiar with JavaScript, they struggled to attract new talent. Plus, their marketers needed a CMS that can deliver content for all of their digital channels and not just a single website and provide the flexibility for their developers to use a React-based UI framework. Nevertheless, the marketers still needed the powerful and user-friendly content authoring tools like they had with Adobe AEM, their legacy CMS.

Moving to a Headless CMS

In a bid to satisfy the needs of both their developers and marketers while enhancing the customer experience, Penn Mutual chose to move to CrafterCMS, a modern headless CMS. As Penn Mutual wanted to move to the cloud, and given that CrafterCMS is cloud-native and built for the elastic cloud, Penn Mutual could deploy on to AWS infrastructure and scale without issues. They used AWS services such as EC2, S3, EKS, ELB, CloudFront for computing, storage, serverless computing and more for the CrafterCMS deployment.

As an open source headless CMS for the enterprise, Crafter was an ideal solution for Penn Mutual’s requirements. Unlike their legacy CMS, Crafter’s headless architecture makes it easy for developers to build websites, apps and facilitate omnichannel experiences using an API-first approach that allows them to use any framework, tool, or processes they want without restrictions.

Even better, the content teams didn’t have to sacrifice the authoring experience. Marketers are able to use Crafter’s drag/drop page building, WYSIWYG editing, and in-context previews and workflows. This provides them with the user-friendly features they need to create and optimize content for any digital channel. Crafter also has a serverless and stateless architecture that enables them to get the most out of AWS. As a result, IT teams can deploy apps to servers that automatically scale to meet demand.

Building a React App With CrafterCMS

Penn Mutual had already started to work on building a React-based single page application (SPA) with their legacy CMS, so they needed to easily migrate their pre-existing code so they could operate with CrafterCMS. Developers were able to use Crafter’s APIs, and its server-side scripting capabilities to create additional REST APIs to handle the headless content API requirements of the SPA, making the transition to Crafter from their legacy platform very easy.

React-based SPAs can provide more mobile-friendliness, higher speeds, and increased conversions. With server-side rendering support provided by CrafterCMS and Next.js, SEO was fully optimized as well. CrafterCMS provides marketer-friendly features that enable content authors to edit, preview, and improve the content experience and continue to build their web presence and customer engagement. Companies can reduce their time to market, lower development costs, and improve their ROI using a platform like Crafter.

Creating Modern Web Experiences With Crafter’s Headless CMS

Like Penn Mutual, businesses hoping to create modern web experiences can find success with the help of CrafterCMS' headless “plus” architecture. Managing multichannel and even omnichannel experiences is made possible through APIs that can connect to several digital customer channels. Also, the headless architecture makes CrafterCMS future-proof, enabling businesses to connect to channels that haven’t been created yet without changing their CMS again.

Easy to use content management features for the marketing team quicken publishing to these digital touch points, and unleash the creative power of their content authors. Crafter is an AWS cloud-native solution that provides elastic scalability and simplifies IT management while facilitating faster software development cycles and native support for modern CI/CD DevOps tools and processes.

Learn more about Penn Mutual and how they were able to leverage the power of a headless CMS by reading the case study.