Category: Sitecore

Setting up a Sitecore JSS development environment with the Containers template for Next.js

Follow steps in this link —

https://doc.sitecore.com/xp/en/developers/hd/211/sitecore-headless-development/walkthrough–setting-up-a-development-environment-with-the-sitecore-containers-template-for-next-js.html

Following are thre pre-requisite for setting on your local machine-

Apart from this also install Sitecore JSS CLI-

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

Install the template

dotnet new -i Sitecore.DevEx.Templates --nuget-source https://sitecore.myget.org/F/sc-packages/api/v3/index.json

dotnet new sitecore.nextjs.gettingstarted -n samplejss

Should first Restores dotnet local tools for the solution and Initializes the JSS project

What is your Sitecore hostname (used if deployed to Sitecore)? (samplejss.dev.local) << leave blank or provide the host name>>

How would you like to fetch Layout and Dictionary data? 
GraphQL
REST

How would you like to prerender your application?
SSG
SSR

Which additional language do you want to support (en is already included and required)? << leave blank or type the language you want. should select da-DK by default and additional language>>

JSS application is now ready and updated for continerized environment.

Navigate to project folder and initialize the environment.

.\init.ps1 -InitEnv -LicenseXmlPath "<C:\path\to\license.xml>" -AdminPassword "<desired password>"
setx NODE_EXTRA_CA_CERTS C:\Users\sandeep\AppData\Local\mkcert\rootCA.pem

Execute up.ps1 to create containers-

.\up.ps1

Error-

CM is not coming up-

Checked the docker logs, and found this error-

The path is not set correctly. Need to escape the characters-

Resolution-

Change – entrypoint: powershell.exe -Command “& C:\tools\entrypoints\iis\Development.ps1” to entrypoint: powershell.exe -Command “& C:\\tools\\entrypoints\\iis\\Development.ps1” in docker-compose.override.yml file for xm1, xp0 and xp1

Take down all the containers and build again.

Now this should look fine-

Enter CM admin credentials and allow the access-

CM and App should load –

As of writing this post, this setup installed Sitecore 10.3.

Loading

Sitecore CDP- Sending View Event using direct HTTP requests

The VIEW event captures the guest’s action of viewing a page. To track guest behavior use VIEW event on all pages.

Sending a request through postman- use below URL-

https://{{apiEndpoint}}/{{apiVersion}}/event/create.json?client_key={{CLIENT_KEY}}&message={{message}}

To know more what should be the API endpoint and api version see this blog

Generate browser id – see how to generate browserid using postman here

URL – contains event to create view event.

Message-

var browser_id = pm.environment.get("browserId")
var pointOfSale = pm.environment.get("PointOfSale")

var message = {    
    "channel": "WEB",
    "type": "VIEW",
    "language": "EN",
    "currency": "GBP",
    "page": "home page",
    "pos": pointOfSale,
    "browser_id": browser_id
}

postman.setEnvironmentVariable("message", JSON.stringify(message));

Check the view event in Sitecore CDP portal-

Search the Broswer Id in guests page-

Select the Anonymous Visitor.

Select the Timeline tab

Select the orange color settings icon to check the view event details which is only displayed in debug mode-

See the detials the message that was sent as part of request-

CURL command for same –

curl --location -g --request GET 'https://api-engage-eu.sitecorecloud.io/v1.2/event/create.json?client_key=<<enter client key>>&message={"channel":"WEB","type":"VIEW","language":"EN","currency":"GBP","page":"home page","pos":"pastoral-witty-grill","browser_id":"<<enter browser id>>"}'

C# code-

var client = new RestClient("https://api-engage-eu.sitecorecloud.io/v1.2/event/create.json?client_key=<<enter client key>>&message={\"channel\":\"WEB\",\"type\":\"VIEW\",\"language\":\"EN\",\"currency\":\"GBP\",\"page\":\"home page\",\"pos\":\"pastoral-witty-grill\",\"browser_id\":\"<<enter browser id>>\"}");
client.Timeout = -1;
var request = new RestRequest(Method.GET);
IRestResponse response = client.Execute(request);
Console.WriteLine(response.Content);

Python- http client code snippet-

