Getting Started with Sitecore JSS Sample Application

Step 1 : Install Sitecore

You need Sitecore JSS enabled License to work with Sitecore JSS.

You can quickly check by editing your license.xml file into notepad by searching for "Sitecore.JSS".

If you are able to find it then JSS is enabled with provided license.

• Install Sitecore through SIA

ERROR : Sometimes while installing sitecore you will see exceptions related to "Sitecore Marketing Automation Engine" and most of the time you will see these exceptions because of certificate issues. Please try below solution of get rid from that.

Run this PowerShell script to check the certificates 

• Get-Childitem cert:\LocalMachine\root -Recurse | Where-Object {$_.Issuer -ne $_.Subject} 

and if you find any certificates than run below script to move the certificates to other location

• Get-Childitem cert:\LocalMachine\root -Recurse | Where-Object {$_.Issuer -ne $_.Subject} | Move-Item -Destination Cert:\LocalMachine\CA

In case of error you need to remove all the existing DB & Services if you are planning to install Sitecore instance with same name.

Service can be deleted through below command 

• SC STOP shortservicename
• SC DELETE shortservicename

*shortservicename -> You can get it by double click on service under services.msc, most of the sitecore service will start through "Sitecore *"

Login to Sitecore with default username and password provided while installing SC.

Step 2 : Download Sitecore JSS SDK

You have to select JSS SDK based on your installed Sitecore version. Check this below link to find & download compatible JSS version 

• https://dev.sitecore.net/Downloads/Sitecore_JavaScript_Services.aspx

3.1 JSS SDK package can be installed as normal Sitecore package. [Image Attached]

3.2 Go to sitecore item(/itecore/system/Settings/Services/API Keys) and insert API key

Allow cross origin & controller by editing empty field value by * [Image Attached]

3.3 Do smart website publish in Sitecore to move newly added items to web/publishing DB or publish JSS related templates and items.

• Hit below URL with change in {yourhost} & {ItemID} - step 3.2 newly added API Key
• https://{yourhost}/sitecore/api/layout/render/jss?item=/&sc_apikey={ItemID}

You will get JSON response with default Home item field data.

Step 4 : Setup JSS code structure

Open Power-shell with admin mode and navigate to folder where you want to place your code [Image Attached]

• Execute command -> npm install -g @sitecore-jss/sitecore-jss-cli
• Execute command -> npm init sitecore-jss react

We have build application with react as per our project requirement and available skills in team. You can choose to go with Next.js, angular or Vue etc.

After downloading code you can open Readme.md file to get more information and options to setup your basic code.

Go to folder where you have downloaded JSS code and with power shell 

• Execute command -> jss start
• Example: (PS C:\Jatin\POC\JSS\y> jss start)

After this command automatically browser will open website as http://localhost:3000/

*For IDE we have used Visual Studio Code as its open source and support different type of files.

YouTube reference : https://www.youtube.com/watch?v=XNQGsr9_34A

Step 5 : Run Sitecore JSS application with Sitecore

Now we need to push JSS code to Sitecore to integrate JSS application with Sitecore.

• Execute command -> jss deploy app --acceptCertificate {your-website-certificate} -c -d
• {your-website-certificate} - [Image Attached]
• Example: (PS C:\Jatin\POC\JSS\y> jss deploy app --acceptCertificate {your-website-certificate} -c -d)

After deploying app, you can see your changes inside Sitecore [Image Attached]

Do smart publish to push your changes to Web/ Publishing server, to make your job easy you can delete JSS workflow (jss development workflow) under System/ Workflow before doing smart publishing 

Once your publishing is done you can start application in connected mode with Sitecore

• Execute command -> jss start:connected
• Example: (PS C:\Jatin\POC\JSS\y> jss start:connected)

Try by changing some content in Sitecore (/sitecore/content/sitecore-jss/home/Page Components/home-jss-main-ContentBlock-1) and after publishing refresh website (http://localhost:3000/)

You are all setup with your Local JSS sample app setup