Category: Sitecore

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}

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.

 8 total views

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

Sitecore Asp.Net rendering with Content Resolver for Helix Examples Solution

In my previous post we saw how to create a simple rendering with data source.

For creating rendering using content resolver first follow the blog <<enter blog url here>>

Content resolvers help provice more complex data beyond the serialization of a component data source.

In this blog will list all the Articles on the page which are marked as Featured Article.

The custom logic for filtering will go in Content resolver.

Craete a project for Content Resolver(.net framework 4.8) . This framework is used just to follow with the exisitng content resolvers provided by Helix Examples Solution.

Content Resolver Project (BasicCompany.Feature.Articles.Platform)

Create a new .Net Framework project

Instead of creating new poroject I will copy the project from Navigation/Platform folder and rename it to BasicCompany.Feature.Articles.Platform.

Delete all the files from this project as it relates to Navigation. You may also want to change the AssemblyName and the AssemblyInfo file.

Create Models for Articles and Article

Create Models Folder and add below models

Articles.cs

using Sitecore.Data.Items;
using System.Collections.Generic;

namespace BasicCompany.Feature.Articles.Models
{
    public class Articles
    {
        public Item ArticlesPage { get; set; }

        public IList<Article> ArticleItems { get; set; }
    }
}

Article.cs

using Sitecore.Data.Items;

namespace BasicCompany.Feature.Articles.Models
{
    public class Article
    {
        public Item Item { get; set; }

        public Item ItemData { get; set; }
        public string Url { get; set; }
    }
}

Create Service for ArticleBuilder and ArticleRootResolver

Create a new folder Services and following-

//IArticleBuilder
 public interface IArticleBuilder
    {
        Articles.Models.Articles GetArticles(Item contextItem);
    }
//ArticleBuilder 

 public class ArticleBuilder : IArticleBuilder
    {
        private readonly IArticleRootResolver _articleRootResolver;
        private readonly BaseLinkManager _linkManager;

        public ArticleBuilder(BaseLinkManager linkManager, IArticleRootResolver articleRootResolver)
        {
            _articleRootResolver = articleRootResolver;
            _linkManager = linkManager;
        }

        public Articles.Models.Articles GetArticles(Item contextItem)
        {
            var articleRoot = _articleRootResolver.GetArticleRoot(contextItem);
            if (articleRoot == null)
            {
                return new Articles.Models.Articles();
            }

            return new Articles.Models.Articles()
            {
                ArticlesPage = articleRoot,
                ArticleItems = GetArticleItems(articleRoot, contextItem)
            };
        }

        private IList<Article> GetArticleItems(Item articleRoot, Item contextItem)
        {
            var items = new List<Item>();

            items.AddRange(articleRoot.Children.Where(item => item.DescendsFrom(Templates.ArticleItem.Id)));

            var articleItems = items.Select(item => new Article()
            {
                Item = item,
                ItemData = item.Axes.GetDescendants().FirstOrDefault(itemData => itemData.DescendsFrom(Templates.ArticleItemData.Id)),
                Url = _linkManager.GetItemUrl(item)
            }).ToList();

            return articleItems;
        }
    }
//IArticleRootResolver

 public interface IArticleRootResolver
    {
        Item GetArticleRoot(Item contextItem);
    }

namespace BasicCompany.Feature.Articles.Services
{
    public class ArticleRootResolver : IArticleRootResolver
    {
        public Item GetArticleRoot(Item contextItem)
        {
            if (contextItem == null)
            {
                return null;
            }
            return contextItem.DescendsFrom(Templates.ArticleRoot.Id)
                ? contextItem
                : contextItem.Axes.GetAncestors().LastOrDefault(x => x.DescendsFrom(Templates.ArticleRoot.Id));
        }
    }
}

Create Layout Service i.e. content resolver class

Create new folder LayoutServices and add following-

namespace BasicCompany.Feature.Articles.LayoutService
{
    public class ArticleContentResolver : Sitecore.LayoutService.ItemRendering.ContentsResolvers.RenderingContentsResolver
    {
        private readonly IArticleBuilder _articleBuilder;

