Disconnected mode is amazing to work with but after you have built something there, now going to deploy our work to the Sitecore instance.

 

Pre-requisite:

Node Js

Sitecore Experience Platform

Sitecore JavaScript Service

Sitecore JSS CLI

 Steps to Connect a React JS application with Sitecore

 

Step 1: Install JSS Service

 

Download the JSS from this link https://dev.sitecore.net/Downloads/Sitecore_Headless_Rendering/18x/Sitecore_Headless_Rendering_1800.aspx this link for Sitecore 10.1

Download and install the package in Sitecore Instance




 


Step 2: Create API Key 

The API Key that your application will use for authorization for requests it sends to the Sitecore JSS Service.

        Navigate to /Sitecore/system/settings/services/API Keys.

        Create a new API for our application.

        Copy the item ID and later we will use it.


 

Step 3: Add JSS Host

Go to IIS and find the Sitecore Site. You can find the binding section and add your JSS hostname whichever you want.

Add the same hostname in the host entry which is located in C:\Windows\System32\drivers\etc

 


Step 4: Connection between JSS and Sitecore

Open created JSS application in Visual studio code or any other editor.

Navigate to Sitecore/config/learnapp.config folder

Add the hostname which you added in IIS binding. Enter the same name





JSS Setup

Follow up the image command to finish the JSS setup

 


1.     Open Terminal

2.     Jss setup -> click enter

3.     Is your Sitecore instance on this machine or accessible via network share? [y/n] -> y

4.     Path to the Sitecore folder (e.g. c:\inetpub\wwwroot\my.siteco.re): your wwroot folder -> give your local Sitecore instance path

5.     Sitecore hostname (e.g. http://myapp.local.siteco.re; see /sitecore/config; ensure added to hosts): you jss app name which you added in IIS

6.     Sitecore import service URL [http://demoapp.dev.local/sitecore/api/jss/import]: just click enter

7.     Sitecore API Key (ID of API key item): your API Key item ID

8.     Please enter your deployment secret (32+ random chars; or press enter to generate one): just click enter

After executing this we can see the new file created in our app folder

 


 

Step 5: Connect JSS with Sitecore 

Deploy your app config to Sitecore instance

Type and enter jss deploy config (make sure give folder permission, otherwise faced isssue)



Deploy sitecore content

Jss deploy –c –d in terminal



 

Generate Certificate

Open a terminal and enter the below command you will get the certificate

jss deploy component Form --allowedPlaceholders jss-main --acceptCertificate yourCertThumbPrint

Then enter the below command in terminal

jss deploy app --acceptCertificate yourcertificateid -c –d

 


 

Run the new URL added in IIS