What is a Headless CMS?
A headless CMS is a back-end only content management system that makes content accessible via an API for display on any device. A Headless CMS focuses entirely on the administrative interface, workflows, collaboration and the organization and delivery of content. It doesn’t concern itself with presentation layers, templates, site structure, or design.
There are 3 headless offerings out of the box in Sitecore 9+:
- The REST API for the ItemService
In this blog we will see the implementation of Sitecore JSS in Disconnected mode and Sitecore Integration.
Headless offering by Sitecore JSS:
JSS uses the Layout service to support Front-end Apps while maintaining full Sitecore Experience Editor and personalisation features. This is seen as a true Headless offering as it returns serialized presentation details as well as support for tracking and analytics.
Sitecore JSS Disconnected mode:
Sitecore JSS Disconnected mode is mainly beneficial for the front end developers as they can change the content through the code itself.
- Node JS(>= version 6.9)
- npm(>=version 5)
- JSS CLI
1.Create a sample app
To get started, choose an application template based on your needs and desired frontend framework.
For example, Here we are using ‘jss create tablogapp react’ which would create a React sample in a tablogapp folder under the current directory.
2.Start the app in disconnected mode
Once the app is successfully created, to start the app in disconnected mode which uses locally defined content, run ‘jss start’ within your JSS app.
As a result the app will be built and a local development server will be started. Your default browser should open with http://localhost:3000 rendering your JSS app.
To modify the content through code:
(a)Open the newly created app in visual code.
(b)Change the content as desired in the respective yml file under the routes folder and save the changes.
Here we are changing the ‘heading’ field.
(c)Refresh the JSS app rendering window in the browser to see the reflected changes.
JSS Sitecore Integration:
1.Sitecore.NET 9.0.1 (rev. 171219) or later
2.Active Subscription licence
4.Create an API key in sitecore core database under /sitecore/system/Settings/Services/API Keys using the template /sitecore/templates/Settings/Services/API Keys and give Allowed Controllers to *.
Steps to follow:
1.Configuring the Sitecore connection
To configure the Sitecore connection, run ‘jss setup’ at a command line within your JSS app, and follow the prompts. Provide the several pieces of information asked by the script.
As a result, jss setup will generate the /scjssconfig.json file that contains your JSS connection settings. You can manually change the settings here if needed.
2.Verify your server components installed
To verify your server components installed, visit http://your-sitecore-instance/sitecore/api/layout/render/jss?item=/&sc_apikey=TEST. You should receive HTTP Error 400.0 – API key is not valid if it is working correctly.
3. Config deployment
The JSS app is registered with Sitecore using config patches that are deployed to the Sitecore server. You can deploy the configs automatically using ‘jss deploy config’ within the app
This will take the Sitecore config patch files under sitecore/config and copy them to the Sitecore App_Config/Include/zzz folder.
Now we are all ready to deploy our JSS app to the Sitecore instance by using the command ‘jss deploy app –includeContent –includeDictionary’.
(a)Run the production build of your app (by default the build package script)
(b)Generate the app manifest, which defines the Sitecore structure needed to power the app
(c)Generate a JSS manifest package that contains your app manifest and referenced media files
(d)Install the package over HTTP(S) on your Sitecore instance.
(e)Copy build artifacts to the Sitecore website folder
5.Result of successfull deployment of the app
Once the app is deployed successfully the jss app content shows up in sitecore content tree.
6.Hosting the app:
By default sitecore provides a host name. Open the configuration patch (sitecore\config\<appname>.config) and confirm the hostName attribute.
- Ensure the desired host name is mapped to your localhost via a hosts file entry. (On Windows the hosts file can be found at C:\Windows\System32\drivers\etc\hosts).
- After adding the host name entry, add it as a binding in your IIS instance as well
7.Now you should be able to browse the site through the hosted URL i.e., http://tablogapp.dev.local/
8.Handling the content through Sitecore
After successfully executing the above steps the site content can now be handled through the Sitecore as well. The content can be edited through the Content editor or through the Experience editor.
The changes will be reflected in the site
2.After deploying the application if you have any issue related to CORS as below
add the below code under httpprotocol/customheaders in web.config.(Include you site URL in Access-Control-Allow-Origin)
<add name="Access-Control-Allow-Origin" value="http://tablogapp.dev.local" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
<add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
<add name="Access-Control-Allow-Credentials" value="true" />