        public ArticleContentResolver(IArticleBuilder articleBuilder)
        {
            _articleBuilder = articleBuilder;
        }

        public override object ResolveContents(Rendering rendering, IRenderingConfiguration renderingConfig)
        {
            var articles = _articleBuilder.GetArticles(this.GetContextItem(rendering, renderingConfig));

            var contents = new
            {
                ArticleItems = articles.ArticleItems.Select(item => new
                {
                    Item = item.Item,
                    ItemData = item.ItemData,
                    Serialized = base.ProcessItem(item.ItemData, rendering, renderingConfig)
                }).Select(article => new
                {
                    Url = LinkManager.GetItemUrl(article.Item),
                    Id = article.Item.ID,
                    Fields = new
                    {
                        Title = article.Serialized[article.ItemData.Fields["Title"].Name],
                        Description = article.Serialized[article.ItemData.Fields["Description"].Name],
                        ShortDescription = article.Serialized[article.ItemData.Fields["ShortDescription"].Name],
                    }
                })
            };

            return contents;
        }
    }
}

Create Service Configurator to register the services-

namespace BasicCompany.Feature.Articles
{
    public class ServicesConfigurator : IServicesConfigurator
    {
        public void Configure(IServiceCollection serviceCollection)
        {
            serviceCollection.AddTransient<Services.IArticleBuilder, Services.ArticleBuilder>();
            serviceCollection.AddTransient<Services.IArticleRootResolver, Services.ArticleRootResolver>();
        }
    }
}

Create Template Class

Change the Item ID’s as per your Sitecore Instance

namespace BasicCompany.Feature.Articles
{
  public static class Templates
  {
        public static class ArticleItem
        {
            public static readonly ID Id = new ID("{EE5CE126-890D-4F01-9DD5-3D81FC397A91}"); //
        }

        public static class ArticleItemData
        {
            public static readonly ID Id = new ID("{8AA19CA1-99A6-4588-B1D7-3FA9A8F6756A}"); //
        }

        public static class ArticleRoot
        {
            public static readonly ID Id = new ID("{A46A11C6-C7F9-4F61-BF0C-FFF060F0FECC}"); //
        }
  }
}

Create App Config to register the ServiceConfigurator-

Create Feature.Articles.config file in App_Config/Include/Feature folder

<?xml version="1.0"?>

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <services>
      <configurator type="BasicCompany.Feature.Navigation.ServicesConfigurator, BasicCompany.Feature.Navigation" />
    </services>
  </sitecore>
</configuration>

Create Templates for Article

These templates are used to indicate the different level s of Article. i..e Article Page- will inherit from _ArticleRoot, ArticlePage will inherit from _ArticleItem and Article Content will inherit from _ArticleItemData

Sitecore Items

Create Rendering Content Resolver

Create a New “Rendering Contents Resolvers Folder” in /sitecore/system/Modules/Layout Service

Craete a New “Rendering Contents Resolver” in this folder.

Provide the type – BasicCompany.Feature.Articles.LayoutService.ArticleContentResolver, BasicCompany.Feature.Articles

Create Articles Json Rendering

Craete a neJson rendering name “Articles” and newly created content resolver in the “Rendering Contents Resolver” field.

Add the new rendering to the page

Publish items

Rendering Project

Create Models Articles.cs

using Sitecore.AspNet.RenderingEngine.Binding.Attributes;
using Sitecore.LayoutService.Client.Response.Model.Fields;

namespace BasicCompany.Feature.Articles.Models
{
    public class Articles
    {
        [SitecoreComponentField]
        public ContentListField<Article> ArticleItems { get; set; }
    }
}

Create new view Articles.cshtml in /Views/Shared/Components/SitecoreComponent

@using Sitecore.AspNet.RenderingEngine.Extensions
@model BasicCompany.Feature.Articles.Models.Articles


<div class="container">
    <div class="product-list-columns columns is-multiline">
        @foreach (var article in Model.ArticleItems)
        {
            <partial name="_ArticleList" model="article" />
        }
    </div>
</div>

Create _ArticleList.cshtml in Views/Shared folder

Note its using ItemLinkField

@model ItemLinkField<Article>

