Creating the first Sitecore headless app

Updated: Dec 13, 2024

This would be a friendly walkthrough to creating your first Sitecore headless app.

Prerequisites:

Visual Studio code (or an IDE of your choice)
A running Sitecore instance with JSS services module installed (Refer Installing Sitecore headless rendering for installation of the headless services package to Sitecore)
NodeJS (LTS version)
GIT - Download from here (Only pre-push for linting check during creation of your headless app utilizes local GIT)

Let's create your first headless app

Part 1 - Installing the JSS CLI:

Create a directory for your headless app (mine would be C:\SitecoreJSS\Sitecore headless x React)
Open the directory in VS Code.
Install JSS CLI using

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

The JSS CLI would be the interface for commanding your JSS application.

jss --version

Part 2 - Creating the JS app:

npx create-sitecore-jss react (for a ReactJS app)

(or)

npx create-sitecore-jss react (for a NextJS app)

(or accordingly for any other framework of your choice)

Specify your application properties (name, path, API type, etc.) for the prompts that follow this command.

A successful creation of the app would show you a message JSS application <your application name> is ready.
Verify application creation using “jss start”, and launch your application on your http://localhost:3000 (or the right port on your machine)
Now, a headless application is created. Let's proceed to connecting the application to Sitecore in the next steps.