Development / CMS
Complete step-by-step guide to create a Sitecore JSS project with Sitecore XPShape
SSaurav Kumar2 Min Read
← Back to ArticlesDevelopment / CMS
Here’s a complete step-by-step guide to create a Sitecore JSS project with Sitecore XP, starting from software installation → project setup → deployment → running.
Required Software
1. Development Tools
2. Sitecore XP Requirements
Install:
3. Sitecore Installation Tools
Launch, connect, and scale your Sitecore JSS project with expert guidance from local setup to production-ready headless development.
Step 1: Download Sitecore
Step 2: Prepare Solr
Run:
Create cores:
.\New-SolrCore.ps1 -SolrUrl "https://localhost:8983/solr" -CorePrefix "sitecore"
Step 3: Install Sitecore using SIF
Run installation script:
-Path .\XP0-SingleDeveloper.ps1 `
-SqlServer "localhost" `
-SqlAdminUser "sa" `
-SqlAdminPassword "yourpassword" `
-SolrUrl "https://localhost:8983/solr" `
-SolrRoot "C:\solr" `
-SitecoreAdminPassword "b"
Step 4: Verify Installation
Open:
Login: admin / b
Run:
Verify:
Run:
Choose:
Go into project:
Step 1: Set up API Key in Sitecore
Go to:
Assign:
Step 2: Configure JSS App
Edit:
/scjssconfig.json
Add:
{
"sitecore": {
"instancePath": "C:\\inetpub\\wwwroot\\your-sitecore",
"apiKey": "YOUR-API-KEY",
"layoutServiceHost": "https://your-sitecore.local"
}
}
Run:
This will:
App runs at:
http://localhost:3000
Then deploy again:
jss build
Ensure Sitecore XP includes:
Common Issues & Fixes
1. Solr not working
2. API errors
3. Deployment fails
Summary Flow
Thank You!
Sitecore JavaScript Services (JSS) is a development framework that enables developers to build Sitecore applications using JavaScript frameworks such as React and connect them to Sitecore through headless APIs and services.
Yes. A Sitecore JSS application can be connected to a Sitecore XP instance when the required Sitecore Headless Services components are installed and configured.
You typically need Node.js, npm, a supported development environment, Sitecore XP, Sitecore Headless Services, the appropriate JSS tooling, and supporting infrastructure required by your Sitecore version.
You can create a JSS application using Sitecore's JSS project initialization tooling, select a supported framework such as React, configure the project, and then connect it to a compatible Sitecore instance.
Yes. Sitecore JSS supports React and provides tooling for creating headless React applications that retrieve Sitecore content and layout data.
Connected mode allows a local JSS application to retrieve content, layout data, and component information from a running Sitecore instance during development.
To develop against Sitecore data and run a JSS application connected to a Sitecore instance, the required Sitecore Headless Services functionality must be available and properly configured.
A JSS application connects to Sitecore XP through Sitecore APIs and services, including the Layout Service. The application is configured with the appropriate Sitecore endpoint, application settings, and authentication or API access details.
Disconnected mode allows developers to work with local mock data without a Sitecore instance, while connected mode retrieves content and layout data from a running Sitecore environment.
Deployment depends on the JSS and Sitecore version, but generally involves connecting the application to Sitecore, deploying application artifacts and configuration, and validating the application against the Sitecore environment.