<a href="@Model.Url" class="column product-list-column is-4-desktop is-6-tablet">
    <div class="card">
        <div class="card-content">
            <div class="content">
                <h4 asp-for="@Model.Fields.Title"></h4>
                <p asp-for="@Model.Fields.ShortDescription"></p>
            </div>
        </div>
    </div>
</a>

Update the RenderingEngineOptionsExtensions

namespace BasicCompany.Feature.Articles.Extensions
{
    public  static class RenderingEngineOptionsExtensions
    {
        public static RenderingEngineOptions AddFeatureArticle(this RenderingEngineOptions options)
        {
            options

                .AddModelBoundView<Article>("Article")
                .AddModelBoundView<Models.Articles>("Articles");
            return options;
        }
    }
}

Update Articles.modules.json to serialiaze content resolver

{
  "namespace": "Feature.Articles",
  "items": {
    "includes": [
      {
        "name": "templates",
        "path": "/sitecore/templates/Feature/Articles"
      },
      {
        "name": "renderings",
        "path": "/sitecore/layout/Renderings/Feature/Articles"
      },
      {
        "name": "contents-resolvers",
        "path": "/sitecore/system/Modules/Layout Service/Rendering Contents Resolvers/Articles"
      }
    ]
  }
}

IMP – Ensure the Startup.cs has AddFeatureArticle() added in AddSitecoreRenderingEngine

Output

List of Articles-

When we click on any of the Article take to the Article page-

The above pages are shown as per this structure in Sitecore

Configure Sitecore Content Serialization for ASP.Net Rendering with Helix Examples Solution

In this blog will creata a new component name Article in the Helix Examples Solution to demonstrate how to configure and use Sitecore Content Serlialization (SCS).

Assuming the Sitecore CLI is installed along with Sitecore.DevEx.Extensibility.SerializationSitecore.DevEx.Extensibility.Publishing plugins are installed.

For more details on the plugin installation please see this link- https://doc.sitecore.com/xp/en/developers/101/developer-tools/install-sitecore-command-line-interface.html

Open the helix-basic-aspnetcore folder in Visual Studio and see Sitecore.json file. This file has the configuration settings for SCS.

modules – willl look into the src folder for *.module.json file for any component specific configuration the items that need to be serialized.

So lets create a new module or rendering feature named “Articles”. Just a folder and not a project itself

1. Create a module json for serlialization configuration

IMP – Create Articles.module.json file in the project root folder

Add following to the json file-

{
  "namespace": "Feature.Articles",
  "items": {
    "includes": [
      {
        "name": "templates",
        "path": "/sitecore/templates/Feature/Articles"
      },
      {
        "name": "renderings",
        "path": "/sitecore/layout/Renderings/Feature/Articles"
      }
    ]
  }
}

Here the items that will be serliazed are templates and rendering from the given path in Sitecore to the local Solution Folder configured in Sitecore.json file the path mentioned in defaultModuleRelativeSerializationPath property. See step 1

IMP- Ensure the module file is in Articles folder. Your project folder should looks like this-

2. Create a Sitecore Template and Rendering for Articles

Create a Json Rendering for now(fill in the details later)

3. Sync the items (manual)

Execute following command to serlaize the items for Articles-

dotnet sitecore ser pull

Project folder should now have items folder with templates and rendering-

Thats it any Templates and rendering created for Articles (new component) should be serliazed.

Refer BasicCompany.module.json for any placeholders, layouts etc serlization at the project level.

Hope this helps.

Create a Asp.Net simple rendering using data source in Helix Examples Solution

In this blog will create a simple rendering uing Asp.Net Rendering SDK in Helix Examples Solution

Please refer the blog to create a rendering folder and configure the SCS before proceeding this blog.

So lets create a new module or rendering feature named “Articles”.

1. Create a Feature project using Razor Class Library

Project Name – BasicCompany.Feature.Articles.Rendering

Notice the project path

Choose .Net Core 3.1 Framework-

Delete any exisitng files and folders under this project-

Edit the project to use netcoreapp3.1 and AddRazorSupportForMvc to true

