Display a logo from Sitecore media library in the Sitecore Edge Demo NextJS Site

Pattern: The root cause for this issue is host name is not passed dynamically. Although edge demo site is used as an example in this blog post and this post follows a dynamic approach, in Sitecore Slack chat, I have seen that this issue happens in XM Cloud local environment with the SXA starter kit too. Since the issue happens locally, the resolution in case of XM Cloud SXA site is set Hostname field value to xmcloudcm.localhost on your SXA Site definition item found at /sitecore/content/<<SITE_COLLECTION>>/<<SITE>>/Settings/Site Grouping/<<SITE>>. Also, ensure to update the proper scheme (https) if you are hard-coding the hostname.

Further details:

Sometimes, small things make a major difference that too if it is a needle in a haystack, it is tough to find that small thing! 

This is why one of the best ways to improve your technical capability is play-around with github projects. In this blog article, I cover a simple change to the Sitecore Edge Demo Site! What I thought as simple didn't happen simply with a turn of switch. While I went through the process, I also realised a few important Sitecore principles are applicable to most projects. A couple of them are:

1. Create a Site configuration template and then a section in the Content tree to add your site title/header/footer logo 

2. Considering the fact we are moving to a composable world, your digital assets (pictures / videos / documents etc.) must come from Content hub Digital Asset Management (DAM)

Although, the Sitecore Edge Demo Site uses Content Hub (CH) Digital Asset Management (DAM) to store images, I didn't have enough CH credit so, I set myself a reasonable goal to add my logo to media library and then reference in site configuration to see the logo get picked!

It wasn't so easy; the logo wasn't getting picked right away in the public site and I had to figure out what was going wrong where. Once I fixed that, all was fine, what a joy doing a simple change!  Again, there could be a better way of doing this change but, I have covered what occurred to me as the simplest way!

Now, I cover the issue and the changes visually:

1. The site runs on Docker, execute .\up.ps1

2. Original Logo in Experience Editor:

3. The Config content item that inherits from a data template and picks assets from DAM and hence the logo:

4. I don't have CH credit but have access to Canva so, created logo of my choice and uploaded to Sitecore media library:

5. Save and publish then, view in Experience Editor to believe your own two eyes:

Not one of those perfectly aligned logos but fits the purpose on hand!

6. Check the so-called rendering (public) instance and the logo is not to be seen and this is the (small) issue I set out to fix:

7. Every developer's delight - inspect the html and the rendering doesn't seem to like the image url!

8. After poring through the docker / compose / override and then the Sitecore patch files, I realised that the site is not patched correctly and when I did the necessary tinkering and restarted the docker instance, everything was fine!

Old:

<site name="edgewebsite"

            inherits="website"

            hostName="*"

            rootPath="/sitecore/content/EdgeWebsite"

            patch:before="site[@name='website']" />

New:

1. docker.override.yml (env var):

2. Sitecore.Demo.Edge.Website.config Patch file changes:

<site name="edgewebsite"

            inherits="website"

            hostName="$(env:CM_HOST)"

            scheme="https"

            rootPath="/sitecore/content/EdgeWebsite"

            patch:before="site[@name='website']" />

Finally, the much needed end-result:

Every Sitecore Developer's  best friend - showconfig.aspx!

Summing up altogether; here is docker running a Sitecore instance with a NextJS rendering displaying a Sitecore media library logo apart from other images in Content hub Digital Asset Management!