Tag: Sitecore 10.3

Setup Sitecore Headless SXA with Next js

Pre-requisite-

Install Sitecore 10.3 XP0 on local machine – see this blog to install the SIF way

Install Powersehll Extensions

Sitecore PowerShell Extension for Sitecore on your local Sitecore instance

Sitecore Headless Rendering 21.0.0

Install Sitecore Headless Services for Sitecore XP on your local Sitecore instance

See the Sitecore Headless Rendering 21.0.0 download page

Install SXA module –

Sitecore Experience Accelerator on your local Sitecore instance

See the Sitecore Experience Accelerator 10.3.0 dowload page

Once you have the above installed the local instance should have options to create a Headless Tenant and Folder

Ensure all the search index and rebuilt-

Install Node js Download | Node.js (nodejs.org). Latest whilst writing this blog was v18.14.0

Create a Headless Tenant

Select the Headless Tenant

Enter a valid tenant Name and the modules to install –

Should create a tenant successfully-

Create a Headless Site

Now create a Headless Site

Provide a valid Site name and other options-

Select the modules to install-

Keep the Site settings as is for now and will generate the deployment secret later-

Site should be crated within the tenant-

Setup the rendering host

Site Settings – Check for the rendering host- should have set to Default

/sitecore/content/mycompany/retail/Settings/Site Grouping/retail

Find the Default rendering host on this location-

/sitecore/system/Settings/Services/Rendering Hosts/Default

Server side rendering engine endpoint URL:- http://localhost:3000/api/editing/render

Server side rendering engine application URL:- http://localhost:3000

Application name:- e.g.:- retail-app

Where is the above value coming from – when a next js app is created by default it is hosted on port 3000. Please see section below- NEXT STEPS

Create JSS Api key

Navigate to this location to create API key- /sitecore/system/Settings/Services/API Keys

Provide a valid name-

Set the CORS and Allowed Controllers to all domains. Set this to *

Will need API key while setting up the next js app.

Install JSS globally

https://doc.sitecore.com/xp/en/developers/hd/200/sitecore-headless-development/install-the-jss-cli-globally.html

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

Initialise JSS App

Refer following for various options –https://doc.sitecore.com/xp/en/developers/hd/210/sitecore-headless-development/the-jss-app-initializer.html

Use following command-

npx create-sitecore-jss --templates nextjs,nextjs-sxa --appName retail-app --hostName xp103.sc --fetchWith GraphQL

Possible values for templates arguments-

Base templatesnextjs. Other possible values-

Other templates

appName – enter the app name provided in the rendering host. See Setup the rendering host section

hostname– enter the hostname of the Sitecore instance

While installing following questions are asked-

? Where would you like your new app created? – provide the location to create a next jss app

? How would you like to prerender your application? – Select SSG

Understand the pre-rendering to select. In this case I have selected SSG option.

https://doc.sitecore.com/xp/en/developers/hd/190/sitecore-headless-development/prerendering-methods-and-data-fetching-strategies-in-jss-next-js-apps.html

https://doc.sitecore.com/xp/en/developers/hd/210/sitecore-headless-development/switch-the-pre-rendering-method-in-a-jss-next-js-app.html

Following files will be created in a new folder (retail-app) –

Setup JSS app-

see this link- https://doc.sitecore.com/xp/en/developers/hd/190/sitecore-headless-development/start-a-jss-app-in-disconnected-mode.html

Setup the JSS app-

jss setup

Following options are asked, provide the required details-

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

Path to the Sitecore folder (e.g. c:\inetpub\wwwroot\my.siteco.re): C:\inetpub\wwwroot\XP103.sc

