WOOLI – Headless Commerce with Sitecore JSS – Part 1

In this blog series I will cover for you how you can create Headless Commerce Solution on the Sitecore Experience Platform by utilizing Sitecore JSS.

WOOLI has been in the EPAM lab since the JSS Technical Preview. So now EPAM is ready to share it with the Sitecore community, and that is simply great.

This is what you need in order to follow my tutorial:

  1. Sitecore Experience Commerce 9.1 (
  2. Sitecore JSS – 11.1.0 (
  3. NodeJS – 10.15.3 (
  4. WOOLI –

First let’s start our Sitecore Instance and make sure that everything is operating and Commerce is loading and our certificates are in place.

Lets make sure that we can load Sitecore Commerce

Lets make sure that we can load Sitecore Content Editor

All Right now, is the fun time, let’s go ahead and install NODEJS and Sitecore JSS. Using choco lets install nodejs

choco install nodejs

What is Choco? It is a package manager for Windows. Here is how to get it.

Okay so by now we have node installed, let’s go ahead and install Sitecore JSS. If you don’t know how to install Sitecore JSS, here is the link to my other blog.

How to Install Sitecore JSS

So far everything was smooth. Make sure you are installing the JSS version that is compatible with XC 9.1.

And When you are creating an API Key, you need to be in the Master DB.

Now it is time for the easy task to build and deploy WOOLI to the Sitecore.

These are the following operation that you will need to perform in order to continue:

  1. Run npm install in the folder to install all the node_modules
  2. Add Nuget Packages Sources
  3. Restore Nuget Packages
  4. Execture scr/build.ps1

If you don’t do that, this is what you will get:

Make sure you add the appropriate Package Sources as it is highlighted in the repository readme

So once you run the build.ps1, all your code will build and deploy.

Lets Open the Content Editor and we will see Wooli has been deployed to our Sitecore Instance, where Sitecore Commerce is also installed.

Change the Catalog

Don’t forget to Rebuild Indexes

Make sure you have the appropriate bindings set up and load up http://wooli.local/

If you have any questions or problems reach out to me on Twitter or LinkedIn, or you can create an issue in GitHub, that will be the best way to do, you can be helping other as well

Stay tuned for the next blog about Headless Sitecore Commerce with Sitecore JSS

Sitecore SXA and JSS Datasource Location Fix

So many of you know that until 9.2 with JSS 12, there were some conflicts between SXA and JSS on the same environment, to be more specific they were not compatible.

So if you are using Sitecore 9.0.2 and JSS 11 and SXA 1.8 on the same environment, and you have created a Sitecore JSS site and then you had installed SXA on top of it. And now your content authors have to do extra work in order to add components to the page in the Experience Editor, they get extra steps now.

So your renderings are set up correctly (

When you try to add component to a page, you select a component

and then you get prompted to create a component and give it name

But when you click to create it again pop-ups with a window to select a component and give it a name

Usually when you install something it should not break, but in my case a new pipeline was added.

Here is the compiled list of all the pipelines, that I see in the showConfig.aspx

ScriptedRenderingDataSourceRoots - [Cognifide.PowerShell]
GetDatasourceLocation - [Sitecore.XA.Foundation.LocalDatasources]
AddAdditionalTemplates - [Sitecore.XA.Foundation.LocalDatasources]
AddDatasourceLocations - [Sitecore.XA.Foundation.LocalDatasources]
RestrictFallbackDatasourceLocations - [Sitecore.XA.Foundation.Multisite]
SetFallbackDatasourceLocations - [Sitecore.Kernel]
GetDatasourceTemplate - [Sitecore.Kernel]
GetTemplatesForSelection - [Sitecore.Kernel]
CheckDialogState - [Sitecore.Kernel]
AddPageDataFolder - [Sitecore.XA.Foundation.LocalDatasources]
AddCompositePageDataFolder - [Sitecore.XA.Feature.Composites]
AddCompositePageDataFolder - [Sitecore.XA.Foundation.LocalDatasources]
GetDatasourceTemplate - [Sitecore.XA.Foundation.LocalDatasources]
ExtendGetDatasourceDialogUrl - [Sitecore.XA.Foundation.LocalDatasources]

The one that creates me the problem is this one “GetDatasourceTemplate

For the quick fix all you need to do is remove or disable the following file (SelectRenderingDatasource.xml) – location below

Before you delete anything important note this approach is not recommended as far as you want to use the SXA module itself. It will break SXA functionality.

After you install the SXA module, it overrides the logic for SelectRenderingDatasource in Website\sitecore\shell\override\Applications\Dialogs\SelectRenderingDatasource\SelectRenderingDatasource.xml (calling all other related logic). 

This will let you add the component to the page and then it will prompt you to give it a name

Sitecore JSS Series for Developer: How to deploy your Sitecore JSS app to Netlify with Sitelify (5 of 5)

In this last step, we will go ahead and deploy our web site to the Netlify with the help of Sitelify.

  1. How to setup Sitecore JSS
  2. How to connect to Sitecore Instance
  3. How to build a functioning Sitecore JSS app
  4. How to deploy Sitecore JSS app to Sitecore
  5. How to deploy to your Sitecore JSS site to Netlify with Sitelify

What is Netlify?

Netlify is a service, that allows you to easily deploy and host your modern static websites and it is blazing fast. Deploy your site in 30 seconds.

  • Hosting Free
  • Continuous Deployment from Git
  • Serverless Functions

The first step lets go ahead and set up an account with Netlify, it is FREE, and create an access token.

Netlify Access Token
Save the token you will need later in the tutorial

What is Sitelify?

Sitelify brings your Sitecore sites built using Sitecore JavaScript Services (Sitecore JSS) to Netlify, quickly and easily.

To get more info about Sitelify, please visit the website directly:

You will need to acquire an Access Token in order to deploy the site to the Netlify. Request Access

Official Documentation >

The first step to do install Sitelify Manager

Sitecore Launchpad with Sitelify Manager

Next, we will open Altola.Sitelify.config that has been added to our App_Config


Please follow the official documentation, since this blog post, might not be updated with the latest documentation.

Once you generated the Netlify token and obtained a Sitelify Access Token, you can enter them in the config shows above, save the file, restart the instance.


After creating a new site and naming it JSS Blog on Sitelify, we need to create a Netlify site, where we will be deploying our JSS site.

Click on Create in order to create a Netlify site
Create a Netlify site with Sitelify

Next, we will Deploy the web site to Netlify.

Sitelify Manager
Deploy to Netlify with Sitelify
And literally after few seconds
Preview Sitecore JSS application with Sitelify after deployment
We can already preview the website in our browser.

Now let’s view the website from the Netlfiy.

Netlify Dashboard
As you can see the name of the application is the same, in Sitecore as well as in Netlify dashboard, all of this is possible with Sitelify.

Now you see your site on the web. You can visit either one of the links:

Sitecore JSS application build with React

Congratulations, you have completed your journey with Sitecore JSS!

You have a web site running on Netlify that was built with Sitecore JSS. Share your work and don’t forget to tweet about it, and add hashtag #sitecoreJSS

Sitecore JSS Series for Developer: How to deploy Sitecore JSS app to Sitecore (4 of 5)

If you have been following every step of the way until now, you should have no problem with deploying your site to the Sitecore.

In this tutorial, we will learn how to deploy Sitecore JSS application to Sitecore Experience Platform.

  1. How to setup Sitecore JSS
  2. How to connect to Sitecore Instance
  3. How to build a functioning Sitecore JSS app
  4. How to deploy Sitecore JSS app to Sitecore
  5. How to deploy to your Sitecore JSS site to Netlify with Sitelify

Since I am doing all of my development on macOS I would like to double check that my instance is up, and I am able to open the root folder with my Sitecore instance.

Sitecore Content Editor
jss deploy config config
Sitecore JSS Configs

Now we are ready to deploy our application

jss deploy app -c -d

If by any chance you run into a problem, please go ahead and refer to Anastasiya’s blog for troubleshooting

Sitecore JSS app react in Experience Editor

After a successful deployment, you should see the site load in the Experience Editor, as well as you should have your bundle located in the ‘dist’ folder.

You content tree should look similar to this

Sitecore Content Tree

Let’s go ahead and visit our Sitecore instance

Sitecore JSS App served from Sitecore 9

The reason we are landing on the homepage for this site, when we are visiting the main url for the sitecore, is because of the configs, see below.

<site name="sitecore-jss-blog" inherits="website" hostName="sc9.local" rootPath="/sitecore/content/sitecore-jss-blog" startItem="/home" database="master" patch:source="sitecore-jss-blog.config"/>

Now we are ready to make this site, available on the web for everyone.

In the next tutorial, we will learn, How to deploy your Sitecore JSS app to Netlify with Sitelify.

Sitecore JSS Series for Developer: How to build a functioning Sitecore JSS app (3 of 5)

In the previous tutorial, we were deploying a sample app, and now we will go ahead and start developing our application, and testing it locally before we deploy it to Sitecore again.

In this tutorial, we will learn how to build a functioning application with Sitecore JSS and React.

  1. How to setup Sitecore JSS
  2. How to connect to Sitecore Instance
  3. How to build a functioning Sitecore JSS app
  4. How to deploy Sitecore JSS app to Sitecore
  5. How to deploy to your Sitecore JSS site to Netlify with Sitelify

If you have skipped previous steps, and you would like to dive right into the Sitecore JSS development, have a sample ready, by following the instructions:

Before we begin by diving into the code, I would like to spend some time explaining some of the files are located and how we will be using them. These items were generated during the initial set up of a sample application

Route Layout Definition

In this file, we will be adding placeholders, components, editing field values, etc…

Sitecore JSS Route

Component Definition

This is where part of your component will be stored, where you will be designing your component data structure, setting fields, setting an icon for the component, as well as defining placeholders, that need to be exposed.

Sitecore JSS Component

Component Source

This is where you will be creating your component, designing the look and feel of it.

Sitecore JSS Component


In Layout.js you will be designing your page layout

Sitecore JSS Layout

Placeholder settings

In placeholders.sitecore.js you will be adding placeholders

Sitecore JSS Placeholder Settings

Register Placeholders in the package.json

If you will be creating any placeholders, you will have to register them in your package.json file.

 "config": {
    "rootPlaceholders": ["jss-1", "jss-2"]
Sitecore JSS Register Placeholders

We will be taking an approach of Disconnected Mode. So we will be creating a website locally first using Sitecore JSS CLI

You might notice that screenshots are different before this line, and it is referencing a “CV” application, it is my other project, everything below this line, will be all related to “sitecore-jss-blog”.

First, we will start with the creation of a sample app, and you can follow instructions in Step 2 on how to get started or follow instructions on

Next step we will start creating components and placing them on the page

First Part that we will focus on will be creating a few components using JSS CLI:

jss scaffold BlogHeader
jss scaffold BlogMainContent
jss scaffold BlogFooter
jss scaffold Article

It will automatically generate all the files that are needed for your development.

At this time we can start adding styling and all of the content

Let’s add some fields and set the icon for the BlogHeader Component

Sitecore JSS BlogHeader Component Definition

Now let’s customize the BlogHeader component

Sitecore JSS BlogHeader Component React Source

Go ahead and add some data to data.yml

Sitecore JSS BlogHeader Component Data

You might notice that I have modified the default placeholder, you can also do it, by editing the main layout and registering the placeholder

Sitecore JSS Header Placeholder
Please add this block of code into your layout, wherever you wish to have your placeholder.

And don’t forget to register it in your package.json

Sitecore JSS Register Placeholders

Let’s preview this in our browser

Sitecore JSS Blog

Next, let’s go ahead and add another component into the other placeholder, first let us add the placeholder to our Layout.

Sitecore JSS Placeholders

Now we will go ahead and update the BlogMainContent, definition as well as the source, the component that we created earlier with Sitecore JSS CLI.

Sitecore JSS BlogMainContent Component Definition
Sitecore JSS BlogMainContent Component Source

Lastly, let’s go ahead and add some data.

Sitecore JSS Data.yml

Let’s check out the browser you should see your changes here

Sitecore JSS Blog Local Disconnected

Now you have a functioning page, and you are able to load and modify the content locally. We will dive deeper in routes and Footer in the next series, please follow me and twitter to get the latest updates and you can get the code for free from my GitHub and use it for your own project.

In the next step, we will be learning How to deploy Sitecore JSS app to Sitecore, so we can see utilizing all the functionality of the platform such as Experience Editor and of course utilize Personalization.

Sitecore JSS Series for Developer: How to Connect to Sitecore Instance (2 of 5)

I hope you had a pleasant time in the first tutorial. How to Setup Sitecore JSS.

In this tutorial, we will learn how to Connect our app built with Sitecore JSS to our Sitecore Instance

  1. How to setup Sitecore JSS
  2. How to connect to Sitecore Instance
  3. How to build a functioning Sitecore JSS app
  4. How to deploy Sitecore JSS app to Sitecore
  5. How to deploy to your Sitecore JSS site to Netlify with Sitelify

Now since we have setup our sample application, and created a configuration we can continue.

Let’s go ahead and deploy the configuration file to Sitecore.

jss deploy config
How to Connect to Sitecore Instance
Sitecore JSS deploying configuration
Deployed successfully

Now let’s deploy the app to Sitecore. More information about Sitecore JSS CLI

jss deploy app -c -d
JSS app build artifacts
You should receive a success message at the end

Let’s navigate to Content Editor and view our items in the Content Tree

Sitecore JSS app deployed to Sitecore Content Tree
Since my application is called “cv”, this is what I see in my Content Tree

At this time we should have learned the following:

  1. How to setup Sitecore Instance
  2. How to install Sitecore JSS
  3. How to generate and Deploy Configuration to Sitecore Instance
  4. How to deploy our sample application to Sitecore instance

In the next tutorial, we will start developing our application

If you found this post useful please share it. You can always comment on this post, or reach out to Sitecore Slack, or Twitter, or post a question Sitecore Stack Exchange.

Let’s move on to the next step How to build a functioning website with Sitecore JSS

Sitecore JSS Series for Developer: How to Setup JSS (1 of 5)

In this tutorial, we will take a look at how to set up a Sitecore JSS on our Sitecore instance.

The best way to start setting up JSS is to have a Sitecore instance that is compatible with Sitecore JSS services.

  1. How to setup Sitecore JSS
  2. How to connect to Sitecore Instance
  3. How to build a functioning Sitecore JSS app
  4. How to deploy Sitecore JSS app to Sitecore
  5. How to deploy to your Sitecore JSS site to Netlify with Sitelify

Here is a list of Downloads that you will need for this Tutorial

  • Sitecore 9.0 and Sitecore 9.1 is compatible with JSS 11.0 (release notes)
  • Download Sitecore Experience Platform – (link)
  • Download Sitecore JSS (JavaScript Services) – (link)

I am not going to go into details of setting up Sitecore, there are many videos out there how to set up Sitecore.

Once Sitecore is set up follow the directions on the official Sitecore JSS site on how to set up Server (

Sitecore 9 How to setup Sitecore JSS
Login to Sitecore, go to Desktop, Select Development Tools > Installation Wizard
Sitecore 9 How to setup Sitecore JSS
Select Already Downloaded package
Sitecore 9 How to setup Sitecore JSS
And Install it.
Sitecore 9 How to setup Sitecore JSS
Next Step as described on the official documentation site is to change binding redirect for Newtonsoft.Json

The last step is to verify if everything is working correctly, let’s get back to Sitecore and create an API key, and test it.

Sitecore > Launchpad > Desktop > Content Editor | Switch to core DB, and navigate to

/sitecore/system/Settings/Services/API Keys/jss-application

and create an API Key

Sitecore 9 How to setup Sitecore JSS: Create an API Key
Make sure you are in CORE db
Sitecore 9 How to setup Sitecore JSS: Validate Layout Service is working
Use this url to test:

Next, we will have to set up our application to communicate with the Sitecore instance.

I imagine that at this time you Sitecore JSS CLI is installed, and a sample app has been created.

Sitecore 9 How to setup Sitecore JSS: JSS Setup
In order to generate scjssconfig.json | you need to run jss setup command (read more here)

Lets now proceed to the next tutorial on How to connect to Sitecore Instance