1. Introduction

The purpose of this document is to enable you to start working with the FirstSpirit Experience Accelerator (FSXA). First of all, this chapter gives an overview of the extent as well as key concepts of the FSXA.

hybrid cms expe
Figure 1. Hybrid CMS Experience Accelerator

1.1. Story behind the FirstSpirit Experience Accelerator

The topic of the FirstSpirit Experience Accelerators is the fictitious “Smart-Home” company Smart Living. The concept is a hybrid approach, combining classic FirstSpirit capabilities with headless features.

The Smart Living theme comes with a complete design as well as thematically tailored news articles, products and other content.

The scope of the FirstSpirit Experience Accelerator is on the one side designed to act as a base that customers can use to get their content live fast. On the other hand it shows all the possibilities FirstSpirit offers with the combination of statically generated content and fragmented content.

The interaction of the Smart Living Global project with the FSXA JavaScript Frontend demonstrates the seamless collaboration of both content types. This is made possible by the Custom App Platform, which can be used to deliver a wide variety of frontend applications.

1.2. Advantages of a hybrid CMS

The hybrid focus of the FirstSpirit Experience Accelerator is intended to combine the best of the traditional FirstSpirit CMS architecture with the advantages of a headless approach.

1.2.1. Traditional CMS Architecture

traditional cms
Figure 2. Traditional CMS Architecture

The advantages and disadvantages of a purely classic utilization of FirstSpirit will be outlined here.


With the classic tools from FirstSpirit, such as the ContentCreator, powerful and established tools are available with which even complex projects can be implemented. These were developed over many years and have been improved again and again. Persons involved in the development of template as well as the creation of content and administration all benefit from FirstSpirit’s many years of development and the resulting continuous improvements.


The advantages are contrasted by a some disadvantages, which can vary in significance from project to project. First of all, classic projects are usually monolithic and less suitable for agile development processes. They are perfectly suited for the implementation of classical HTML websites. At the same time this is a weakness, since they are primarily focused on this channel and neglect other channels.

1.2.2. Headless Architektur

headless cms
Figure 3. Headless CMS

The application of a headless architecture is intended to overcome the disadvantages of the classical approach, but can cause new disadvantages.


Headless projects are very well suited for agile development. Modularity, as well as the separation of backend(s) and frontend(s), provide the possibility to publish new developments iteratively. There is no longer the need to work on a project over a long period of time before a “major” release can be made. Continuous integration and continuous delivery are enabled, which results in significantly faster release cycles and thus quicker time-to-market values.

Another advantage is that the respective output channels and touchpoints have the control over the presentation of content. This allows content to be used multiple times, thus providing a suitable UX for each touchpoint.


A major drawback is that most of the usual enterprise functionalities, e.g. preview options for created content, are missing. Moreover, pure headless approaches are rarely user-friendly and are rather oriented towards technically experienced people rather than business users

1.2.3. The hybrid Approach of FirstSpirit: FSXA

hybrid advantages
Figure 4. Advantages of the hybride approach

In order to combine the aforementioned advantages from the classic world with those of the headless world, FirstSpirit uses a hybrid approach. The FirstSpirit Experience Accelerator(FSXA) was developed to establish this concept and its advantages for customers.

Figure 5. Comparison competitors

This approach offers a production-capable stack from the beginning, so that you do not have to start on a bare headless CMS, as well as the ability to connect third-party systems, as is customary with FirstSpirit. The FSXA is a maintained and documented product and can serve as an example implementation on the one hand, but also directly as a ready basis for customer projects. This offers all customers the opportunity for a very fast go-live.

2. Components of the FSXA

The FirstSpirit Experience Accelerator comprises the hybrid project Smart Living Global, the FSXA JavaScript Frontend, the ContentCreator editorial environment, and the Custom App Platform.

Thus, the FSXA combines elements of FirstSpirit’s classic pre-generation with headless elements.

The descriptions about Smart Living Global in this paragraph mostly concern the editorial versions. The HowTo of publishing the editorial content is outlined elsewhere, e.g. in the Online Documentation for FirstSpirit.

2.1. Architecture of the FirstSpirit Experience Accelerator

This section will give an overview of the logical architecture of the FirstSpirit Experience Accelerator. The structure of the FirstSpirit project and a rough description of important templates is located in the chapter about Smart Living Global

The whole architecture of the FirstSpirit Experience Accelerator is designed to provide easy means to implement new clients which can fully utilze the templates and contents from the fs} project. Hosting and configuraton are fully provided by the e-Spirit AG.

As the e-Spirit AG takes care of the server configuration, the highest permission role granted to customers and partners is that of project admin. Server administration rights will not be passed on. Even though only project administration rights are permitted, altering settings in the wrong way can cause problems.

Figure 6. Architecture of the FirstSpirit Experience Accelerator

The FirstSpirit project Smart Living Global serves as a reference implementations within the FirstSpirit Experience Accelerator. This is a hybrid FirstSpirit project. Details about this project’s specifics can be found in the respective subchapter.

All editorial content is stored in the Smart Living Global project, and published in two different ways: the classic way, via HTML templates, we create what is displayed in the SiteArchitect’s preview and what can be displayed in ContentCreator. At the same time all content is transformed to JSON format and stored in the FirstSpirit CaaS and Navigation Service.

The headless Smart Living Global PWA pulls all contents from the CaaS and from the Navigation Service.

2.2. Smart Living Global

Smart Living Global is a hybrid FirstSpirit project. All content is written to the FirstSpirit CaaS in JSON format, from where a PWA can retrieve and use it as needed. At the same time, the project still has classic templates that enable static generation and can serve as editing previews for ContentCreator and SiteArchitect. For the ContentCreator, however, the PWA version can alternatively be integrated directly, via the Omnichannel Manager.