Welcome! This is my personal blog about Web technologies, software development, open source and other related topics
The ideas and opinions expressed here are solely mine and don't represent those of others, either individuals or companies.The code snippets or references to software products or analogous are to be used without any warranty of any kind. If you enjoy the content, feel free to share it and re-use it as long as you provide a link to the original post.
In this blog we will create a Headless SXA Site in local instance, setup and resolve any errors while running the rendering app (sxastarter)
We will create a Headless SXA site in Sitecore local instance and then setup the FE application.
With the local Sitecore instance(CM) you should also see the rendering host is configured i.e. https://www.sxastarter.localhost/
While seting up the local instance we haven’t made any changes to docker compose or override files nor to the .env files manually, although while initalizing the app certian key values were updated in .env file.
Check the sxastarter rendering host- https://www.sxastarter.localhost/
At this point you might see the error since we haven;t created a sxastarter app in Sitecore.
This is because the no Site Collection or Headless Site exists in Sitecore. Lets create a Headless Tenant and Site.
2 . Create a Healdess Tenant and Site
In your Sitecore instance create a Healdess Site Collection, you may create a folder Site Collection Folder if required-
Next provide the Site collection name, in this case scxmcloud and select the required modules-
You should see the Site collection created along with the required templates in Project/scxmcloud folder.
Setup should create folders and required items in following location. Note this as this is required whilst setting the item sync using Sitecore SCS (Sitecore Content Serialization)
Media Library – /sitecore/media library/Project/scxmcloud
Templates – /sitecore/templates/Project/scxmcloud
Create a Headless SXA Site
Create headless site under site collection-
Provide the name of the site- sxastarter.
You may choose another name but ensure the package.json file is updated accordingly.
Select the modules- Note I selected the basic site module. This should add sample items to home page along with About page. You may choose not to select the basic site module.
Enter the deployment secret created whilst setting up the JSS app
Site should now be created-
Site without Basic Site module-
Keep the Site Settings as is-
sxastarter site is created along with this the choosen mdoules are installed.
Once this is done ensure the app name in Settings is same as in package.config-
Open the experience editor and you should see the blank page-
Lets add the Title component and images to see if the changes are reflecting in Experience Editor and FE.
We now have site ready to start developing components.
The newly added title in header, images should also be displayed-
This conculdes setting up the local environment with having Sitecore CM instance and the jss app (FE) running in docker. JSS app is runing in container.
In next blog post we will how to setup the FE without having Sitecore local instance and connect to XM Cloud.
But before that we need to setup the XM Cloud project and environments, for that we will configure the Sietcore Content Serilization to push the changes made in local to XM Cloud. Coming in next blog.
Errors-
sxastarter site hosted in docker throws below error.
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')
#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.
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
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 –
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'"
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.
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
3. Search Category with newly created extended property i.e. DisplayType
First search all categories with Catalog Id “0001”. Following results will be shown-
Now lets try and search with extended properties i.e. Catalog Id “0001” and DisplayType as Text. For this use “Add Filter” option and key as “xp.DisplayType” and Filter Value as “Text”.
This request wont show any results and hence Xp Indices needs to created for Category
4. Create XP Indices
Navigate to Seller => Xp Indices
Indexable resources Catagory “Add Index” => “xp.DisplayType” and Save Changes
Now search the Catagories same as in Step 3 with Filter option and this time you should be able to see the results-
Step 4 – Setup the App Configuration either using appSettings or Azure App Configuration
Setup a App Configuration using appSettings.json
Use/Download the template here provided by Sitecore to setup the configuration
Create a json file on your local machine by copying the content in the template. In my case I have created OCHeadstartConfig.json. The template looks as below- Highlighted values are the minimum configuration required for Headstart project. Few of the configuration will come from the Seed step explained in Part-2 – Step 4 – Populate Ordercloud Markeplace with the seed request
Following configuration(highlighted) needs to be updated minimum to get the Headstart project working-
Get the StorageAccount.Settings.ConnectionString from Storage Explorer-
Create appSettings.json file and copy the above configuration in the file.
appSettings.json file should be in Headstart.API project-
IMP – Check if the middleware applicaiton is running and listening to localhsot 5001 port. If not you should run the Headstart.Api before running UI application.
Setup a App Configuration using Azure App Configuration
Get the configuration connection string
Goto the Access Keys – Read-only keys tab and copy the connection string
Add a new Environment Variable named – APP_CONFIG_CONNECTION and copy the connection string in the Value.
Run the middleware application with the Demo profile.
IMP – If you see compiler error’s whilst running the application. See this blog for the resolution.
Step 5 – Run the Seller UI application
Now that we have all the required configuration checked and changed, time to run the Seller UI application
RUN – from the visual studio terminal or powershell
npm install
npm run start
Now we have Seller application runing on localhost:4200 port
Provide Admin Username and Password as noted in Part -1 of the blog Step 3- Prepare Seed Request
After successful login-
Also we can see the Seller Admin-
Hope you enjoyed setting Sitecore Ordercloud Headstart 🙂
Since we will be now setup a backend application (i.e. admin etc) the Client IDs and Client Secret that was create in Step 5 needs to be secured. This can be condifured in Azure App Configuration. See the link on how to setup this.
Use/Download the template here provided by Sitecore to setup the configuration
Create a json file on your local machine by copying the content in the template. In my case I have created OCHeadstartConfig.json. The template looks as below-
Provide the Resource name in this case I have used OrderCloudHeadStartConfig
Select Location and Pricing tier.
Once the resource is created in the Import/Export option select –
Source service – Configuration file
For language – Other
File type- Json
Source file – *.json (auto selected)
Select the folder icon in Source file option and click Apply to import the configuration.
After the config file is imported navigate to “Configuration Explorer”. There are 63 config key values are imported but in template there are 64.
“SendgridSettings:OrderApprovalTemplateID”: “”, is not imported for due to some reason. Create a new manually if required. For the Demo this is not required.
Click on the values to see the values of the key that was imported-
Set the following values by Right clicking the keys. Copy this from Step 4 where the response was received from seed request-
OrderCloudSettings:MiddlewareClientID
OrderCloudSettings:MiddlewareClientSecret
OrderCloudSettings:MarketplaceID
OrderCloudSettings:MarketplaceName
Continue updating config in next section for Storage Account.
Step 2- Create a Azure Storage Account (if you already don’t have)
Create a Azure Storage Account
Follow the steps and set the configuration as per your requirements
Copy the storage account name and Storage connection string
Set StorageAccountSettings:BlobPrimaryEndpoint – https://yourstorageaccount.blob.core.windows.net/occontainer
Set StorageAccountSettings:ConnectionString
Thats in in this blog. In next blog will cover setting up the UI project.
Hope you are enjoying setting your Ordercloud Headstart project.
Admin User who created the Marketplace can delete and Transfer the Ownership of the Account. Where the ownership is transfered to the users cannot delete the Marketplace.
To delete the Marketplace you should have first created a Marketplace and login to the portal as Admin User having Full Access.
Follow below steps to configure Sitecore Ordercloud Headstart middlewarewithout having to provision Azure online resources. i.e. setup offline Azure resources
Install Azurite- Pre-requisite is to install node js
npm install -g azurite
Run Azurite- Navigate to the folder where the supporting files should be deployed e.g.: c:\Azurite
azurite start
OR - if you want specfic folder and in debug mode
azurite --silent --location c:\azurite --debug c:\azurite\debug.log
Blob service should listen to http://127.0.0.1:10000
Step 2 – Install Microsoft Azure Storage Explorer
Install Azure storage explorer. Download from here
Step 3 – Configure Blob Containers
Connect to Local Azure Storage
Click on the connect to open the connection dialog box
Select the Local storage emulator
Fill in the required details
Display name
Account name – this wil be used to connect to the blob storage
Blobs port- port used to connect to the vlob storage
Queues and Tables port- port used to connect queues and tables respectively
These are the connection information (you might have to note this)-
Local account is created-
Storage Explorer is now able to conect to Local Storage Emulator i.e. Azurite
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
Ideally Container, Virtual Directory and trnslation file should be created by Headstart Api. I couldn’t make it work. Hence alternative this I have attached en.json file here.
Once uploaded you should be able to see the uploaded file-
Set Public Access Level to Blob Container
Select the Public read access for containers and blobs
Configure CORS settings
CORS settings are required for accessing the en.json file to access from the local blob storage