Skip to main content

JSS / Sitecore Headless Services setup on Sitecore XP 10.3

 

Introduction :

Sitecore JavaScript Services is a toolkit for JavaScript developers allowing to build full-fledged customer solutions (SPAs, web apps, websites) using modern JS libraries and frameworks (React.is, Angular) by being completely unplugged from Sitecore.


Install Sitecore JSS Service:

Installation of Sitecore JSS Service is a breeze, especially if you've had experience installing packages in Sitecore before.


Prerequisites:

  1. Valid Sitecore JSS License: To confirm if you possess a valid license, you can check your license.xml file for the presence of 'Sitecore.JSS.'
  2. Sitecore Version: For certain features like the JavaScript Rendering SDKs, such as Next.js, you'll require Sitecore 9.0 Update-1 or a later version. If you intend to leverage these features, it's recommended to have Sitecore newer version installed. In this blog post I am using Sitecore 10.3 Update-1.

To install the JSS, make sure to follow the steps outlined below:

Step 1: 

Navigate to Sitecore Headless Rendering 21.0.1 and download the Sitecore Headless Services for Sitecore XP package.


Step 2:


After downloading the package, access Sitecore and navigate to the Desktop. From there, open the Development Tools and select the Installation Wizard. Once the Installation Wizard is loaded, proceed to install the downloaded package file. During the installation process, you'll be prompted to accept the terms and conditions ,accept and click on next then on Install.


once installed open content editor and right click on content then click on insert and you will be able to see Headless Tenant option.




Step 3: Application Setup


  1. Install latest Node.js ,I am using Node JS v20.6.1
  2. Launch Windows PowerShell, Navigate to Your Project Directory 
  3. Use the `cd` command to move to the directory where you plan to initiate your project. For instance:  cd C:\Sitecore10\10.3\SitecoreJSS
  4. Install the Sitecore JSS CLI - Execute the following command to globally install the Sitecore JSS CLI: npm install -g @sitecore-jss/sitecore-jss-cli
  5. After the installation process is complete, type `jss --help` in the PowerShell terminal. You should see an output resembling the following, indicating that the Sitecore JSS CLI is correctly installed and operational.


Environment setup is done I will create a project in my next blog.





Thanks for Reading!!








Comments

Popular posts from this blog

Sitecore Interview Questions 2023

1. What Is a CMS? A content management system (CMS) is software that helps users create, manage, and modify content on a website without the need for technical knowledge.  2. What is Sitecore ? Sitecore is a versatile and powerful digital experience platform used by businesses and organizations around the world to create, manage, and personalize their online presence. At its core, Sitecore offers a Content Management System (CMS) that allows users to easily create, edit, and organize digital content for websites, mobile apps, and other online platforms without requiring extensive technical knowledge. However, Sitecore goes beyond traditional CMS capabilities. It's often referred to as a Customer  Experience Platform (CXP) due to its ability to not only manage content but also provide tools for personalization, analytics, and marketing automation. This means that with Sitecore, businesses can tailor the online experiences they offer to individual users, gather insights into use...

Troubleshooting 'System.Web.Mvc' Error During Sitecore Visual studio solution Publishing

  In my most recent blog, I extensively covered the steps involved in configuring a Visual Studio Solution for Sitecore development . Following the publishing process, I came across an error message that read " could not load file or assembly 'system.web.mvc, version=5.2.4.0 ," as visibly shown above. The root of the problem was traced back to a discrepancy between my Visual Studio solution, which was utilizing version 5.2.7.0 of  'system.web.mvc,' and the Sitecore Instance, which was employing version 5.2.4.0. To successfully address this issue,  I adopted a straightforward solution:  Copied the ' system.web.mvc.dll ' and ' system.web.mvc xml'  from my backed-up " C:\inetpub\wwwroot\sc103sc.dev.local - Copy\bin" folder.  Pasted to Visual Studio solution " C:\Users\ilma\source\repos\MySitecoreDemo\MySitecoreDemo\bin " and updated the solution Reference for the same. Also pasted to current Sitecore Instance ' bin folder  C:\i...

Step by step guide to Establish Headless SXA Tenant, Site and Next.js app with Sitecore XP 10.3

  Step 1: Prerequisites Installed Sitecore version 10.3  Check out Sitecore XP 10.3 Installation guide Configured an HTTP binding in IIS for your site (e.g., http://demo.dev.local - Next.js requires specific setup to connect to an HTTPS server) Installed Sitecore Powershell Installed Sitecore Headless Services  Checkout Headless Services Installation guide Installed SXA 10.3 Successfully populated Solr schema and built necessary indexes Ensured that you are running the latest version of Node Step 2: Create a Headless Tenant Go to the Sitecore Launchpad and click on ' Content Editor' button. To create a Headless Tenant, right-click on the ' sitecore\content ' and then choose ' Insert ' > ' Headless Tenant '. Input the Tenant Name (for eg, 'HeadlessSXATenant'), choose all modules , and then click ' OK '. To create a Headless Site, right-click on ' sitecore\content\HeadlessSXATenant ' and then select ' Insert' > '...