integrated mode

Written by Sudhir Kumar | Jun 19, 2021 6:30:00 PM

Do you want to explore Sitecore JSS and don’t know where to start with. This blog is a perfect to start with creating a sitecore jss site.

Pre-requisites:

Operating system which supports Node. (I am using Windows 10)Install Node. Recommended to use latest LTS release.

If node is already installed, you can check the version using powershell.

Let’s now start!!

Install JSS CLI using command below.

Open powershell and run the below command

npm install -g @sitecore-jss/sitecore-jss-cli

You can validate your installation by running the below command

jss –help

Create the application based on the templates

I will be using react template in this demo. (There are other types of templates as well like angular, vue etc..)

Open powershell and run the below command

Firstly set the path of the folder where you want to create the app

cd C:\SitecoreJssDemo

and then run below command

jss create nav-graphql-connected-demo react

where

nav-graphql-connected-demo is the name of your application,

react is the app-template

You will see a folder with all the artefacts are created.

Open the app folder in Visual Studio Code.Now to run the application in disconnected mode, open a terminal in VS Code and run the below command

jss start

The app will be built and a local development server will be started. Your jss app will now rendered on http://localhost:3000/ (will automatically open in default browser. If it doesn’t open try to hit this url on browser)

To run the app in connected mode, run the below command

jss start:connected

When I try to run the above command, I get the below error.

Before trying to run in connected mode, please install the Sitecore Javascript Services or Sitecore Headless Rendering package to your sitecore instance based on your version of Sitecore. (if not already completed)

and follow below steps to link and deploy app to a running sitecore instance. Below are the steps to do it.

Create a Sitecore Api Key1. Login to sitecore and open content editor. Navigate to path /sitecore/system/Settings/Services/API Keys 2. Create an API Key and provide a name 3. Set the properties as below of the API Key created. (These values are for local development setup) 4. Keep the API Key item id. In my case it is {3F9C5109-1785-4578-856D-A57209D883A8}Now when you ran jss start:connected command for first time you see below error

Put the values of these as per below snapshot and press enter

If you do not have SSL then put host name without SSL like http://jssapp.dev.local

Run below command to deploy the config files to your sitecore instance.

Check your config details. (If you need to do any change in config do it now)

jss deploy config

jss deploy app -c -d

I got the below error while running this command

Sending package sitecore\package\nav-graphql-connected-demo.1619475767488.manifest.zip to https://jssapp.dev.local/sitecore/api/jss/import… Unexpected response from import service: connect ETIMEDOUT

To resolve this issue, add an entry in hosts file located at C:\Windows\System32\drivers\etc

use the host name which was provided during the setup

and add the same host name in sitecore instance binding on IIS (I am putting non-SSL binding so please ensure your jss import url and hostname in scjssconfig.json should be non-SSL)

now try to run the deploy command

jss deploy app -c -d

Publish the siteTo run the app in connected mode, use below command

jss start:connected

To run the app in integrated mode, hit the url http://jssapp.dev.local

References- https://jss.sitecore.com/docs/client-frameworks/getting-started/quick-start

Happy Sitecoreing !! Thanks Sitecore

View full post