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

Create your JSS app

 I am going to follow code first approach here

Step 1: Identify Framework

We are ready to create a app. . The first step is to identify the template that matches your framework (Angular, React, or Vue).

Step 2: Create a app

Ø  Open a command prompt.

Type the create app command for your framework/library in the form:
jss create <your-app-name> <app-template-name>

Ø  jss create demoapp react

Ø  Change to your app's directory. For example:
cd demoapp

Ø  Type the command to start the app in disconnected mode (which uses the defined content located on the local development server):
jss start

It automatically launches your app in the default browser, http://localhost:3000.

This is called Disconnected Mode.

Step 3: Connect a app with sitecore

• Run this command

Jss deploy config

• You can see the changes in your wwwroot folder

• Run this command

Jss deploy app –c –d

Ohh, gor error

• Run this

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

• You can get your certificate here,
• Run this

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

• Once it done, we can see the changes in our sitecore js url

Welcome to Sitecore JSS (dev.local)

This is called connected Mode.

What is sitecore JSS

 

JSS is a software development kit and one of the Sitecore Omni products you can use to create JavaScript applications, or apps, for a headless Omni channel customer experience.

JSS offers several capabilities to front-end developers, including:

• Ø  Inline editing
• Ø  Multi-language
• Ø  Analytics
• Ø  Personalization
• Ø  Integrations

Development Workflows

• Ø  Sitecore First Approach
• Ø  Code First Approach

Sitecore First Approach

• In sitecore-first approach you create the templates/renderings/content in sitecore and build components coming from Sitecore JSS.

Choose the Sitecore-first approach when:

• Ø  You already planned about your content
• Ø  Sitecore Developers are your primary developers
• Ø  You are focusing more on sitecore features.

Code First Approach

• Ø  you can create templates, renderings and content in front end and import the JSS app into sitecore.
• Ø  Jss app can work with its content without sitecore instance content.

Choose the code-first approach when:

• Ø  You need to design an early prototype.
• Ø  You do not have a Sitecore instance available to deploy to.
• Ø  You need to work on a non-Windows operating system.
• Ø  JavaScript developers are your primary designers.
• Ø  Your app will be relatively simple from a content perspective.
• You are hiring an external front-end agency to build your app.

JSS CLI

Sitecore JSS includes the JSS CLI, which is a node-based command line tool with development scripts. The JSS CLI is the base tool for the code-first workflow. You use it to:

Ø  Create, maintain, and run JavaScript apps.

Ø  Scaffold components.

Ø  Deploy apps to Sitecore.

Are your ready to setup your local with code-first approach?

Please follow the steps

Install and Run the JSS CLI

Open Powershell

Create a directory for install CLI and Run this command

I have created Jsapp folder in my local

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

Sitecore Powershell Extension

 ØThe Sitecore PowerShell Extensions (SPE) is a module that provides a command-line interface and scripting environment to work with the Sitecore platform.

ØUsing the PowerShell extension we can perform various operations of Sitecore items, as well as allow access to Sitecore API. It looks and works in the same way as the Windows PowerShell utility. It also excels at reporting and task automation.

ØI’m going to use the SPE in Sitecore 10.1 and it’s out of the functionality here.

Where should we find SPE?

Powershell Console

ØThis tool provides a simple command-line interface in the same way as our windows Powershell. you can enter a single command at a time and see the output.

Powershell ISE

ØThe Sitecore Powershell ISE is a tool that can be used to create, edit, test and execute PowerShell scripts. It offers a very advanced and flexible scripting environment.

ØISE adds a GUI and more functions. Following are some of the functions that it provides over the PowerShell console.

1. Saving PowerShell scripts and the ability to open them later

2. Executing scripts with one click

3. Switching the current database

4. Switching the current user and language

5. Debugging

6. Ability to execute selected part of the script

The interface of PowerShell ISE

There are several things that can be done using the SPE module, which includes

1. Getting Sitecore Item

2. Getting child item

3. Get item by path

4. Get items from all languages and versions

5. Making bulk updates

6. Publishing Sitecore items

7. Deleting items based on specific conditions

Use cases for using SPE

Get all the items under the Sitecore node

Get-childItem "/Sitecore" | Format-Table -Property Name,Languages,Children,Id -AutoSize | Out-Default

Script to Change template of selected item

$props = @{

       InfoTitle = “Change template of items”

      PageSize = 10000

}

$sourcePath  = "/sitecore/content/Home/Homepage/Articles”

$items= Get-ChildItem -Path $sourcePath -ReCurse

 

Function Change-Template

{

     Foreach($item in $items)

     {

       If($item.TemplateId -eq “{843D7183-80B4-4F0B-BA97-6C79BFCE0C5E}”)

           {

                 $item.Editing.BeginEdit();

                 $item.TemplateId = “{B32C0EA5-EA98-4C07-874A-566C6462647D}”

                 $item.Editing.EndEdit();

                 Write-Host “Item id: ” $item.ID “ -Template id: “ $item.TemplateId

            }

       }

}

$items = Change-Template

$items | Show-ListView @props -Property ItemPath,ID

Close-Window

Why use session state elevation

ØThe concept actually sounds like more than it is, “SPE elevated rights” means that SPE has put a named token in your session state that has an expiration time.

ØWe are not elevating anything related to any other aspect of your Sitecore environment - you are “SPE elevated” which means we allow you to do execute the script and save it within your Sitecore environment.

Why session elevation?

ØShould a malicious actor be able to get a script onto your page. They would be able to execute a script as you would. This is why we’ve introduced the concept of session elevation.

How does the PowerShell script execute within my system?

Your PowerShell scripts can be introduced into the system in a number of ways. the most prominent ones are:

ISE :

Writing scripts in this Sitecore app is probably the most popular way you will provide the code for your authors.ISE allows you to write SPE modules and Apps utilizing its full power of creating user interfaces, reports, and dialogs.

Console

This app is a decent entry point when you need to quickly provide a one-liner to test something or just change a field in a large number of items.

Saved Scripts

SPE allows you to save scripts as Sitecore items that can be utilized by a number of “Integration points”.By saving your script in a proper location, you can expose your scripts in various places in the Sitecore user interface, such as the content editor context menu, ribbon, or even use them in workflow actions.

Remoting

This allows you to execute a script by sending it to a web service.