Sitecore JSS was announced last year at the Sitecore Symposium in Las Vegas.
What is JSS and why do you even need it?
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.
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