logo-jss
ASP.NET

Taking Sitecore Headless with Sitecore JSS

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+:

  1. The REST API for the ItemService
  2. JSS
  3. SXA

 

In this blog we will see the implementation of Sitecore JSS in Disconnected mode and Sitecore Integration.

Sitecore JavaScript Services(Sitecore JSS):

A set of capabilities allowing JavaScript developers to build solutions(SPAs, PWAs, websites) using modern UI libraries and frameworks (React, Angular, Vue) in a physically decoupled way without losing the value of the Sitecore Experience Platform.

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.

Prerequisites

  1. Node JS(>= version 6.9)
  2. npm(>=version 5)
  3. JSS CLI

 

Getting started:

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.

Create JSS App

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.

JSS start command

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.

localhost browsed

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.

zoomedcodechange

Here we are changing the ‘heading’ field.

(c)Refresh the JSS app rendering window in the browser to see the reflected changes.

code change reflect

JSS Sitecore Integration:

Prerequisites

1.Sitecore.NET 9.0.1 (rev. 171219) or later

2.Active Subscription licence

3.JSS Server packages (You can install JavaScript Services Server and Infrastructure packages in your instance by downloading from  https://dev.sitecore.net/).

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.

jsssetupzoomed

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

jssdeployconfigzoomed

This will take the Sitecore config patch files under sitecore/config and copy them to the Sitecore App_Config/Include/zzz folder.

4.App Deployment

Now we are all ready to deploy our JSS app to the Sitecore instance by using the command ‘jss deploy app –includeContent –includeDictionary’.

appinclude

This will:

(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.

JSS content in Sitecore

 

6.Hosting the app:

By default sitecore provides a host name. Open the configuration patch (sitecore\config\<appname>.config) and confirm the hostName attribute.

hostname

  • 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).

localhost

  • 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.

Code change through Sitecore

The changes will be reflected in the site

Sitecore change in site

Issues faced:

1. Ensure to use correct and compatible version of ‘Javascript Services Infrastructure Package. Else you will face the Unexpected response from import service issue as below when trying to deploy the app.

Eror

2.After deploying the application if you have any issue related to CORS as below

cors

add the below code under httpprotocol/customheaders in web.config.(Include you site URL in Access-Control-Allow-Origin)

References:

https://jss.sitecore.com/docs/getting-started/quick-start

 

 

 

 

 

 

About The Author