CMS

Introduction to Sitecore JSS

Sitecore  JSS is one of the coolest features available in the Sitecore 9 Release and is a great push to build  your application using the Headless Architecture.

Currently Sitecore JSS has been supported in the following Js frameworks

  • Angular Js
  • React Js

We can expect support to Vue js in near future.

Pre-requisites:

  • Sitecore XP 9.0 .
  • Node JS(>= version 6.9)
  • npm(>=version 5)

In order to kick start building the applications using JSS  , first clone the  application from the git hub repository from the below link.

https://github.com/sitecore/jss

In my case I am working with advanced sample react application which is under samples\advanced-sample-react

Steps for Setting Jss Application in sitecore

  • Open windows command prompt and navigate to application path(eg: E:\jss-master\samples\advanced-sample-react) then run the below command ,which installs all modules listed as dependencies in package.json file.

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

  • Run  npm run setup command  in command prompt as shown below and we need to provide details of the website folder, Sitecore host name and API key which you have generated in  sitecore core database earlier.

  • This will automatically generate the connection strings in the below format in scjssconfig.json file which is under samples\advanced-sample-react.

  • you need to have active subscription license for the Jss server functionality ,the older partner license gives the below error while deploying  application into sitecore.

  • you need to install JavaScript Services Server and Infrastructure packages in your instance by downloading  from dev.sitecore.net.
  • Installation of  Javascript Services Server Package

  • Installation of  Javascript Services Infrastructure Package

  • After installation of above  packages you need to add  below code in the web.config

Sitecore.JavaScriptServices.Media.MediaRequestHandler handle and resolve the media types related to javascript services.

Make a request to http://site91.sc/sitecore/api/layout/render/jss?item=/&sc_apikey={YOUR_API_KEY}, we will get a json response in the below format  which implies all steps have been done correctly.

  • Add new site under sitecore/config in  samples\advanced-sample-react

 

  • create a new binding in IIS

  • Run the command npm run deploy-config.It will take config file under \sitecore\config folder and copy it to the Sitecore App_Config/Include/zzz folder.

 

  • Finally you can deploy your application into your sitecore instance by running npm run deploy-codefirst command.

  • you can see below message in command prompt after successful installation of packages into your sitecore instance.

  • Content tree in the sitecore looks something like this.

  • you should be able to see application in the browser as shown below.

  • After deploying the application if you have any  issue related to cors add  the below code  under httpprotocol/customheaders in web.config.

To know more information about the HTTP response headers go through the below link.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers

About The Author

Leave a Reply

*