Rename helix-basic-aspnetcore\src\Feature\Articles\BasicCompany.Feature.Articles.Rendering to rendering. Just to follow other feature fodler structure.

2. Install Sitecore packages

Sitecore.AspNet.RenderingEngine

Sitecore.LayoutService.Client

I have installed verions 16 just to be in sync with other projects. You may install the latest.

New rendering project should have these packages installed-

Remove these packages as this may be not required at thi point of time or downgrade this to 3.1.1

Refer the new created rendering project to BasicCompany.Project.BasicCompany.Rendering

When the solution is build you may see this error-

Severity Code Description Project File Line Suppression State
Error The package reference ‘Sitecore.AspNet.RenderingEngine’ should not specify a version. Please specify the version in ‘C:\projects\Helix.Examples\examples\helix-basic-aspnetcore\Packages.props’ or set VersionOverride to override the centrally defined version. BasicCompany.Feature.Articles.Rendering C:\projects\Helix.Examples\examples\helix-basic-aspnetcore\src\Feature\Articles\rendering\BasicCompany.Feature.Articles.Rendering.csproj

Solution– Remove the version for the plugin fropm project file

Edit the project file and remove version from the PackageReference-

Solution should build successully.

3. Ensure Articles.modules.json file in Feature folder

Please see this blog <<Enter blog url here>> how to create a module.json file to serliaze the Sitecore items for new Feature.

4. Create required Sitecore Templates, content, renderings and Placeholder Settings

Template – Article in following path- /sitecore/templates/Feature/Articles

Page Type Template – Create 2 page type templates “Articles” and “Article” page as below.

Add any required Insert Options where necessary.

IMP- inherit from _NavigationItem to display the Articles as Navigation option

Enter Navigation Title for Articles page-

Content

Create content in Home page based on the Article templates created.

Rendering

Create a new Json Rendering Article. See previous post

Set Datasource Location- ./Page Components|query:./ancestor-or-self::*[@@templatename=’Site’]/Shared Content/Articles

Datasource Template- /sitecore/templates/Feature/Articles/Article

Add rendering to Template

Add Header, Article and Footer Controls to the Presentation

Select appropriate datasource for the Article component-

You can also add the component from experience editor. For simplicity purpose I am adding this from the presentation details manually.

Publish the changes and see https://www.basic-company-aspnetcore.localhost

Note:- If you get bad gateway error the resolution is in this blog <<blog for resolution>>

you should see the Articles option in Navigation-

Note- We wont be configuring “Articles” page in this blog. Will see that in next blog when uing Content Resolver.

See thie Article page-

https://www.basic-company-aspnetcore.localhost/Articles/Sitecore%20Content%20Serialization%20structural%20overview

There is a error – “Unknown component ‘Article'”. This is because we havent yet created view for this component.

Create Model in BasicCompany.Feature.Articles.Rendering project for rendering Article component

Note the propeties are using Sitecore.LayoutService.Client.Response.Model.Fields

using Sitecore.LayoutService.Client.Response.Model.Fields;
using System;
using System.Collections.Generic;
using System.Text;

namespace BasicCompany.Feature.Articles.Rendering.Models
{
    public class Article
    {
        public TextField Title { get; set; }

        public RichTextField Description { get; set; }

        public TextField ShortDescription { get; set; }
    }
}

Create View in BasicCompany.Feature.Articles.Rendering project for rendering Article component

Create Article.cshtml file under Views/Shared/Components/SitecoreComponent

Add following markup-


@model Article

<div class="container">
    <section class="hero is-small product-detail-hero">
        <div class="hero-body">
             <h3  class="title" asp-for="Title"></h3>
            <sc-text class="subtitle is-one-quarter" asp-for="Description"></sc-text>
        </div>
    </section>
</div>

InViews Folder create _ViewImports.cshtml file and put the following in file-

@using Sitecore.LayoutService.Client.Response.Model
@using Sitecore.LayoutService.Client.Response.Model.Fields
@using Sitecore.AspNet.RenderingEngine.Extensions
@using BasicCompany.Feature.Articles.Rendering.Models

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Sitecore.AspNet.RenderingEngine