import http.client

conn = http.client.HTTPSConnection("api-engage-eu.sitecorecloud.io")
payload = ''
headers = {}
conn.request("GET", "/v1.2/event/create.json?client_key=<<enter client key>>&message=%7B%22channel%22:%22WEB%22,%22type%22:%22VIEW%22,%22language%22:%22EN%22,%22currency%22:%22GBP%22,%22page%22:%22home%20page%22,%22pos%22:%22pastoral-witty-grill%22,%22browser_id%22:%22<<enter browser id>>%22%7D", payload, headers)
res = conn.getresponse()
data = res.read()
print(data.decode("utf-8"))

Reference-

https://doc.sitecore.com/cdp/en/developers/api/index-en.html#UUID-281a2b8f-627d-a71b-4a1f-df545bc617e9

Loading

Setup Sitecore OrderCloud headstart with Angular in Ubuntu system the docker way

Working on Linux system after been worked on Windows for 2 decades is always fun.

This blog post is to setup the Sitecore OrderCloud Headstart on Ubuntu the Docker way. As all the images used for the Headstart is are Linux based, this I didn’t find major difference how this is been setup in Windows system apart from few changes while installing Storage Explorer and few other erros which I have noted in this blog post.

Note – use sudo for each command or “sudo i”to run as root.

Ensure node js is installed

This might be required for your local build.

sudo apt update

sudo apt install nodejs

Ensure npm is installed

sudo apt install npm

Ensure docker and docker -compose is installed

See this blog post Install Docker on Linux

sudo snap install docker

sudo apt install docker-compose

Docker Compose

Lets start composing and solve errros that might come ourr way-

sudo docker-compose up -d

npm needs TLS1.2

npm notice Beginning October 4, 2021, all connections to the npm registry – including for package installation – must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/
npm WARN @ordercloud/headstart-sdk@0.0.0 No repository field.

https://stackoverflow.com/questions/69044064/npm-notice-beginning-october-4-2021-all-connections-to-the-npm-registry-incl

npm cache clear --force

npm set registry=https://registry.npmjs.org/

npm install -g https://tls-test.npmjs.com/tls-test-1.0.0.tgz

Install .Net SDK

Middleware runs on .Net. So this neds to be installed.

https://learn.microsoft.com/en-us/dotnet/core/install/linux-ubuntu

https://devblogs.microsoft.com/dotnet/dotnet-6-is-now-in-ubuntu-2204/

sudo apt-get update && \
sudo apt-get install -y dotnet-sdk-6.0
sudo apt-get update && \
sudo apt-get install -y aspnetcore-runtime-6.0
sudo apt install dotnet6

I found difficulties installing .Net on Ubuntu. You may have todo few restarts.

 docker compose up -d

This should start all the containers. Note- cosmos container takes time to start till then middleware waits and starts when comos is ready.

Comos should be available now –

Install Azure Storage- Explorer

Install Storage explorer in Ubuntu-

snapd should be already installed if you are using Ubuntu 16.04 LTS or later, you may have to update.

sudo apt update
sudo apt install snapd

Install Storage Explorer

sudo snap install storage-explorer

Open Azure Storage Explorer and follow the steps here –

Execute the command-

snap connect storage-explorer:password-manager-service :password-manager-service

Azure Storage Explorer should be able to open with above command.

Apply the same settings mentioned in this blog

Once you have followed and applied the settings mentioned in the blog, should be able to see the translation files in local storage and able to access the file.

We also have to set CQRS for blob container – lets do this later.

Middleware exited with errors-

Error –

See the resolution to this issue here – section – Unable to start Middleware container due to erros

Error – Connection refused (127.0.0.1:8081)

System.AggregateException: One or more errors occurred. (Connection refused (127.0.0.1:8081))
       ---> System.Net.Http.HttpRequestException: Connection refused (127.0.0.1:8081)

See the resolution to this issue here – section – Connection to Comos DB is failing

Error- Unsupported platform

0 18.52 npm ERR! code EBADPLATFORM
#0 18.53 npm ERR! notsup Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
#0 18.53 npm ERR! notsup Valid OS:    darwin
#0 18.53 npm ERR! notsup Valid Arch:  any
#0 18.53 npm ERR! notsup Actual OS:   linux
#0 18.53 npm ERR! notsup Actual Arch: x64

