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

Sitecore JSS Series for Developer

While working on one of my personal projects, I decided to create a series of JSS Blogs, that will allow you to see and get going with the JSS really fast.

In this blog series, you will learn How to build a website with Sitecore JSS, utilizing React and Sitecore Experience Platform and deploying the site to Netlify using Sitelify.

I know it is a mouthful, but trust me at the end of this tutorial series, you will be able to build site quickly.

What tools and resources am I using:

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

Useful JSS CLI commands:

jss start
jss deploy app -c -d
jss deploy app --acceptCertificate [cert]
jss deploy app -w
jss scaffold

Known Issues

Useful Resources – Official Documentation

Getting Started with JSS
Build your First JSS App

Lets start with How to setup Sitecore JSS


This was my first #SUGCON EU. Even though it was only few days, it was an excellent event. This year SUGCON Europe took place in London, capital of Great Britain. I travelled from Houston, Texas. 9 hour flight with United Airlines, arrived a day before the Conference, took few photos of the city.

London Bridge, SUGCONEU Sitecore
London Bridge

It all started with Registration and Sitecore Certifications Exam.

Sitecore SUGCON EU 2019 LONDON
Sitecore SUGCON EU 2019 LONDON

First day was opened by Mark Frost the CEO of Sitecore, with a #sitecoreSelfie

Mark Frost – Sitecore CEO

Opening Keynote was by Donovan Brown from Microsoft. He talked about DevOps. Showed how easy it is to use Azure Boards, as well as Azure Pipelines and Azure Repos and Azure Artifacts, to get started you can visit

There were many great Sessions at the #SUGCON, but the ones that caught my attention were the #JSS Sessions.

Anastasiya Flynn

JSS Immersion Session by Sitecore Front End Evangelist Anastasiya Flynn was really interesting. She went into the details about creating an event search page and shared some interesting and popular React Libraries.

She showed how you can debug your Sitecore JSS application in VS Code

GraphQL – Lessons Learned

React Libraries that were shared on this presentation:

Another Interesting Session was by Adam Lamarre. Fun with Sitecore JSS: Exploring GraphQL

Adam Lamarre

He showed a lot of cool demos with GraphQL and Sitecore JSS.

  • Item Query
  • Multiple Queries
  • Activity Log
  • Chat Room

I was really inspired by Activity log and Chat Room

Another session on JSS and Sitecore Commerce was by Pramila Soni & Saurabh Sachdeva

Really cool session was by Jeff L’Heureux – 16 Tools for your Sitecore Tool Belt

He shared 17 tools for your Sitecore faster working experience. You can find all the links on his blog.

Also not to forget to mention SFF Tribute

Of course everyone was waiting for Adam and Kam to get on the stage and show was they had been working on and how they were improving the JSS.

Adam Weber and Kam Figy from Sitecore

What was announced in their session? Sneak peak of JSS 9.2

  • JSS and SXA – Manage JSS apps with SXA
  • JSS support for Sitecore Forms
  • JSS Rendering Host

Now you will be able to create a JSS Tenant and JSS Site.

JSS Integrates with SXA, but retains JSS architecture, if you have been working with JSS, and FE technologies, and you are familiar with SXA the below bulleted list would make sense to you.

  • SXA component library not supported
  • Traditional Experience Editor (no toolbox)
  • Theming/Creative Exchange not supported
  • SXA Layout features won’t work in Disconnected Mode
  • Yes all the awesome features of JSS!

JSS Rendering Host was introduced

Sitecore JSS Rendering Host, you will be able to hear about it much more during the Sitecore Symposium Orlando 2019

Congratulations to all the MVP Award Winners!

Great Sense of Humor from the organizers

Thank you to all the Organizers of the SUGCON Europe 2019 in London, it was a great event.

You can find all the presentations and videos from the conference at the following link

Sitecore Hackathon 2019 – Sitecore Social Assitant

This is the second year that I have participated in Sitecore Hackathon.

I got a great pleasure working with Dylan Young and Christopher Williams this year.

So our team was “The-Poutineers

Category: Best enhancement to the Sitecore Admin (XP) UI for Content Editors & Marketers

So the idea of this solution is to make the life of a Marketer much easier, whenever the Content Author is creating an article and new content on the page, without opening a new page, you can just work in Experience Editor and pull up a Twitter Feed, and see what is trending now.


Social Assistant Button



What is new in Sitecore JSS in Sitecore 9.1

With Sitecore 9.1 Sitecore JSS will no longer be in Technical Preview.

JSS is a complete SDK for JavaScript developers allowing to build full-fledged modern solutions using Sitecore and JavaScript and being completely disconnected development and deploy to any platform.

By Using JSS you get to keep Full Experience Platform capabilities such as:

  • Experience Editor
  • Personalization and Testing
  • Tracking and Analytics

JSS currently supports OOTB, Angular, React and Vue.JS, who knows what will be coming next, it seems to be that more front end developers are interested to learn JSS because it gives them freedom.

Sitecore JSS requires a different License. Partners will need to regenerate a license in SPN.

Development Updates:
– JSS 9 with React requires React 16.3 or later, because of new Context API in React.
– JSS 9 with Angular requires Angular 6.x , anybody on Angular 5 can continue on JSS 8 npm packages.
– Layout Service will no longer return ‘editable’ value for fields, unless Sitecore is actually in Experience Editor.
– Sitecore.Ship is replaced with manifest package deployment system. What does that mean, a shared secret known to the deployer and server is used to deploy signed package HMAC.
– Completely refactored React, Angular and Vue apps. There is no more Basic or Advanced App. The content of Sample App has been refactored to JSS Specific Style-guides.
– Sample Apps have been heavily documented for ease of learning.
– All Sample apps now support GraphQL.

A new scaffold has been added that will automatically scaffold a JSS component.


The following instructions is done in Disconnected mode and in ReactJS

Once you add it, you will need to modify few areas:



Sitecore Component itself, to reflect the changes, that you have made in the route.

This is the area where the component is added automatically when you are running the command (jss scaffold <componentName>)


And for the changes to the component in the index.js see the screenshot below:


And this is what it will look like:


As you can see on the right side, this is how you will be able to identify that I did not hard code the text 🙂

Go ahead start experimenting with JSS, and look a the sample content that comes with initial creation of an app.


If you have any questions, do not hesitate to reach out to me, on twitter or Sitecore community, on slack on specific #JSS channel.