Add Extensions for registering the ModelBoundView. This is a static class and will be used in Project Rendering on application startup (BasicCompany.Project.BasicCompany.Rendering).

using BasicCompany.Feature.Articles.Rendering.Models;
using Sitecore.AspNet.RenderingEngine.Configuration;
using Sitecore.AspNet.RenderingEngine.Extensions;

namespace BasicCompany.Feature.Articles.Extensions
{
    public  static class RenderingEngineOptionsExtensions
    {
        public static RenderingEngineOptions AddFeatureArticle(this RenderingEngineOptions options)
        {
            options
                .AddModelBoundView<Article>("Article");            
            return options;
        }
    }
}

In BasicCompany.Project.BasicCompany.Rendering project, Startup.cs register the component-

Build the Project

Output– https://www.basic-company-aspnetcore.localhost/Articles/Sitecore%20Content%20Serialization%20structural%20overview

Issues

Bad gateway error while accessing – https://www.basic-company-aspnetcore.localhost/

Solution-

Restart the rendering container

docker ps
docker restart <<rebdering container>>

Debug Helix Examples solution using Asp.Net Rendering hosted in Docker Containers

See this blog to setup the development environment for Helix Examlpes using Docker

Open the solution from following location – \examples\helix-basic-aspnetcore

Open the containers tab and should list all the containsers with its status-

You may also use following command to check the status of contrianers-

docker ps

Lets debug the Navigation which has content resolver-

Right click the CD container and Attach to Process

Select Managed(.Net 4.x) debug type. Select w3wp.exe and click Attach.

Helix Examples Solution should now run in debug mode.

Build the solution, add a breakpoint to any of the resolvers (Header or Footer)

Refresh or visit the site – https://www.basic-company-aspnetcore.localhost/ and should be able to see the debugger-

Issues debuging or just building the solution-

Bad Gateway-

Solution- You may see the errors with command-

docker-compose logs -f rendering

Following log appears- binary is being used by another process. This is the issues with the dotnet watch with the docker

Solution- Restart the rendering container

This should bring up the site.

You can also watch the changes outside the docker. See here for more details-

https://sitecore.stackexchange.com/questions/29566/asp-net-core-rendering-sdk-every-time-i-have-to-run-docker-compose-restart-ren

Sitecore Headless Development with ASP.NET Rendering SDK – Helix Examples Solution – The Docker Way

This blog will give a quick overview of setting development environment for Headless Development with ASP.Net Rendering SDK using the Helix Examples and the docker.

Although there are videos and blogs around same I will do a quick walk through on setting Helix Examples and any errors I faced whilst setting up the environment.

Refer the following for same – https://github.com/Sitecore/Helix.Examples/tree/master/examples/helix-basic-aspnetcore

Install .Net Core 3.1

https://dotnet.microsoft.com/en-us/download/dotnet/3.1

Install .Net core 3.1 on your machine and this is required to create any rendering or platform projects later to extend the Helix Examples Solution or compiling the existing code.

Install Docker Desktop on Windows

https://docs.docker.com/desktop/windows/install/

Run this on Hyper-V mode and Switch to Windows Containers

Install Visual Studio Code and Visual Studio 2022 Community Edition

https://visualstudio.microsoft.com/vs/community/

https://code.visualstudio.com/download

Whilst installing Visual Studio 2022 select the .Net Framework project and templates option as the platform projects uses .Net Framework 4.8 version. This will also help further if you want to extend the solution.

Install and Configure Windows Terminal (optional)

https://docs.microsoft.com/en-us/windows/terminal/install

https://dev.to/shahinalam02/customize-your-terminal-using-oh-my-posh-theme-38if

https://www.hanselman.com/blog/my-ultimate-powershell-prompt-with-oh-my-posh-and-the-windows-terminal

Install Windows Terminal, refer above link and if you fancy applying the themes, although this is optional.

Install git

https://git-scm.com/download/win

Clone Helix Examples Solution

https://github.com/Sitecore/Helix.Examples

https://github.com/Sitecore/Helix.Examples.git

Initialise the config

Navigate to \examples\helix-basic-aspnetcore and run following-