Changed the node version- see the blog here

Also changed the nginx version – see Error 4 here

 => ERROR [headstart-seller:local-linux production 4/8] RUN apk add --update nodejs nodejs-npm && npm install -g json                                                                                 1.0s

see Error 4 here

Change from this  -
RUN apk add --update nodejs nodejs-npm && npm install -g json

to-
RUN apk add --update nodejs npm && npm install -g json
#0 51.97 npm ERR! npm ERR! Cannot read properties of null (reading 'pickAlgorithm')

See the resolution to this error here

Now you should have all containers up and running with

sudo docker compose up -d

If you see this error-

Check for Configure CORS to Blob Containers in this blog post

And here I have Seller, buyer and middleware working on Ubuntu system-

This has really opened the horizon to develop, deploy and maintain OrderCloud solution on a technology agnostic platform.

Loading

Setup Sitecore OrderCloud headstart the docker way

There is quite a lot todo to setup, lets start-

Clone OrderCloud repository for Headstart

Clone the repository for HeadStart from here – https://github.com/ordercloud-api/headstart

Setup/Install Docker

Install Docker Desktop from here – https://docs.docker.com/desktop/

Switch to Linux containers

Stop IIS

Ensure you dont’ have Azurite insalled and listening to 10000, 10001 and 10002 ports

Ensure you dont have Azure Cosmos DB Emulator running on the machine as this will use 8081 port which will also be exposed by cosmos container.

Copy .env.template and save as .env (Will fill in the required details in .env file one by one)

Add the following records to your Hosts file

127.0.0.1 buyer.headstart.localhost

127.0.0.1 seller.headstart.localhost

127.0.0.1 api.headstart.localhost

As this is set in .env file (you may change as per your requirement)

There will be quite a few issues coming our way and will try to note it here one by one and the solution for same-

Execute docker compose

Navigate to the working directory and execute following command-

 docker compose up -d

Following images and containers will be created as part of the headstart setup-

Cosmos DB

Storage (Azurite)

Middleware

Seller App

Buyer App

Error 1- Uncompatible node version

0 2.885 Node.js version v12.20.0 detected.

0 2.885 The Angular CLI requires a minimum Node.js version of either v14.15, or v16.10.

See here how I resolved this error- Uncompatible node version

Error 2- Package installation must use TLS 1.2 or higher and Cannot read properties of null (reading ‘pickAlgorithm’)

0 47.60 npm notice Beginning October 4, 2021, all connections to the npm registry - including for package installation - must use TLS 1.2 or higher. You are currently using plaintext http to connect. Please visit the GitHub blog for more information: https://github.blog/2021-08-23-npm-registry-deprecating-tls-1-0-tls-1-1/

0 114.7 npm ERR! Cannot read properties of null (reading 'pickAlgorithm')

See here how I resolved this error- Package installation must use TLS 1.2 or higher

Errror 3-

#0 2.885 Node.js version v12.20.0 detected.
#0 2.885 The Angular CLI requires a minimum Node.js version of either v14.15, or v16.10.


 > [headstart-buyer:local-linux builder 9/9] RUN cd /build/APP && npm run build --prod:
#0 0.954 npm WARN config production Use `--omit=dev` instead.
#0 0.983
#0 0.983 > headstart@0.0.0 build
#0 0.983 > ng build --configuration=deploy && node scripts/hash-css-files && node scripts/move-release-scripts && node scripts/copy-main-js && node scripts/copy-index-html
#0 0.983
#0 11.70 - Generating browser application bundles (phase: setup)...
#0 16.88 Processing legacy "View Engine" libraries:
#0 17.75 - @ngx-translate/http-loader [es2015/esm2015] (git+https://github.com/ngx-translate/http-loader.git)
#0 18.98 - ngx-forms-typed [es2015/esm2015] (https://github.com/gparlakov/forms-typed)
#0 21.65 Encourage the library authors to publish an Ivy distribution.
#0 109.2 Killed
------
failed to solve: executor failed running [/bin/sh -c cd /build/APP && npm run build --prod]: exit code: 137

