Headless CMS – Need of the Hour
Headless CMS is a backend only Content Management System, built as a content repository. The content repository makes content accessible via RESTful API for display on any device. In other words, it serves the same content through an API to all platforms like mobile, desktop, etc.
There is a growing need to have application development agnostic of the content to be consumed. Such applications will allow the content to be added from anywhere. Headless CMS helps in keeping the content and delivery agnostic of the device and application.
What is Sitecore JavaScript Services (JSS)?
Sitecore JavaScript Services (JSS) is a toolkit for JavaScript developers, which allows them to build full-fledged customer solutions (like SPAs, web apps, and websites) using modern JS libraries and frameworks (such as React.js and Angular) by being completely unplugged from Sitecore.
Framework Agnostic Content with Sitecore JSS
Applications that use frontend technology cannot use Sitecore capabilities such as personalization, analytics, A/B testing, and others. To overcome these shortcomings, we need JSS. JSS enables scalability in Sitecore by introducing the Sitecore node server, which takes load from the Sitecore server. This provides the full support of the Sitecore Experience Platform by using frontend technologies like React, Angular, etc. This enables the frontend developer to work in a disconnected mode, without having a Sitecore instance.
Steps to Configure Sitecore JSS
- Download and install Node.js
- Install Sitecore JSS Command-Line Interface (CLI)
- Create a JSS application using React.js/Angular
- Start Sitecore JSS application
- Create the new component
- Test newly created component in the browser
- Get Sitecore ready for the deployment
- Deploy the JSS application
- Test home item in experience editor mode
- Run JSS application in connected mode
Starting with Sitecore JSS
There are two methods to start a JSS project –
- Code-First
- Sitecore-First
Code First
- The frontend developer works disconnected from Sitecore and defines Sitecore structures via in-code component definition and route data.
- Sitecore Information Architecture (templates, renderings, etc.) is generated via the import process.
- This approach is recommended for
- smaller projects or temporary sites (e.g. campaigns)
- frontend led projects
- micro apps with a larger site
Sitecore-First
- Sitecore Information Architecture (templates, renderings, etc.) is created by the Sitecore developer – no need for the import process.
- The frontend developer works disconnected from Sitecore and creates components and mock route data based on the specifications provided by the Sitecore developer.
- The contract can be defined first to allow concurrent work.
- This approach is recommended for
- larger/complex projects
- organization looking for full control over Sitecore IA
