What is Sitecore JSS and how do I start with it?

Sitecore JSS was announced last year at the Sitecore Symposium in Las Vegas.


What is JSS and why do you even need it?

Sitecore introduced JSS (JavaScript Services) last year, and not a lot of people are understanding or knowing what it is for and why it is needed, or some don’t even know that it exists. I waited till there is an updated, and all the bugs will be covered, to write a blog post.

Well what is JSS, and how can you utilize it in your project? First great thing about JSS that I really like is that you do not need to have a Sitecore instance installed on your local machine. There are few way that you can implement JSS.

JSS is a complete SDK for JavaScript developers allowing to build full-fledged modern solutions using Sitecore and JavaScript and being completely disconnected during development and deploy to any platform in a headless configuration with full Experience Platform capability preserved.

read more at the official web site https://jss.sitecore.net/

If you have any questions, ask them on Slack

Enough of introduction, lets get to the development, to some interesting stuff.

First you need to go to https://jss.sitecore.net/ and familiarize yourself with the the SDK.

Pre-requisites are the following:

  • Sitecore XP 9.0
  • Node.JS 6.9 and above
  • NPM 5 and above

Once you have all of this installed, then we can proceed.

First you need to make sure you have Layout Service enabled. What does Layout Service give you? Well Layout Service is a Presentation layer via API (JSON). It give you Personalization, MV Texting, tracking and analytics. It is included in JSS and SXA.

How do you test Layout Service on your instance?



Okay if everything looks good at this time, we can move on and start exploring JSS.

Now we can see how it looks in the Content Editor.


And the site looks good, we can now move on and go to JSS


At this point we have proved that Layout Service is enabled and we can continue with JSS implementation.

What is a Layout Service?

Provides nested JSON rendering of item layout, including serialized datasource contents and reflecting any configured personalization rules and content testing.

These are the commands that we will be using on the package that you can find on JSS official web site https://github.com/sitecore/jss

  • Npm run prod:build
  • Npm run manifest:generate
  • Npm run package:generate
  • Npm run package:deploy

We will start with the basic JSS App that runs React.Js


First open scjssconfig.json and modify it to your needs, see screenshot above.

Or you can just run the setup by typing npm run setup

To Deploy we will be using Sitecore Ship. Sitecore Ship – an open source web service that can be used to remotely install Sitecore update packages. (https://github.com/kevinobee/Sitecore.Ship)

Once code is deployed you will be able to see content of the JssBasicApp in the Content Editor.


In the next tutorial, we will be adding a component and modifying content from JSS, without accessing Sitecore.

If you have any question, please do not hesitate to reach out to me, comment here or connect with me on Twitter @tmamedbekov

Sitecore Trial License

Try developing on Sitecore for free

Request access to the Developer Trial Program and receive a 60-day trial license, access to our software, and information on how to get started. Learn about:

  • Working with Sitecore APIs and the Helix framework
  • Sitecore development recommended practices
  • Implementation and extensibility of the Sitecore platform

Follow the link here, scroll to the bottom of the page and request a free trial.

Day 1 Sitecore Symposium 2017 Las Vegas

What have we learned in the first day of attendance the Sitecore Symposium. Well first of all the main and the most interesting announcement is the Sitecore Experience Platform 9.


Well what does it offer us:

IMG_1657 (1)

  • JSS – Headless Javascript services
  • Purpose-build Forms for digital marketers
  • Federated Automation
  • Sitecore xConnect
  • Expanded xDB database support for Microsoft SQL Server 2016 and Azure SQL
  • New Marketing Automation build on xConnect with specific support for Personalization Commerce
  • Greater privacy measures around PII data and GDPR
  • Security features, with support for encryption at ret and in motion
  • Streamlined Upgrades, Migration & Conversion tools
  • Machine Learning algorithms “Sitecore Cortex”

Big Announcement was about the machine-learning. When Sitecore introduced Cortex


The next great thing was related to the xConnect. Now you will be able to import any data into Sitecore.


Of Course the Headless, something that I was very excited about. But unfortunately it supports react.js. It should support all the other frameworks soon. But the demo with react.js was simply great.


And of course there was information about the Agile and development and plugin approach.



Sitecore Experience Cloud was also discussed.


How about Sitecore and .NET core. It is all about the freedom.


I would like to say that overall I am very excited about Sitecore 9.0. It is already available on the (https://dev.sitecore.net/). Go get your copy.

If you have any questions, do not hesitate to ask or reach out to me on slack @tmam and twitter @tmamedbekov.

Sitecore HTML Helper Methods – Part 1

Here is my cheat-sheet for all the html helper methods that I use all the time, and there are some that I find every day, and I just get excited about what Sitecore can give us.

Current Item


Current Field


Field with different source

@Html.Sitecore().Field("Title", Sitecore.Context.Database.GetItem("{858FAD09-070A-45BA-BA29-446940A3EC4F}"));

Create a image with a url that can be edited in Experience Editor

@Html.Sitecore().Field("link", new { text = @Html.Sitecore().Field("Image") })



Image Field with class

@Html.Sitecore().Field("Image", new { @class = "img-responsive" })

Field that will allow you disable the web editing feature in Experience Editor

@Html.Sitecore().Field("Heading", new { DisableWebEdit = true })
This will list the Children of the Current Item you are in.
@foreach (Sitecore.Data.Items.Item item in Html.Sitecore().CurrentItem.GetChildren())
@Html.Sitecore().Field("Heading", item)
@Html.Sitecore().Field("Preview", item)
Visitor Identification

More stuff coming soon…