Not sure why this error but I ran following command instead-

docker-compose build --no-cache

Error 4 –

cannot write C:\Users\sande\AppData\Local\Temp\tmppxl_v0jp because server did not provide an image ID
ERROR: Service 'buyer' failed to build : Build failed

Solution-

Set the latest nginx alpine base image in the Dockerfile as nginx:1.23.3-alpine. See the latest availabel bae image here – https://hub.docker.com/_/nginx

Change Dockerfile in this location headstart\docker\build\UI

Update nodejs-npm to just npm in the Dockerfile

Dockerfile should look like this-

Sometimes you may have to restart Docker Desktop

Error 5-

Error response from daemon: Ports are not available: exposing port TCP 0.0.0.0:80 -> 0.0.0.0:0: listen tcp 0.0.0.0:80: bind: An attempt was made to access a socket in a way forbidden by its 

The said port might be in use. This is mostly when IIS is running. Stop IIS.

Once you get thhrough these errors, should have following images downloaded and containers created-

Here you can see the warnings compalining few env variable values not set. This is next we are going to setup.

Unable to start Middleware container due to erros-

Also the middleware container has errors- (docker log <<middleware container>>

Unhandled exception. System.Exception: Required app settings are missing: StorageAccountSettings:ConnectionString or StorageAccountSettings:BlobPrimaryEndpoint
2023-03-17 16:28:21    at OrderCloud.Integrations.EnvironmentSeed.Extensions.ServiceCollectionExtensions.AddDefaultTranslationsProvider(IServiceCollection services, StorageAccountSettings storageAccountSettings) in /src/Middleware/integrations/OrderCloud.Integrations.EnvironmentSeed/Extensions/ServiceCollectionExtensions.cs:line 16

Check the Cosmos DB if its working on http://127.0.0.1:8081/_explorer/index.html

Error 6- Check the COMOS DB evaluation period-

Stop and delete the COSMOS DB container and delete the image

Compose the containers again and should pull the image and start the COSMOS DB container again.

Error 7-

This is a timezone issue. Check this form ore detials-

https://askubuntu.com/questions/1096930/sudo-apt-update-error-release-file-is-not-yet-valid

Error 8-

failed to solve: process "/bin/sh -c apk add --update nodejs nodejs-npm && npm install -g json" did not complete successfully: exit code: 1

Update docker to use this command instead-

RUN apk add --update nodejs npm && npm install -g json

Install and Setup Account in Microsoft Azure Storage Explorer

See blof here – How to setup Storage Explorer for Sitecore OrderCloud Headstart Docker

Update the .env file-

Update StorageAccountSettings_ConnectionString to –

change storage to 127.0.0.1 in the connections tring

DefaultEndpointsProtocol=http;AccountName=devstoreaccount1;AccountKey=Eby8vdM02xNOcqFlqUwJPLlmEtlCDXJ1OUzFT50uSRZ6IFsuFq2UVErCz4I6tq/K1SZFPTOtr/KBHBeksoGMGw==;BlobEndpoint=http://127.0.0.1:10000/devstoreaccount1;QueueEndpoint=http://127.0.0.1:10001/devstoreaccount1;

Update StorageAccountSettings_HostUrl to –

http://127.0.0.1:10000/devstoreaccount1

Ensure the StorageAccountSettings_Key is correct –

Eby8vdM02xNOcqFlqUwJPLlmEtlCDXJ1OUzFT50uSRZ6IFsuFq2UVErCz4I6tq/K1SZFPTOtr/KBHBeksoGMGw==

For any environment changes use “docker compose down” and then “docker compose up -d”

Compile/Build the Headstart.sln

In the ServiceCollectionExtensions.cs file in OrderCloud.Integrations.EnvironmentSeed project

remove the condition for checking the BlobPrimaryEndpoint as it is not used and hence not required.

Same way if you are not using ExchangeRates, Tax Provider, payment Provider etc remove the values from .env file to avoid such errors. Following I have removed, you can add this later as and when required. Make the values for this variables empty


EnvironmentSettings_AddressValidationProvider=""
EnvironmentSettings_CurrencyConversionProvider=""
EnvironmentSettings_EmailServiceProvider=""
EnvironmentSettings_PaymentProvider=""
EnvironmentSettings_ShippingProvider=""
EnvironmentSettings_TaxProvider=""
EnvironmentSettings_OMSProvider=""

Recreate the middleware and container again. Delete the middleware image as the code is changes. We dont have the volume mounted hence for setup this way 🙂

docker rmi <<middleware image id>>

docker compose up -d

More errors-

Connection to Comos DB is failing-

2023-03-17 18:16:43 Application startup exception: System.AggregateException: One or more errors occurred. (Connection refused (127.0.0.1:8081))
2023-03-17 18:16:43  ---> System.Net.Http.HttpRequestException: Connection refused (127.0.0.1:8081)
2023-03-17 18:16:43  ---> System.Net.Sockets.SocketException (111): Connection refused

Change CosmosSettings_EndpointUri in .env from “http://127.0.0.1:8081” to use localhost i.e.- change to –

CosmosSettings_EndpointUri="http://localhost:8081"

Address not available (localhost:8081) – Cosmos DB address not available

2023-03-17 18:22:34 Application startup exception: System.AggregateException: One or more errors occurred. (Address not available (localhost:8081))
2023-03-17 18:22:34  ---> System.Net.Http.HttpRequestException: Address not available (localhost:8081)
2023-03-17 18:22:34  ---> System.Net.Sockets.SocketException (99): Address not available

Solution-

Change following in entrypoing.sh file located at – headstart\docker\build\middleware

i.e. instead of using $CosmosSettings_EndpointUri use $CosmosEndpointURI

this varaible contains the IP address of the comos db hosted. This can change everytime the container is created.

Change this - 
-e "this['CosmosSettings:EndpointUri']='$CosmosSettings_EndpointUri'" 
to 
-e "this['CosmosSettings:EndpointUri']='$CosmosEndpointURI'"

Recreate the middleware image.

Now all the containers should be up and running

Middleware API is accessible at – http://api.headstart.localhost/index.html

Seed the OrderCloud Marketplace-

Create a Marketplace in OrderCloud portal-

Send post request to – http://api.headstart.localhost/seed

Request body should be, also see the template here –

https://github.com/ordercloud-api/headstart/blob/development/assets/templates/SeedTemplate.json

{
  "Portal": {
    "Username": "your-portal-email@address.com",
    "Password": "XXXXXXXXX"
  },
  "Marketplace": {
    "Environment": "sandbox",
    "Region": "Us-West",
    "ID": "ocdockerway",
    "Name": "ocdockerway",
    "InitialAdmin": {
      "Username": "demoadminuser",
      "Password": "XXXXXXXXX"
    },
    "EnableAnonymousShopping": true,
    "MiddlewareBaseUrl": "http://api.headstart.localhost",
    "WebhookHashKey": "hashkey"
  }
}

Error- “Message”: “Could not find a part of the path ‘/app/wwwroot\\i18n’.”,

Tried to debug this and seems some how the path is not correctly formed to upload the translations from /app/wwwroot\\i18n folder in container. Changed this to /app/wwwroot/i18n and the files are now uploaded to storage.

"Message": "Connection refused (127.0.0.1:10000)",

Should now see the API Client created in OrderCloud-

Configure .env post seed

TRANSLATE_BLOB_URL="http://127.0.0.1:10000/devstoreaccount1/ngx-translate/i18n/"
BLOB_STORAGE_URL="http://127.0.0.1:10000/devstoreaccount1"
SELLER_CLIENT_ID="Enter the Default Headstart Admin UI Client ID"
BUYER_CLIENT_ID="Enter the Default Buyer Storefront Client ID"

OrderCloudSettings_MiddlewareClientID="Enter Middleware Integrations ClientID"
OrderCloudSettings_MiddlewareClientSecret="Enter Middleware Integrations secret"
OrderCloudSettings_ClientIDsWithAPIAccess="SELLER_CLIENT_ID, BUYER_CLIENT_ID"
OrderCloudSettings_MarketplaceID="Enter Marketplace ID" // ocdockerway
OrderCloudSettings_MarketplaceName="Enter Marketplace Name"

After setting the .env variables lets spin up the containers again-

docker compose up -d

Lets try to access http://seller.headstart.localhost/

Error-

In Buyer.sh and Seller.sh – -test.json update the supported language. This is a array but assigned as a string-

Change from this -
-e "this.supportedLanguages='$SUPPORTED_LANGUAGES'"

to

-e "this.supportedLanguages=$SUPPORTED_LANGUAGES" //Remove single quotes

Recreate Image and container for Seller and Buyer.

Now its loading Seller and Buyer app but wiht errors-

Configure CORS to Blob Containers

Following values in –

Allowed Origins- http://api.headstart.localhost

Also add this for the Seller and Buyer app url’s

Allowed Headers – x-ms-meta-data,x-ms-meta-target,x-ms-meta-abc

Exposed Headers – x-ms-meta-*

Following is the CORS added to Blob Containers-

Finally we have Seller and Buyer app loading without any errors-

Next start populating Catalog, Products etc.

Hope this blog is useful for setting the OrderCloud Headstart setup the dockerway

Loading

OrderCloud Headstart Docker Setup – Install and Setup Account in Microsoft Azure Storage Explorer

Ensure Storage container is running we should be able to access the storage on certian ports and configure the CORS etc.

Install the Storage Explorer from here – https://azure.microsoft.com/en-us/products/storage/storage-explorer/

Connect to Local storage emulator

Connect to Azure Storage (local storage)

Once connected it should show in Emulator-

Create a Blob Container – ngx-translate and create new Virtual Directory i18n

Blob Container and folder name can be any other name. You need to configure this correctly in UI config. See this in later steps

Upload the translation file(optional)

Translation file should be created by Headstart Api while seeding the marketplace further in this blog. This is a test to check if the resource is available. I have attached en.json file here.

Copy URL of the file and check if this is accessible-

Looks like cannot access.

To resolve this error set public access level on Blob container “ngx-translate”

Select Public read access for container and blobs-

Now the resource should be accessible.

Similarly upload resources for fr and jp language.

The resource file should be available in following location – headstart\src\Middleware\src\Headstart.API\wwwroot\i18n

Loading

OrderCloud Headstart Docker Setup Error – uncompatible node version

0 2.885 Node.js version v12.20.0 detected.

0 2.885 The Angular CLI requires a minimum Node.js version of either v14.15, or v16.10.

It looks like in docker compose file for buyer and seller node version configured are old.

Update the following in docker-compose.yml. At the time of writing this blog the node version is 18.13.0. See here for latest- https://hub.docker.com/_/node

This should resolve the error.

Loading

Sitecore CDP and Personalize FAQs

February 2023 Update – Sitecore has released new api endpoint per region which routes through a CDN closer to end users call along with new Javascript library. See the new documentation here – Sitecore CDP developer documentation

How to get the Client Key and API Token?

Get the client key from the Sandbox/CDP & Personalise portal.

Login to portal – https://app.boxever.com/#/

Top right click the settings icon. Select API Access option

Get teh client key from this page-

How to create and get the point of sale?

Login to portal – https://app.boxever.com/#/

Top right click the settings icon. Select API Access option

Search or Create a point of sale-

Enter Name and other required details. Timeout is the session timeout.

How to debug?

Navigate to the Features options

Enable the Debug option

Orange settings icon will appear where the debug is possible-

How to get the base URL for Sitecore CDP Rest API?

Old Endpoints

RegionAPI endpoint
Europeapi.boxever.com
Asia Pacificapi-ap-southeast-2-production.boxever.com
United Statesapi-us.boxever.com

New Endpoints from February 2023 *

ENVIRONMENTBASE URL
AP Regionhttps://api-engage-ap.sitecorecloud.io​
EU Regionhttps://api-engage-eu.sitecorecloud.io
US Regionhttps://api-engage-us.sitecorecloud.io

* Endpoints can change see Sitecore documentation for the up-to-date URL’s

See the updated URL’s here-

https://doc.sitecore.com/personalize/en/developers/api/index-en.html#UUID-b6753c92-1347-86de-069c-f3a5c99ad6c3_UUID-5f0de4b0-05f7-7700-3378-23283d1839ab

What is the Web Flow target URL?

Web Flow target URL is used for Web Experiements and Experiences.

From the documentation following is the URL, but this can change. See the link for up-to-date URL-

ScenarioWeb flow target
Your organization uses Sitecore Personalize.https://d35vb5cccm4xzp.cloudfront.net
Your organization does not use Sitecore Personalize.An empty string ""

https://doc.sitecore.com/personalize/en/developers/api/index-en.html#UUID-a2c699f5-0ea0-028e-b0e3-599e0308e969

What is the latest version of Javascript Library?

Boxever JavaScript Library (legacy)

https://doc.sitecore.com/personalize/en/developers/api/index-en.html#UUID-c2389675-0a7b-3cd9-3e9a-0111d360af39

See the release notes for the latest version. Point of writing this blog the version is 1.4.9. This can change. See the link to get the latest version.

https://doc.sitecore.com/personalize/en/developers/api/index-en.html#UUID-91e5c577-92c2-71c4-efca-4b5b61edc817

How to get Fullstack Experience friendly id?

Navigate to Experience => Full Stack option. Search and open the exprience

Goto details tab to get the friendly id-

What if the size of the compressed batch file exceeds the max limit i.e. 50MB?

Recompress the files into two or more compressed batch files that do not exceed the 50MB size limit. Then upload the compressed files as separate batches.

Reference –

Size limit for uploading batch files

Why I recieve HTTP 400 response when uploading the batch file?

If the size of the import does not match the one specified in the size field in the request, the service returns a HTTP 400 response.

Reference –

Frequent errors you might encounter during the batch file upload process

Why I recieve HTTP 409 response when uploading the batch file?

If the base64 checksum attribute in header does not match the hex-encoded MD5 Checksum generated by uploading the compressed file you will receive 409 response.

Reference –

Frequent errors you might encounter during the batch file upload process

How to delete a guest profile without using Batch API?

Make a DELETE request to the following endpoint- https://api.boxever.com/v2/guests/{GUESTREF}

It may take upto 24 hours for the Guest to be removed

What access do you need to setup the Point of sale for Sitecore CDP and Personalize?

Enterprise User Manager or Enterprise Admin role 

How to generate the browser id using postman?

To generate browserid send a request to this endpoint –

https://{{apiEndpoint}}/{{apiVersion}}/browser/create.json?client_key={{CLIENT_KEY}}&message={}

See above the apiendpoint and apiversion to use.

Send request with the clientkey in query parameters.

The “ref” in response is the browser id

Loading

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

Error- Page not found

Solution – Ensute the site and the app name is same.

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}