Sitecore hostname (e.g. http://myapp.local.siteco.re; see /sitecore/config; ensure added to hosts): https://xp103.sc

Sitecore import service URL [https://xp103.sc/sitecore/api/jss/import]: [Leave blank]

Sitecore API Key (ID of API key item): B418AB1D-A7A9-48F4-9A96-51F7D6C2105F [enter the api key created earlier- see section Create JSS Api key ]

Please enter your deployment secret (32+ random chars; or press enter to generate one): [Leave this blank and it should create one or enter the value here]

See the highlighted values. Also note the where the deployment secret is written-C:\projects\Sitecore\HeadlessSXA\retail-app\sitecore\config\retail-app.deploysecret.config

NEXT STEPS

Remove/Comment the site definition in this case as opposed to JSS sites as this will be handled in Sitecore site settings-

Remove it from /sitecore/config/retail-app.config

Verify JSS app registration-

See the values of Endpoint Url and Application URL. The same url was configured in rendering host.

Set JSS Editing Secret in .env file- Use the deployment secret from the /sitecore/config/app-name.deploysecret.config

Deploy config

jss deploy config

Note the config was deployed to C:\inetpub\wwwroot\XP103.sc\App_Config\Include\zzz folder in the Sitecore instance

Start Application in connected mode

jss start:connected

Application should listen to http://localhost:3000

Try accessing – http://localhost:3000

Errors:-

Solution

$env:NODE_TLS_REJECT_UNAUTHORIZED=0

Error-

Solution-

Search for root item in code- open \src\lib\dictionary-service-factory.ts

After all the above errors, it should show the blank page- Since there are no component s added.

Lets add some content, for this opne the Home page in experienec editor and see this error-

Error- Connection to your rendering host failed with an Unauthorized error. Ensure the JSS Editing Secret is configured.

Update the JSS Editing Secret in Sitecore instance at following path (best practice-you have to patch the config instead of updating the Sitecore configs directly)

App_Config\Sitecore\JavaScriptServices\Sitecore.JavaScriptServices.ViewEngine.Http.config

Update the value to the deployment secret used earlier in .env file-

After update-

Finally we can see the experience editor-

Add some content –

Save and Publish

Finally we have next js app showing the content- on localhost:3000

Layout Services

Lets check if the layout services are accessible-

Get Item data (home) and secret key-

https://xp103.sc/sitecore/api/layout/render/jss?item={40A111E6-6B4D-41D5-BA0D-FD993C5D00E4}&sc_apikey={B418AB1D-A7A9-48F4-9A96-51F7D6C2105F}

Graphql

https://xp103.sc/sitecore/api/graph/edge/ui?sc_apikey={B418AB1D-A7A9-48F4-9A96-51F7D6C2105F}

Step by step guide to install Sitecore XP 10.3 using SIF

Most of the organisation now want to setup their development environment using docker but if you are currently not considering contanerisation this blog will help you install the Sitecore 10.3 in your local machine.

To install XP Single Developer(XP0) 10.3 on development machine, follow the steps in this blog post

Use the Sitecore Installation Guide for hardware, OS, database and other software requirements

Installation guide for XP Single (XP0) 

OS Requirements-

Windows 10(64 bit)

Ensure IIS 10x installed

Ensure Powershell version 5.1 or later is installed. Check here the latest version

Install .Net Framework 4.8.0 – Download Developer Pack

Sitecore Identity server requires .NET Core 6.0 Windows Hosting Bundle or later

Install Microsoft Visual C++ 2015

Install Microsoft SQL Server 2017 Express Edition OR Install Microsoft SQL Server 2019 Express

You may also install the above prequisites using CLI. Goto section Install prerequisites before installing XP 10.2 after installing SQL Server and SIF

Install SQL Server Management Studio (SSMS)

This will ask you to restart your VM/Machine

  • Enable Contained Database Authentication

After installing SQL Server launch SQL Server Management Studio and run following-

EXEC sp_configure 'contained', 1;
 RECONFIGURE;

  • Install SIF Module
  1. Open PowerShell as an administrator.
  2. Set unrestricted execution to current user
Set-ExecutionPolicy -Scope CurrentUser Unrestricted

3. Register repository

Register-PSRepository -Name SitecoreGallery https://sitecore.myget.org/F/sc-powershell/api/v2

4. Install SIF

Install-Module SitecoreInstallFramework

5. After SIF installation check if the SIF 2.3.0 is installed

Get-Module SitecoreInstallFramework –ListAvailable 

To install specific version of SIF or run multiple version of SIF see this blog

Download XP Single Developer (XP0)

  • Prepare the installation folder

1. Extract downloaded XP Single Developer package to a folder e.g.:- C:\SCInstallation\XP103
2. Extract XP0 Configuration files 10.3.0 rev. 008463.zip in same folder

3. Copy license to the e.g. – C:\SCInstallation\XP103  folder

  • Install prerequisites before installing XP 10.3

Switch to the installable e.g.:- C:\SCInstallation\XP103 folder and execute following script

Install-SitecoreConfiguration -Path .\Prerequisites.json

Install SOLR 8.11.2

1. Create a SOLR folder e.g.:- C:\SOLR and switch to e.g.- C:\SCInstallation\XP103  folder. Open Solr-SingleDeveloper.json file.

2. Change the Install Root for SOLR in Solr-SingleDeveloper.json – DefaultValue if your SOLR installat location is different

  "SolrInstallRoot": {
            "Type": "String",
            "Description": "The file path to install Solr. This config will add the prefix and solr version e.g C:\\Solr becomes C:\\Solr\\[SolrServicePrefix]Solr-8.11.2",
            "DefaultValue": "C:\\SOLR"
        },

3. Execute –

Install-SitecoreConfiguration -Path .\Solr-SingleDeveloper.json

This should install the solr and should run on https.

Prepare and Execute script for installation

Open XP0-SingleDeveloper.ps1 file to update following-

  • $Prefix
  • $SitecoreAdminPassword
  • $SCInstallRoot – change path to the folder installers are available
  • $SolrUrl
  • $SolrRoot
  • $SolrService
  • $SqlServer
  • $SqlAdminUser
  • $SqlAdminPassword

Execute installation script – .\XP0-SingleDevelor.ps1

 .\XP0-SingleDevelor.ps1

Hopefully this should install successfully on local machine. But if you see any errors below are resoultion to few of the issues I got during installation.

Error while installation

xconnect Marketing Automation fails to start-

Solution

Disable TLS 1.3 over TCP for xconnect. Rerun the installation script or disable this as soon as the xconnect bindings are setup by script during installation.

Copy the instance xconnect certificate to the “Trusted root..” folde. In my case this is the certificate

Check that trusted root does not contain non-self-signed certificates using the following PowerShell script:

Get-Childitem cert:\LocalMachine\root -Recurse | Where-Object {$_.Issuer -ne $_.Subject}

If there are any, move them to the Intermediate Certification Authorities:

Get-Childitem cert:\LocalMachine\root -Recurse | Where-Object {$_.Issuer -ne $_.Subject} | Move-Item -Destination Cert:\LocalMachine\CA

https://sitecore.stackexchange.com/questions/10418/the-http-response-was-not-successful-forbidden

No registration for extension ‘AppPool’ of type ‘Task’

If the service still don’t start try running executable it manually at following location-

XP103.xconnect\App_Data\jobs\continuous\AutomationEngine\Sitecore.MAEngine.exe

Solution

Check if the Asp.Net options in Windows features – Internet Information Services.

Error: .Net SqlClient Data Provider: Msg 12809, Level 16, State 1, Line 5 You must remove all users with password before setting the containment property to NONE.

Solution-

EXEC sp_configure 'contained', 1;
 RECONFIGURE;

 22 total views