Complete step-by-step guide to create a Sitecore JSS project with Sitecore XPShape

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.

1. Prerequisites (Install Everything First)

Required Software

1. Development Tools

• Install Node.js (LTS version recommended, e.g. 18+)
• Install npm (comes with Node)
• Install Git
• Install Visual Studio Code

2. Sitecore XP Requirements

Install:

• Microsoft SQL Server
• Solr
• IIS
• .NET SDK (.NET Framework 4.8 + .NET Core if required)
• Dotnet runtime (dotnet-runtime-10.0.5-win-x64)
• Dotnet hosting (dotnet-hosting-10.0.5-win or dotnet-hosting-2.1.30-win)
• Aspnet core runtime (aspnetcore-runtime-2.1.30-win-x64

3. Sitecore Installation Tools

• Install Sitecore Install Framework (SIF)
• Install Sitecore PowerShell Extensions (SPE)

2. Install Sitecore XP (Local Instance)

Step 1: Download Sitecore

• Get Sitecore XP package from Sitecore Developer Portal (Sitecore 10.4.1 rev. 012149 (WDP XP0 packages))
• Get Sitecore Headless from Sitecore Developer Portal(Sitecore Headless Services Server XP 22.0.11) and install in sitecore.

Step 2: Prepare Solr

• Download and extract Solr

Run:

• solr start

Create cores:

.\New-SolrCore.ps1 -SolrUrl "https://localhost:8983/solr" -CorePrefix "sitecore"

Step 3: Install Sitecore using SIF

• Open PowerShell as Administrator

Run installation script:

• Install-SitecoreConfiguration `

-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:

• https://your-sitecore.local/sitecore

Login: admin / b

3. Install Sitecore JSS CLI

Run:

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

Verify:

• jss --version

4. Create a New JSS App

Run:

• jss create my-first-jss-app react

Choose:

• Framework: React (recommended)

Go into project:

• cd my-first-jss-app

5. Connect JSS App to Sitecore XP

Step 1: Set up API Key in Sitecore

• Login to Sitecore

Go to:

• /sitecore/system/Settings/Services/API Keys
• Create new API key

Assign:

• Site: your site
• Allowed Controllers: *

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"

}

}

6. Deploy JSS App to Sitecore

Run:

• jss deploy app -c -d

This will:

• Push templates
• Push renderings
• Sync content

7. Run JSS App in Connected Mode

• jss start:connected

App runs at:

http://localhost:3000

• Connected to Sitecore backend.

8. Test the Integration

• Open Sitecore Experience Editor
• Navigate to your JSS route
• Edit components live

9. Create First Component

• jss scaffold component HelloWorld

Then deploy again:

• jss deploy app

10. Build for Production

jss build

11. Optional: Headless Services Setup

Ensure Sitecore XP includes:

• Sitecore Headless Services module installed

Common Issues & Fixes

1. Solr not working

• Check SSL
• Ensure cores created correctly

2. API errors

• Verify API key
• Check CORS settings

3. Deployment fails

• Run PowerShell as admin
• Ensure correct instance path

Architecture Overview

• Frontend: React JSS App
• Backend: Sitecore XP
• Rendering: Layout Service (JSON)
• Search: Solr
• Hosting: IIS

Summary Flow

• Install prerequisites
• Install Sitecore XP
• Install JSS CLI
• Create JSS app
• Connect to Sitecore
• Deploy
• Run connected mode

Thank You!