Loading

Sandeep Pote wins Sitecore Most Valuable Professional award

Sandeep Pote has been named a Most Valuable Professional (MVP) in the Technology by Sitecore®, a global leader in end-to-end digital experience management software. Sandeep Pote was one of only 137 Technology MVPs | 30 Strategy MVPs | 74 Ambassadors] worldwide to be named a Sitecore MVP this year.

Now in it’s 17th year, the MVP program recognizes professionals who actively share their fascination, knowledge and expertise with online and offline Sitecore communities to help them best utilize Sitecore products to deliver premier customer experiences.

Selected out of more than 16,000 certified developers and over 30,000 active community participants, the 241 MVPs are truly an elite group. This year’s MVPs were selected by a panel of Sitecore employees for the quality, quantity and impact of the contributions they made in 2022, including the sharing of product expertise and advanced knowledge of the Sitecore platform to support both partners and customers.

Sandeep also joined MVP mentor program.

Loading

Install Sitecore Commerce 10.3 using SIF

Follow these steps to install Sitecore Commerce 10.3 On Premise. To successfully install refer to Installation Guide provided by Sitecore.

Before installing Sitecore Commerce install Sitecore XP 10.3. See this blog to install Sitecore XP 10.3 using SIF. Say the XP site name is- xp103.sc

