Connected your APP with Sitecore

 Now, I’m going to set up my Sitecore instance for get to connect with my JSS app.

Step 1: Install JSS service

• Ø  Go to this link
• https://dev.sitecore.net/Downloads/Sitecore_JavaScript_Services.aspx
• Ø  I’m using sitecore 10.2 in my local.so I am going to choose 

• Ø  Download the package and upload in sitecore.

Step 2 : Define API KEY

• Ø  Go to this path and create API Key item
• /sitecore/system/Settings/Services/API Keys
• Ø  I have created a Demoapp item

• Ø  Copy the Item ID and we will use it later.

Step 3: Add JS host

• Ø  Already I am working with my local instance.so I don’t like to disturb that. So I am going to create a new binding for my jss app
• Ø  Go to IIS and find your site. You can find the binding sections in right side.

• Ø  You can use http, I just tried https in my local.
• Ø  Go to host file and add your new site name there
• C:\Windows\System32\drivers\etc

• Ø  You can access the same site in your browser.

Step 4: Prepare your JSS app to connect

• Ø  So Already we have created a new site name for deploy our jss changes.
• Ø  Now, I am going to see my localhost site structure in my new sitecore url.
• Ø  Open your JSS app files in visual studio code & go to config file

• Ø  I have changed this name to my new sitecore url name.

Ø  Open Terminal in the vs code & run

Jss setup

 

1.      Is your Sitecore instance on this machine or accessible via network share? [y/n]: y

2.      Path to the Sitecore folder (e.g. c:\inetpub\wwwroot\my.siteco.re): your wwroot folder : C:\inetpub\wwwroot\SC102sc.dev.local

3.      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 – http:// demoapp-jss.dev.local

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

5.      Sitecore API Key (ID of API key item): your API Key which we copied in step 1

6.      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

Special note:

Ø  If you like to do the jss setup again , just delete this above file, it will do the setup again

Step 5: Connect your JSS app with sitecore

Ø  Deploy your app config to sitecore instance

Jss deploy config

Ø  Deploy your app content to sitecore instance

Jss deploy app –c –d

Ø  Oh, God, Issue, Please run below commends for resolving

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

Ø  you can get the certificaticate

jss deploy app --acceptCertificate FD:12:F0:2E:42:C5:48:F3:58:39:03:27:F7:CF:45:DC:AF:DB:72:91 -c –d

Finally, we got it..

Now, we can access our jss url

https://demoapp-jss.dev.local/

Ø  It is integrated with my sitecore new url.

Ø  You can see this new section in your sitecore content editor.

Special Notes :

I have listed the possible errors here:

Issue 1:

Imported service not available, couldn’t find the assemble sitecore.zip

Solution:

We have to upload the Sitecore JSS package in sitecore .

Issue 2:

Solution:

Ø  Installed the wrong CLI version

Ø  I have used the jss package version 19.0.0.

Ø  So I just run this commends for resolving

Ø  Uninstall

  npm uninstall -g @sitecore-jss/sitecore-jss-cli

   npm uninstall -i @sitecore-jss/sitecore-jss-cli

Ø  Install

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

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