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

IMG_1649

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=/

jss-1

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.

jss-2

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

jss-3.png

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

jss-4

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.

jss-5

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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s