.\init.ps1 -LicenseXmlPath C:\<<path to license>>\license.xml -SitecoreAdminPassword "b"

This should initalise teh .env file and fill in the values of the variables for License and Admin Password. Also it will populate other variables.

Build Images

Once the config are initialised run folowing command-

up.ps1

Once all the images are downloaded and built along with solution login to CM should will be asked.

Login to the CM and Allow access to Sitecore API and Offline Access

Once this done the CD and CM app should be ready along with the data been synched.

Check the logs for any errors in rendering with following command-

docker-compose logs -f rendering

Access Application

Site can be accessed with the following url –

Sitecore Content Management: https://cm.basic-company-aspnetcore.localhost/sitecore/

Sitecore Identity Server: https://id.basic-company-aspnetcore.localhost

Basic Company site: https://www.basic-company-aspnetcore.localhost

Use following to stop/remove containers-

docker compose down

Issues while building the images

Error response from daemon: Unrecognised volume spec: file ‘\\.\pipe\docker_engine’ cannot be mapped. Only directories can be mapped on this platform

Solution-

Disable Docker Compose V2 using command or in Docker Desktop-

docker-compose disable-v2

or Uncheck the “Use Docker Compose V2” option

https://stackoverflow.com/questions/68010612/error-response-from-daemon-unrecognised-volume-spec-file-pipe-docker-engi

Index and Search OrderCloud Extended Properties

This article explains usage of extended properties in OrderCloud-

https://ordercloud.io/knowledge-base/extended-properties

But it doesn’t tell about how to index the extended properties to get the search results.

This blog post helps to setup the XP Indices feature already available with the OrderCloud and search such properties.

This example shows extended properties for Categories for which first Catalog needs to setup

1. Create Catalog from Portal (Assume Marketplace is already created)-

Navigate to Product Catalogs => Catalog => Select an operation “Create a new catalog”

Use below JSON or fill in form to create catalog

{
  "ID": "0001",
  "Active": true,
  "Name": "HabitatMaster",
  "Description": "HabitatMaster"
}

Catalog will be created with 201 status

2. Create Catagories from Portal with reference to Catalog Id created previously-

Navigate to Product Catalogs => Categories=> Select an operation “Create a new category”

Use below JSON to create catqagory for Catalog “0001” with the extended property “DisplayType” as “Text”

{
  "ID": "0001-CategoryDisplayText",
  "Active": true,
  "Name": "CategoryDisplayText",
  "Description": "CategoryDisplayText",
  "xp": {
    "DisplayType": "Text"
  }
}

Likewise create another catagory with DisplayType Image as per below JSON-

{
  "ID": "0001-CategoryDisplayImage",
  "Active": true,
  "Name": "CategoryDisplayImage",
  "Description": "CategoryDisplayImage",
  "xp": {
    "DisplayType": "Image"
  }
}

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-

Setup Sitecore OrderCloud Headstart Buyer UI App – Part 4

Part 1 using offline Azure resource and Part 1 using online Azure resources gives a walkthrough on setting Sitecore Ordercloud Headstart pre-requisites. While Part 2 helps setup middleware.

Part 3 helps setup Seller UI App

In this blog will setup Buyer UI

Step 1- Setup the Buyer UI project

If you have followed earlier steps to setup Seller UI App you must have already installed node js.

Open the BuyerUI project in Visual Studio Code (prefered) from /src/UI/Buyer folder

Step 2 – Change configuration defaultbuyer-test.json

Navigate to \src\UI\Buyer\src\assets\appConfigs\defaultbuyer-test.json

Update the clientID to your Marketplace Buyer UI client ID

Update baseUrl e.g.:- http://localhost:4300

Update middlewareUrl. If you are in local update this to – https://localhost:5001

Update translateBlobUrl

Step 3 – Change configuration environment.local.ts

Update the useLocalMiddleware to true if this is locally setup

Update localMiddlewareURL to https://localhost:5001

Update localBuyerApiClient, same as in the previous step

Step 4 – Run the Buyer UI application

RUN – from the visual studio terminal or powershell

npm install
np run start

This should compile successfully and ;listen to 4300 port

Headstart Buyer application- http://localhost:4300