Download Installation Guide

Hosting Environment Requirements/ Download and Install following software-

  1. OS – Windows Server 2019/2016 or Windows 10 Pro(64-bit) or Windows 11 Pro(64-bit)
  2. Redis (Windows): 3.0.504 (or later)
  3. Database – Microsoft SQL Server 2017 Express Edition (This should be already installed as a part of XP 10)
  4. Install Microsoft Web Deploy 3.6 if not already installed
  5. Install URL Rewrite using Web Platform Installer
  6. SOLR 8.11.2 (This should have already installed as a part of XP 10.3 install)
  7. Install PowerShell 5.1 or later is not already installed
  8. Web Platform Transformer (Download nuget package)
  9. (Important) Install Web hosting- here

IMPORTANT – As per the release notes –

The deployment of SXA has been removed from the Commerce installation, and instead installed as a Platform pre-requisite before installing Commerce packages.

Sitecore PowerShell Extension for Sitecore on your local Sitecore instance if not already

Sitecore Experience Accelerator on your local Sitecore instance if not already

Also Commerce Ops service is removed from deployment configuration this will reduce deployment time and hosting cost.

Before starting the installation ensure XP 10.2 instance is working and indexed. If not indexed rebuild all search indexes-

Download Sitecore Experience Commerce 10.3

