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?

http://sitecore.local/sitecore/layoutsvc/render/jss?item=/

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.