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