Step-by-step installation process-

1. Create a installation folder for XC – xcinstall for e.g.- C:\SCInstallation\103\xc103

2. Copy and extract Sitecore.Commerce.WDP.2022.12-9.0.82.zip file to C:\SCInstallation\103\xc103

3. Extract Web Platform Transfomer nuget package and copy Microsoft.Web.XmlTransform.dll to C:\SCInstallation\103\xc103

4. Extract SIF.Sitecore.Commerce.8.0.14.zip to C:\SCInstallation\103\xc103 folder. Rename this to SIF

Installation folder structure should look like this-

 Open Deploy-Sitecore-Commerce.ps1 file in SIF folder to update the following-

  • $XCInstallRoot
  • $XCSIFInstallRoot = “$XCInstallRoot\SIF” or $PWD is fine – it is Present Working Directory,
  • $SiteNamePrefix
  • $SiteName
  • $SiteHostHeaderName [optional]
  • $MergeToolFullPath= “$XCInstallRoot\Microsoft.Web.XmlTransform.dll”
  • $CommerceServicesDbServer = “”

12. Create Commerce Engine Connect Client Secret for the Sitecore Identity Server

  • Copy below script to file to scinstall/SIF folder example XC103SecretClientCertificate.ps1
  • Execute the script and copy secret key to $CommerceEngineConnectClientSecret
$bytes = New-Object Byte[] 32
$rand = [System.Security.Cryptography.RandomNumberGenerator]::Create()
$rand.GetBytes($bytes)
$rand.Dispose()
$newClientSecret = [System.Convert]::ToBase64String($bytes)
echo $newClientSecret

13. [Optional] Update Sitecore domain or keep it default

  • $SitecoreDomain
  • $SitecoreUsername
  • $SitecoreUserPassword
  • $UserName
  • $UserPassword

14. Update other DB related settings

  • $SqlUser
  • $SqlPass
  • $SitecoreDbServer
  • $CommerceServicesDbServer

15. Update SOLR details-

  • $SolrUrl
  • $SolrRoot
  • $SolrService

Execute .\Deploy-Sitecore-Commerce.ps1

 .\Deploy-Sitecore-Commerce.ps1

Storefront-

Business Tools-

Highly recommended to install commerce on fresh VM or machine that don’t have previously installed Sitecore Commerce to avoid any errors during isntallation. If not then below are few of the errors you might see during installation.

Errors-

00007 10:12:17 ERROR CtxMsg.Error.ContentPathAlreadyExists: Text=Content path ‘/sitecore/Commerce/Commerce Control Panel’ already exists.


00038 10:12:17 ERROR Management.block.getitembypath: Sitecore Item Service Get item failed, Item /sitecore/Commerce/Commerce Control Panel/Commerce Engine Settings/Commerce Terms/System Messages/ContentPathAlreadyExists not found.

Solution- see here – https://robearlam.com/blog/CtxMsg-Error-ContentPathAlreadyExists-error

Loading